Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ,TabLayout是Android Material Design中的控件,布局文件简单。
LinearLayout + TextView方式 效果图 分析根据效果图,我们可以看出在选中的时候,文字 图片 和背景都会发生改变,我们可以通过是否selected来判断。
首先来说下图片:
我们准备了如下的图片
分别是选中和未选中两种状态的图片。
要处理这些不同状态下展示什么的问题,就要用selector来实现了。
selector标签,可以添加一个或多个item子标签,而相应的状态是在item标签中定义的。定义的xml文件可以作为两种资源使用:drawable和color。 更多详细的细节 请参考Android样式的开发:selector篇
android:state_selected: 设置是否选中状态,true表示已选中,false表示未选中。
我们在这里使用的是图片,选中时为黄色的图标,未选中时为灰色的图标,如下所示。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_better_pressed" android:state_selected="true"/> <item android:drawable="@drawable/tab_better_normal"/> </selector>1
2
3
4
5
6
1
2
3
4
5
6
因为我们的思路是 图片在文字的上方
所以在TextView的xml属性中设置
1
1
即可。
其余的几个同上,在这里就不一一列举了。
接着说下文字的处理:
选中的时候为黄色,未选中 灰色
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/text_yellow" android:state_selected="true"/> <item android:color="@color/text_gray"/> </selector>1
2
3
4
5
6
7
1
2
3
4
5
6
7
然后在TextView的xml属性中设置
android:textColor="@drawable/tab_menu_text"1
1
最后说下背景的处理:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <!--形状定义工具--> <shape> <!--设置形状填充的颜色,只有android:color一个属性--> <solid android:color="#FFC4C4C4" /> </shape> </item> <item> <shape> <solid android:color="@color/transparent" /> </shape> </item> </selector>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
然后在TextView的xml属性中设置
android:background="@drawable/tab_menu_bg"1
1
综上所述,布局文件中TextView的属性如下:
<TextView android:id="@+id/txt_channel" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/tab_menu_bg" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_channel" android:gravity="center" android:padding="5dp" android:text="@string/tab_menu_alert" android:textColor="@drawable/tab_menu_text" android:textSize="16sp" />1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
也可以将公共的属性,提取到style中,然后设置给TextView。
主Activity中要思考的问题: