TabLayout

效果图：

GIF.gif

简单使用

XML布局

常用属性

1. 设置选中字体的颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

2. 设置未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

3. 设置指示器下标（下划线）的颜色

app:tabIndicatorColor="@android:color/holo_orange_light"

4. 设置TabLayout的背景（可设置选中与未选中状态）

app:tabBackground="color"

5. 设置TabLayout内部字体大小

app:tabTextAppearance="@style/TabLayoutTextSizeStyle"//设置文字的外貌

自定义style

6. 设置指示器下标的高度

app:tabIndicatorHeight="1dp"//如果不需要就设置成0dp

7. 添加图标

有时候Tab只有文字感觉有点单调了：

 tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

image

8. 设置Tab的可以滑动

app:tabMode="scrollable"//设置为可以滑动的

默认是fixed：固定的，标签很多的时候会被挤压，不能滑动。
9.内容的显示模式

app:tabGravity="center"//居中，如果是fill，则是充满

10.Tab的宽度限制
设置最大的tab宽度：

app:tabMaxWidth="xxdp"

设置最小的tab宽度：

app:tabMinWidth="xxdp"

11. 设置Tab内部的子控件的Padding：

app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding：

app:paddingEnd="xxdp"
app:paddingStart="xxdp"

TabLayout的监听事件

选中了某个tab的监听事件OnTabSelectedListener()：

tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

@Override

public voidonTabSelected(TabLayout.Tab tab) {

//选中了tab的逻辑

}

@Override

public voidonTabUnselected(TabLayout.Tab tab) {

//未选中tab的逻辑

}

@Override

public voidonTabReselected(TabLayout.Tab tab) {

//再次选中tab的逻辑

}
});

和ViewPager的联动

tabLayout.setupWithViewPager(Viewpager);

TabLayout设置指示器长度

在Tablayout渲染之后，调用方法：

tab.post(new Runnable() {
            @Override
            public void run() {
                setIndicator(tab,60,60);//如果数值太大，会使设置的tab字体大小失去效果
            }
        });

public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
        Class tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
 
        tabStrip.setAccessible(true);
        LinearLayout llTab = null;
        try {
            llTab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
 
        int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
        int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
 
        for (int i = 0; i < llTab.getChildCount(); i++) {
            View child = llTab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }