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;
    }
}

结束~

若有更好的建议和想法，可以互相交流学习哦~

[转载请注明出处，谢谢~]