在项目里使用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
网友评论