Android?TabLayout?自定義樣式及使用詳解
基本使用
在Android 開發(fā)中TabLayout 是一個(gè)非常常用的控件,并且很多情況下Tablayout中的indicator樣式也會(huì)做一些修改而不是用自帶的Theme樣式,這篇文章主要就是記錄一下如何自定義樣式以及基本的使用
首先TabLayout是可以直接在XML中創(chuàng)建TabItem的,但是日常的使用情況下都是根據(jù)數(shù)據(jù)源或者與ViewPager2等控件一起聯(lián)動(dòng)使用,然后根據(jù)數(shù)據(jù)源或者ViewPager2的標(biāo)題進(jìn)行動(dòng)態(tài)的設(shè)置TabItem?!?/p>
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)動(dòng)ViewPager2動(dòng)態(tài)設(shè)置TabItem
本篇文章只記錄ViewPager2聯(lián)動(dòng)TabLayout,ViewPager聯(lián)動(dòng)起來也大差不差
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)建三個(gè)Fragment給ViewPager2設(shè)置
3. Fragment對(duì)應(yīng)XML布局
每個(gè)Fragment對(duì)應(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)動(dòng) 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ù)源動(dòng)態(tài)生成TabItem
這一種使用方式也是非常常用的,有時(shí)候一個(gè)商品的分類,可以把類別標(biāo)題渲染到TabLayout的TabItem中,然后**根據(jù)TabLayout選中了哪個(gè)TabItem去請(qǐng)求選中類別的數(shù)據(jù)*
1.Activity布局代碼
為了方便這里就不聯(lián)動(dòng)RecyclerView進(jìn)行演示了,直接用一個(gè)TextView,當(dāng)點(diǎn)擊了TabLayout中的TabItem改變TextView文字標(biāo)題。感興趣可以自行進(jìn)行擴(kuò)展。
<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的背景顏色默認(rèn)是白色的,可以通過修改父布局的背景顏色看出來
調(diào)用屬性background就可以修改,我這里修改成藍(lán)色,要修改成透明也一樣直接設(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,簡單的樣式修改可以通過自帶的屬性進(jìn)行完成。
layer-list
layer-list 是DrawableResource的一種??梢酝ㄟ^它對(duì)indicator實(shí)現(xiàn)設(shè)置邊距,形狀(圓角矩形 圓形),寬度以及高度
制作圓形的indicator
很多時(shí)候indicator的形狀不是簡單的一條橫線,有各種各樣的形狀,這里就以圓形舉例,創(chuàng)建一個(gè)layer-list文件然后在TabLayout的tabIndicator屬性設(shè)置上去就可以了
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 注意設(shè)置gravity為center,因?yàn)槟J(rèn)左對(duì)齊 --> <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">
最終效果就是這樣,點(diǎn)擊的時(shí)候也一樣支持滑動(dòng)的動(dòng)畫效果
制作圓角矩形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>
就會(huì)發(fā)現(xiàn)距離文字近了一點(diǎn),left 和 right 的使用也很簡單,指定好就行
最終效果
修改tabBackground
光通過修改indicator很多時(shí)候還滿足所有的需求,比如有時(shí)候需要這種樣式只修改indicator也能達(dá)到,指定下高度以及形狀就ok,但是其實(shí)還有更好的方法就是使用tabBackground
實(shí)現(xiàn)上圖效果可以寫一個(gè)selector文件,最后修改文字顏色即可
注意: 在使用selector修改tabBackground的時(shí)候可以在當(dāng)中修改顏色,這一點(diǎn)和修改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的文字默認(rèn)是全大寫,可以自己寫一個(gè)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">
最終效果
以上就是Android TabLayout 自定義樣式及使用詳解的詳細(xì)內(nèi)容,更多關(guān)于Android TabLayout 自定義樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
在Android中調(diào)用WebService實(shí)例
這篇文章主要介紹了在Android中調(diào)用WebService實(shí)例,有需要的朋友可以了解一下。2016-11-11sqlite查詢結(jié)果在listview中展示的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猻qlite查詢結(jié)果在listview中展示的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04Android使用Notification在狀態(tài)欄上顯示通知
這篇文章主要為大家詳細(xì)介紹了Android使用Notification在狀態(tài)欄上顯示通知,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android鍵盤輸入語言設(shè)置默認(rèn)打開myanmar緬甸語的步驟
如何實(shí)現(xiàn)Android鍵盤輸入語言默認(rèn)打開為myanmar緬甸語,如果要設(shè)置某種語言在輸入法默認(rèn)打開可按一下步驟添加文件,我這里已經(jīng)驗(yàn)證時(shí)OK的2013-06-06Android實(shí)現(xiàn)圓線按鈕進(jìn)度效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圓線按鈕帶進(jìn)度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05