Android 使用TabLayout实现单行标签布局
一说到标签布局,一般都会想到是流式布局FlowLayout,流式布局网上有太多的demo可参考了,但是今天产品上有个横向水平滑动的标签布局,有选中和未选中的状态,并且初始状态是不选中任何一个标签。折腾了一番,最终在TabLayout上修饰了一阵,解决了需求和想要的效果。具体如下:
1.先附上效果截图:(默认都是未选中的)
2.xml中使用如下所示:
因为tabLayout有个默认的点击效果,可使用app:tabBackground="@color/transparent"去掉;
app:tabPaddingEnd和app:tabPaddingStart属性就是每个item左右的间距;
app:tabSelectedTextColor:选中时,textView的字体颜色;
app:tabTextColor :未选中时,textView的字体颜色;
app:tabMode="scrollable":表示TabLayout中有子view超出屏幕边界时候,可以通过滑动滑出不可见的其他子view。
3.代码中动态添加每个item标签:
(1)动态添加的代码如下:
(2)每个item标签其实就是一个textView,xml如下:
(3)选中和未选中的drawable.xml如下:
未选中的shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<stroke
android:width="1dp"
android:color="@color/gray" />
<solid android:color="@color/white" />
</shape>
选中的shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<stroke
android:width="1dp"
android:color="@color/gray" />
<solid android:color="@color/red" />
</shape>
(4)tabLayout的item点击事件:注意:可以通过截图中的curSelectPosition,来获取当前选中的值;
(5)取出当前选中的值:即:labelId,进行想要的操作。
int labelId = 0;
for (int i = 0; i < labels.size(); i++) {
if (curSelectPosition == i) {
labelId = labels.get(i).id;
}
}
结束~
若有更好的建议和想法,可以互相交流学习哦~
[转载请注明出处,谢谢~]
上一篇: package golang.org/x/text/...: unrecognized import path "golang.org/x/text..."在Linux中使用go语言安装东西显示错误
下一篇: 正则表达式
推荐阅读