TabLayout+ViewPager制作简单导航栏

2021-12-23 17:31:12

先看样例，有图有真相

绑定viewpager

此处主要说明tablayout的使用方法，viewpager绑定fragment的介绍在其他文章说明

mBinding.tabsLayout.setupWithViewPager(mBinding.vpTabs);

常见问题

切记，一定要先绑定viewpage再添加tab，否则tab的标题无法正常显示出来
setupwithviewpager会在后台做很多事，比如清空tabs等，为了更安全的显示我们的tabs，在绑定viewpager之后，先清空一下tabs再添加
```
mBinding.tabsLayout.removeAllTabs();
```

添加 tab

mBinding.tabsLayout.addTab(mBinding.tabsLayout.newTab().setText("所有书籍"));

mBinding.tabsLayout.addTab(mBinding.tabsLayout.newTab().setText("发现"));

或者使用

private String[] lstTitles = new String[]{"所有书籍", "发现"};

for(int i = 0; i < lstTitles.length; i++){

    mBinding.tabsLayout.addTab(mBinding.tabsLayout.newTab());

    mBinding.tabsLayout.getTabAt(i).setText(lstTitles[i]);

}

常用属性设定

设定文本颜色

app:tabTextColor="@color/tab_text" //设定标题文本颜色

app:tabSelectedTextColor="@color/tab_text" //设定标题文本选中后颜色

上面只需要设置tabtextcolor即可，具体选中后的颜色可以在颜色属性里设置

在 res/drawable/目录下添加 tab_text 选择器控制默认和选中后的字体颜色

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorAccent" android:state_selected="true"/>

    <item android:color="#000"/>

</selector>

取消滚动指示线

app:tabIndicatorHeight="0dp"

设定标签文字样式

没有属性可以直接设定文字大小，但可以通过样式来设定

自定义一个 style 样式

    <style name="tabTextAppearance">

        <item name="android:textSize">22sp</item>

    </style>

app:tabTextAppearance="@style/tabTextAppearance"

码农公寓