赞
踩
一说到标签布局,一般都会想到是流式布局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;
- }
- }
若有更好的建议和想法,可以互相交流学习哦~
[转载请注明出处,谢谢~]
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。