TabLayout的使用

在项目里使用TabLayout+ViewPager+Fragment来实现项目功能，本文主要记录一下使用TabLayout过程中出现的一些问题。

一开始我的页面tab是固定的，寻思着在布局文件中直接写进去吧，像这样：

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen150"
        android:background="@color/white"
        android:fillViewport="false"
        app:tabMode="fixed"
        app:layout_scrollFlags="scroll"
        app:tabIndicatorColor="@color/blue_bottom"
        app:tabIndicatorHeight="@dimen/dimen8"
        app:tabTextAppearance="@style/MyTabText"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/blue_bottom">
        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="账号密码登录"/>
        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="手机号快捷登录"/>
    </android.support.design.widget.TabLayout>

里面代码设置了各种tab的样式，指示器的颜色和高度、tab的高度、tab中字体选中与未选中的颜色、style中设置了tab字体的大小（因为没有直接设置tab字体大小的属性），还放入了固定的两个TabItem。

然后呢，在代码里面动态的修改了TabLayout的一些样式，比如指示器的宽度，在TabItem之间增加了竖线

LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.tab_divider));
linearLayout.setDividerPadding(30);
TabLayoutUtil.setIndicator(this,tabLayout,80,80);

6331545-771d7c1f31aff4e3.png

高高兴兴的设置了这些之后，就是这样了，嗯，效果出来了。但是，你做足了样子，得做事情啊，代码如下：

List<Fragment> fragmentList = new ArrayList<>();
fragmentList.add(LoginWithPwdFragment.newInstance());
fragmentList.add(LoginWithCodeFragment.newInstance());
ABaseFragmentAdapter adapter = new ABaseFragmentAdapter(getSupportFragmentManager(),fragmentList);
vp.setAdapter(adapter);
tabLayout.setupWithViewPager(vp);//会调用removeAllTabs();方法remove掉所有的tab，坑

然后标题就不见了，设置的指示器的宽度也失效了，移除了所有的tab，那我将item写在布局里面有卵用，当然你可以自己去实现TabLayout和Viewpager的关联，这样不调用setupWithViewiPager就不会失效了。
那这里我们还要用，那就在调用方法之后再来设置这些样式和内容就好了，xml布局文件里面不写了。

tabLayout.addTab(tabLayout.newTab().setText("aaaa"),true);
tabLayout.addTab(tabLayout.newTab().setText("bbb"));
LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.tab_divider));
linearLayout.setDividerPadding(30);
TabLayoutUtil.setIndicator(this,tabLayout,80,80);

这样直接绑定ViewPager之后再开始设置tab，这样总行了吧，实际上是不行的，因为你在这之前绑定了ViewPager，ViewPager里面的两个fragment会默认生成两个空白的tab，然后再加上此时你设置的两个tab变成了四个，所以在这之前你还得先添加两个tab，然后在setupWithViewPager绑定之后修改这两个的文字和样式即可，所以最终的就是这个样子：

private void setAdapter() {
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(LoginWithPwdFragment.newInstance());
        fragmentList.add(LoginWithCodeFragment.newInstance());
        ABaseFragmentAdapter adapter = new ABaseFragmentAdapter(getSupportFragmentManager(),fragmentList);
        vp.setAdapter(adapter);
        tabLayout.setupWithViewPager(vp);//会调用removeAllTabs();方法remove掉所有的标题，坑
        setTabStyle();
    }

    private void setTabStyle() {
        tabLayout.getTabAt(0).setText("账号密码登录");
        tabLayout.getTabAt(1).setText("手机号快捷登录");
        tabLayout.addTab(tabLayout.newTab().setText("aaaa"),true);
        tabLayout.addTab(tabLayout.newTab().setText("bbb"));
        LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
        linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.tab_divider));
        linearLayout.setDividerPadding(30);
        TabLayoutUtil.setIndicator(this,tabLayout,80,80);
    }

最终结果就是全文中的唯一一张效果图。

后续：

在平板上发现tabLayout并不能match_parent然后平分屏幕宽度，而是居中了wrap_content，在网上看到了解决方案，TabLayout控件下必须写明三个属性：

app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabGravity="fill"

这样就可以解决平板上的这个问题。

参考：
1、系列文章：
TabLayout高端用法（一）
TabLayout高端用法（二）
TabLayout高端用法（三）

2、根据需求添加分割线：https://blog.csdn.net/qq_26413249/article/details/54093288
3、修改tablayout每个tab指示器的宽度：https://blog.csdn.net/u013134391/article/details/70833903
https://www.jianshu.com/p/83922d08250b
https://www.jianshu.com/p/031b44469476（参考本条目第一个地址的一篇）
注意：

image.png