TabLayout 使用入门

Created2018-07-12Updated2021-03-21

介绍

TabLayout是Google官方设计的一个分类UI，效果类似如下：
TabLayout
通常，我们会和ViewPager一起配合使用，实现滑动ViewPager，上面的分类也会跟着切换的效果。

ViewPager设置

使用ViewPager之前，需要设置Adapter，推荐使用FragmentStatePagerAdapter或者FragmentPagerAdapter。TabLayout会根据ViewPager的页数显示Tab,默认的Tab是一个文本view，里面的文字需要通过实现Adapter的getPageTitle(int position)方法来自动生成。 TabLayout绑定ViewPager，只需要调用一个方法即可：

mTabLayout.setupWithViewPager(mViewPager);

TabLayout 文本颜色

设置TabLayout的文本的颜色十分简单，有两种方式，一个是xml文件的形式，另一个是java代码的形式。 - xml方法：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    app:tabSelectedTextColor="@color/ls_color_red"
    app:tabTextColor="@color/ls_color_blue">

  • java代码形式：

    mTabLayout.setTabTextColors(int normalColor, int selectedColor);

Tablayout 文字大小

如果是要设置统一的文本大小，也很简单，只需要在values\style里面添加一个风格代码就可以：

<style name="MyTabLayoutTextStyle" parent="TextAppearance.AppCompat.Title">
    <item name="android:textSize">@字体大小</item>
</style>

然后布局文件里面设置tabTextAppearance参数

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    app:tabTextAppearance="@style/OrderTabLayoutTextStyle">

但是，如果你想要动态改变文字的大小，例如选中的文字比未选中的大 ，那就不能用这个方法了。

TabLayout 动态改变文字的大小

由于TabLayout官方没有设置文本大小的方法，所以，我们只能寻找其他的办法，所以我们可以使用自定义View的形式；TabLayout.Tab有一个方法叫setCustomView(@Nullable View view),通过customView,我们就可以实现对文本大小的控制了。 通过遍历TabLayout的tabs,然后添加自定义的view：

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = mTabLayout.getTabAt(i);
    TextView tv = new TextView(getContext());
    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
             ViewGroup.LayoutParams.WRAP_CONTENT);
    tv.setLayoutParams(p);
    tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 14);
    tv.setText(tab.getText());
    tab.setCustomView(tv);
}

监听tab的切换，然后当tab被选中就把文字大小改变：

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if(tab.getCustomView() == null){
            return;
        }

        //todo-*******对文本大小进行修改*******
    }
}

改变横线的长度和高度

  • 高度 控制横线的高度可以在xml文件里面写上tabIndicatorHeight参数。

  • 长度 虽然不能直接通过TabLayout的方法对长度进行控制，但是查看源码知道，横线的长度和tab的宽度有关，可以通过反射得到tabview然后设置长度：

    try {

    LinearLayout mTabStrip = (LinearLayout) mTabLayout.getChildAt(0);
int dp10 = DeviceUtils.dp2px(10);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
    View tabView = mTabStrip.getChildAt(i);
    tabView.setPadding(0, 0, 0, 0);

    //设置tab左右间距为10dp  注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
    params.width = DeviceUtils.dp2px(42);
    params.leftMargin = dp10;
    params.rightMargin = dp10;
    tabView.setLayoutParams(params);
    tabView.invalidate();
    }

    } catch (Exception e) {

    e.printStackTrace();

    }