Android TabLayout選項卡使用教程
TabLayout
TabLayout 在開發(fā)中一般作為選項卡使用,常與 ViewPager2 和Fragment 結(jié)合起來使用。
常用屬性:
app:tabBackground 設(shè)置 TabLayout 的背景色,改變整個TabLayout 的顏色;
app:tabTextColor 設(shè)置未被選中時文字的顏色;
app:tabSelectorColor 設(shè)置選中時文字顏色;
app:tabTextAppearance="@android:style/TextAppearance.Large" 設(shè)置 TabLayout 的文本主題,無法通過 textSize 來設(shè)置文字大小,只能通過主題來設(shè)定;
app:tabMode="scrollable"設(shè)置 TabLayout 可滑動,當 tabItem 個數(shù)較多時,一個界面無法呈現(xiàn)所有的導航標簽,此時就必須要用;
app:tabIndicator 設(shè)置指示器;
app:tabIndicatorColor 設(shè)置指示器顏色;
??????? app:tabIndecatorHeight 設(shè)置指示器高度,當app:tabIndecatorHeight="0dp",隱藏 Indicator 效果;
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" 改變 TabLayout 里 TabItem 文字的大?。?/p>
app: tabPadding 設(shè)置 Tab 內(nèi)部 item 的 padding。也可以單獨設(shè)置某個方向的padding, 比如 app:tabPaddingStart 設(shè)置左邊距;
app:paddingEdng / app:paddingStart 設(shè)置整個 TabLayout 的 padding;
app:tabGravity="center" 居中,如果是 fill,則充滿;
app:tabMaxWidth / app:tabMinWidth 設(shè)置最大/最小的 tab 寬度,對 Tab 的寬度進行限制。
TabItem
給TabLayout 添加 Item 有兩種方法,其中一種就是使用 TabItem 在 xml 里直接添加。
1. 使用TabItem 給 TabLayout 添加卡片。
<com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加"/>
android:icon 設(shè)置圖標;
Android:text 設(shè)置文本;
2. 通過代碼添加。使用 TabLayoutMediator()
new TabLayoutMediator(binding.tab, binding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() { @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) { //TODO 設(shè)置卡片的文本/圖標 tab.setText(mTitles.get(position)) .setIcon(mIcons.get(position)); } }).attach();
其中 mTitles 和 mIcons 是存放 text 和 Icon 的list。效果如下:
可以看到 text 在英文狀態(tài)下默認都是大寫,這是因為在 TabLayout 的源碼中默認設(shè)置屬性 textAllCaps=true。所以可以在 TabLayout 中設(shè)置如下屬性來改成小寫。
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
演示效果的xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity"> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_delete" android:text="刪除"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="相機"/> </com.google.android.material.tabs.TabLayout> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs1" style="@style/Widget.MaterialComponents.TabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" android:layout_margin="8dp"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_delete" android:text="刪除"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="相機"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_delete" android:text="刪除"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="相機"/> </com.google.android.material.tabs.TabLayout> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs2" style="@style/Widget.MaterialComponents.TabLayout.Colored" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/purple_700" android:layout_margin="8dp"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_delete" android:text="刪除"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="相機"/> </com.google.android.material.tabs.TabLayout> <com.google.android.material.tabs.TabLayout android:layout_margin="8dp" android:id="@+id/tabs3" style="@style/Widget.Design.TabLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="添加" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_call" android:text="刪除" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="菜單" /> </com.google.android.material.tabs.TabLayout> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs4" app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="0dp" android:layout_margin="8dp"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_add" android:text="add"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_delete" android:text="刪除"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@android:drawable/ic_menu_camera" android:text="相機"/> </com.google.android.material.tabs.TabLayout> </LinearLayout>
到此這篇關(guān)于Android TabLayout選項卡使用教程的文章就介紹到這了,更多相關(guān)Android TabLayout內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android仿zaker用手向上推動的特效開發(fā)【推動門效果】(附demo源碼下載)
這篇文章主要介紹了Android仿zaker用手向上推動的特效,結(jié)合完整實例形式分析了Android滑動切換效果的實現(xiàn)步驟與相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07Android應(yīng)用第一次安裝成功點擊“打開”后Home鍵切出應(yīng)用后再點擊桌面圖標返回導致應(yīng)用重啟問題的解決方法
這篇文章主要介紹了Android應(yīng)用第一次安裝成功點擊“打開”后Home鍵切出應(yīng)用后再點擊桌面圖標返回導致應(yīng)用重啟問題的解決方法,需要的朋友可以參考下2016-11-11Android Studio 超級簡單的打包生成apk的方法
本篇文章主要介紹了Android Studio 超級簡單的打包生成apk的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Android+Flutter實現(xiàn)文字跑馬燈特效
跑馬燈常常被運用在很多領(lǐng)域, 例如商場的電子條幅、大樓的宣傳廣告位、地鐵的廣告位。今天我們來說一下flutter 怎么通過繪制來實現(xiàn)跑馬燈效果!,希望對大家有所幫助2022-11-11Kotlin實現(xiàn)在類里面創(chuàng)建main函數(shù)
這篇文章主要介紹了Kotlin實現(xiàn)在類里面創(chuàng)建main函數(shù),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android開發(fā)之使用GridView展示圖片的方法
這篇文章主要介紹了Android開發(fā)之使用GridView展示圖片的方法,涉及Android使用GridView操作圖片的布局與圖片調(diào)用功能實現(xiàn)技巧,需要的朋友可以參考下2016-01-01