Android?TabLayout?自定義樣式及使用詳解

更新時間：2022年09月13日 16:41:16 作者：coderghl

這篇文章主要為大家介紹了Android?TabLayout?自定義樣式及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

基本使用

在Android 開發(fā)中TabLayout 是一個非常常用的控件，并且很多情況下Tablayout中的indicator樣式也會做一些修改而不是用自帶的Theme樣式，這篇文章主要就是記錄一下如何自定義樣式以及基本的使用

首先TabLayout是可以直接在XML中創(chuàng)建TabItem的，但是日常的使用情況下都是根據(jù)數(shù)據(jù)源或者與ViewPager2等控件一起聯(lián)動使用，然后根據(jù)數(shù)據(jù)源或者ViewPager2的標(biāo)題進行動態(tài)的設(shè)置TabItem。　

XML靜態(tài)設(shè)置TabItem

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab1" />
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab3" />
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab2" />
</com.google.android.material.tabs.TabLayout>

接下來就是根據(jù)Tablayout獲取TabItem然后做一系列操作，這里就不演示了

聯(lián)動ViewPager2動態(tài)設(shè)置TabItem

本篇文章只記錄ViewPager2聯(lián)動TabLayout，ViewPager聯(lián)動起來也大差不差

1. Activity布局代碼

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout" />

2. 創(chuàng)建三個Fragment給ViewPager2設(shè)置

3. Fragment對應(yīng)XML布局

每個Fragment對應(yīng)的XML布局可以自行發(fā)揮，這里我就直接使用居中TextView。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.FirstFragment">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="First"
        android:textColor="@color/black"
        android:textSize="20sp" />
</FrameLayout>

4. 綁定起來

Activity代碼

class MainActivity : AppCompatActivity(R.layout.activity_main) {
    private val tabLayout: TabLayout by lazy { findViewById(R.id.tabLayout) }
    private val pager: ViewPager2 by lazy { findViewById(R.id.pager) }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        pager.adapter = MyPagerAdapter(this)
        // 聯(lián)動
        TabLayoutMediator(tabLayout, pager) { tab, position ->
            when (position) {
                0 -> tab.text = "First"
                1 -> tab.text = "Second"
                2 -> tab.text = "Third"
            }
        }.attach()
    }
}
class MyPagerAdapter(fActivity: FragmentActivity) :
    androidx.viewpager2.adapter.FragmentStateAdapter(fActivity) {
    override fun getItemCount() = 3
    override fun createFragment(position: Int) = when (position) {
        0 -> FirstFragment()
        1 -> SecondFragment()
        2 -> ThirdFragment()
        else -> FirstFragment()
    }
}

最終效果

根據(jù)數(shù)據(jù)源動態(tài)生成TabItem

這一種使用方式也是非常常用的，有時候一個商品的分類，可以把類別標(biāo)題渲染到TabLayout的TabItem中，然后**根據(jù)TabLayout選中了哪個TabItem去請求選中類別的數(shù)據(jù)*

1.Activity布局代碼

為了方便這里就不聯(lián)動RecyclerView進行演示了，直接用一個TextView，當(dāng)點擊了TabLayout中的TabItem改變TextView文字標(biāo)題。感興趣可以自行進行擴展。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabMode="scrollable" />
    <TextView
        android:id="@+id/title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. Activity代碼

class MainActivity : AppCompatActivity(R.layout.activity_main) {
    private val data = ArrayList<String>().apply {
        for (i in 0 until 40) {
            add("Item ${i + 1}")
        }
    }
    private val tabLayout: TabLayout by lazy { findViewById(R.id.tabLayout) }
    private val title: TextView by lazy { findViewById(R.id.title_tv) }
    private var currentPosition = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        data.forEach {
            tabLayout.addTab(tabLayout.newTab().setText(it))
        }
        title.text = data[currentPosition]
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                tab?.let {
                    currentPosition = it.position
                    title.text = data[currentPosition]
                }
            }
            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }
            override fun onTabReselected(tab: TabLayout.Tab?) {
            }
        })
    }
}

最終效果

修改TabLayout背景顏色

TabLayout的背景顏色默認是白色的，可以通過修改父布局的背景顏色看出來

調(diào)用屬性background就可以修改，我這里修改成藍色，要修改成透明也一樣直接設(shè)置就ok

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#03A9F4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

修改indicator

自定義Indicator樣式可以使用layer-list，修改TabItem的字體可以使用Theme，簡單的樣式修改可以通過自帶的屬性進行完成。

layer-list

layer-list 是DrawableResource的一種?？梢酝ㄟ^它對indicator實現(xiàn)設(shè)置邊距，形狀(圓角矩形圓形)，寬度以及高度

制作圓形的indicator

很多時候indicator的形狀不是簡單的一條橫線，有各種各樣的形狀，這里就以圓形舉例，創(chuàng)建一個layer-list文件然后在TabLayout的tabIndicator屬性設(shè)置上去就可以了

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 注意設(shè)置gravity為center，因為默認左對齊 -->
    <item android:gravity="center">
        <shape android:shape="oval">
            <size
                android:width="4dp"
                android:height="4dp" />
        </shape>
    </item>
</layer-list>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/indicator_circle_shape">

最終效果就是這樣，點擊的時候也一樣支持滑動的動畫效果

制作圓角矩形indicator

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="4dp" />
            <size android:height="4dp" />
        </shape>
    </item>
</layer-list>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorFullWidth="false"
    app:tabIndicator="@drawable/indicator_full_tab_shape">

最終效果

注意

layer-list里面設(shè)置顏色是無效的，如果需要設(shè)置顏色可以直接在TabLayout的tabIndicatorColor設(shè)置顏色

修改邊距

直接在layer-list文件中指定一下 left right top bottom 屬性就可以

這里設(shè)置距離底部8dp

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="8dp">
        <shape>
            <corners android:radius="4dp" />
            <size android:height="4dp" />
        </shape>
    </item>
</layer-list>

就會發(fā)現(xiàn)距離文字近了一點，left 和 right 的使用也很簡單，指定好就行

最終效果

修改tabBackground

光通過修改indicator很多時候還滿足所有的需求，比如有時候需要這種樣式只修改indicator也能達到，指定下高度以及形狀就ok，但是其實還有更好的方法就是使用tabBackground

實現(xiàn)上圖效果可以寫一個selector文件，最后修改文字顏色即可

注意: 在使用selector修改tabBackground的時候可以在當(dāng)中修改顏色，這一點和修改indicator有差別

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="@color/design_default_color_primary" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="#C6C6C6"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_bg">

如果想要添加圓角直接在selector中指定即可,如果要做成描邊也一樣

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <stroke android:width="1dp" android:color="@color/design_default_color_primary" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_bg"

修改文字

tab的文字默認是全大寫，可以自己寫一個style然后設(shè)置tabTextAppearance屬性中即可,或者修改文字大小也是一樣的操作

<style name="MyTabTextStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="textAllCaps">false</item>
    <item name="android:textSize">20sp</item>
</style>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_bg"
    app:tabTextAppearance="@style/MyTabTextStyle">

最終效果