最终效果
底部导航栏长度不再是填满,而是固定长度
显示圆角矩形
实现原理
隐藏 TabLayout 原生的 tabIndicator
<android.support.design.widget.TabLayout
...
app:tabIndicatorHeight="0dp"
.../>
1
2
3
4
替换 tabBackground
<android.support.design.widget.TabLayout
...
app:tabBackground="@drawable/tab_selector"
.../>
1
2
3
4
selector 代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_selected" android:state_selected="true" />
<item android:drawable="@color/white" />
</selector>
1
2
3
4
5
其中的选中 tab_selected 代码
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 整个背景色-->
<item>
<shape>
<solid android:color="@color/white" />
</shape>
</item>
<!-- 底部圆角,参数是固定的 -->
<item
android:width="20dp"
android:height="3dp"
android:gravity="bottom|center_horizontal">
<shape>
<solid android:color="@color/colorPrimary" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
备注
原理是替换 tabBackground 的背景.
具体的替换drawable可以是 UI 设计,这里只是用 xml 简单的写了一个用于演示
测试发现这个xml写的drawable在 YunOs手机(魅族2)上失效
网友评论