底部导航栏的几种实现方式

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属性中设置

android:drawableTop="@drawable/tab_menu_channel"

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中要思考的问题:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxgdy.html