TabLayout

weixin_33935777發表於2018-08-04
TabLayout

效果圖：

11483779-894a331012dbbce5.gif
GIF.gif

簡單使用

XML佈局

<android.support.design.widget.TabLayout
        android:id="@+id/register_type_tab"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        app:tabBackground="@color/colorWhite"
        app:tabIndicatorColor="@color/colorTabBg"
        app:tabIndicatorHeight="1dp"
        app:tabSelectedTextColor="@color/colorTabBg"
        app:tabTextAppearance="@style/TabLayoutTextSizeStyle"
        app:tabTextColor="@color/colorUserTv" />

常用屬性

  1. 設定選中字型的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
  1. 設定未選中字型的顏色
app:tabTextColor="@color/colorPrimary"
  1. 設定指示器下標（下劃線）的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
  1. 設定TabLayout的背景（可設定選中與未選中狀態）
app:tabBackground="color"
  1. 設定TabLayout內部字型大小
app:tabTextAppearance="@style/TabLayoutTextSizeStyle"//設定文字的外貌

自定義style

 <style name="TabLayoutTextSizeStyle">
        <item name="android:textSize">16sp</item>
    </style>
  1. 設定指示器下標的高度
app:tabIndicatorHeight="1dp"//如果不需要就設定成0dp
  1. 新增圖示

有時候Tab只有文字感覺有點單調了：

 tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
11483779-a276c31e1a6e0e89
image
  1. 設定Tab的可以滑動
app:tabMode="scrollable"//設定為可以滑動的

預設是fixed：固定的，標籤很多的時候會被擠壓，不能滑動。
9.內容的顯示模式

app:tabGravity="center"//居中，如果是fill，則是充滿

10.Tab的寬度限制
設定最大的tab寬度：

app:tabMaxWidth="xxdp"

設定最小的tab寬度：

app:tabMinWidth="xxdp"
  1. 設定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();
        }
    }

相關文章