TabLayout 的用法小記

摘要： TabLayout是用來顯示tab的控制元件，要使用TabLayout首先要引入design開發庫： implementation 'com.android.support:design:27.1.1' 屬性說明： 屬性 說...

TabLayout是用來顯示tab的控制元件，要使用TabLayout首先要引入design開發庫：

implementation 'com.android.support:design:27.1.1'

屬性說明：

屬性	說明
app:tabSelectedTextColor	設定選中的tab的字型顏色
app:tabTextColor	設定tab預設顯示的字型顏色
app:tabTextAppearance	設定tab中字型的樣式
app:tabIndicatorColor	設定選中的tab下標指示器的顏色
app:tabIndicatorHeight	設定選中的tab下標指示器的高度
app:tabBackground	設定tablayout的背景顏色
app:tabMode	設定tab的顯示方式fixed/scrollable。fixed是預設的，所有tab充滿tablayout並且平均分佈，資料太多會擠壓；scrollable tab在超過螢幕寬度時可以滾動，不會被擠壓。
app:tabPadding	設定每個tab的內邊距
app:tabPaddingBottom	設定每個tab的底部邊距
app:tabPaddingEnd	設定每個tab的右側邊距
app:tabPaddingStart	設定每個tab的左側邊距
app:tabPaddingTop	設定每個tab的頂部邊距
app:tabContentStart	左邊偏移量
app:tabGravity	center/fill tab居中顯示(包裹)/整行顯示(佔滿)

使用

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
app:tabBackground="@color/colorAccent"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/tabTextColor"
app:tabTextAppearance="@style/tabTextAppearance"
app:tabTextColor="@color/tabtextColorDefault" />

1. 可以使用程式碼新增tab

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"))
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))
//選中事件
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
override fun onTabReselected(p0: TabLayout.Tab?) {
//再次點選已經選中的tab
}

override fun onTabUnselected(p0: TabLayout.Tab?) {
//取消選中的
}

override fun onTabSelected(p0: TabLayout.Tab?) {
//選中
}

})

2. 也可以在xml佈局中設定tab。

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabPadding="4dp">

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"
android:text="tab1" />

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"
android:text="tab2" />

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"
android:text="tab2" />

</android.support.design.widget.TabLayout>

3. 還可以配合ViewPager使用

• 建立介面卡

class YPagerAdapter(fm: FragmentManager, val titles: List<String>,
val fragments: List<BaseFragment>) : FragmentPagerAdapter(fm) {
override fun getItem(p0: Int): Fragment {
return fragments[p0]
}

override fun getCount(): Int {
return fragments.size
}

override fun getPageTitle(position: Int): CharSequence? {
return titles[position]
}

}

• 新增資料並顯示

val titles = ArrayList<String>()
val fragments = ArrayList<TabFragment>()
viewPager.adapter = YPagerAdapter(supportFragmentManager, titles, fragments)
tabLayout.setupWithViewPager(viewPager)

關於TabLayout的子佈局TabItem

在官方控制元件原始碼中可以看出，TabItem 控制元件的屬性很少：

public class TabItem extends View {
public final CharSequence text;
public final Drawable icon;
public final int customLayout;

public TabItem(Context context) {
this(context, (AttributeSet)null);
}

public TabItem(Context context, AttributeSet attrs) {
super(context, attrs);
TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs, styleable.TabItem);
this.text = a.getText(styleable.TabItem_android_text);
this.icon = a.getDrawable(styleable.TabItem_android_icon);
this.customLayout = a.getResourceId(styleable.TabItem_android_layout, 0);
a.recycle();
}
}

設定文字和布標

使用起來也比較簡單在佈局中設定

android:icon="@mipmap/ic_launcher"android:text="tab2"

或者程式碼設定

tablayout.getTabAt(1)?.setIcon(R.mipmap.ic_launcher_round)?.setText("文字")

自定義TabItem佈局

此外還有TabItem 可以設定自定義佈局：

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/layout_tab"
/>

自定義佈局內容，在TabItem中設定屬性

android:layout="@layout/layout_tab"

或者程式碼設定：

tablayout.getTabAt(1)?.setCustomView(R.layout.layout_tab)

或者

val view = LayoutInflater.from(context).inflate(R.layout.layout_tab, null)

view.tabText.text="程式碼設定tab文字"

tablayout.getTabAt(0)?.setCustomView(view)

如果同時設定了text、image和layout屬性，那麼只會顯示自定義的內容檢視

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="15dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />

<TextView
android:id="@+id/tabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="tabItem自定義佈局" />


</LinearLayout>