前言
Tablayout一般做主頁底下的導航欄開發或者上面的選擇欄開發,就個人感覺Tablayout用於主頁導航欄會比BottomNavigationView更好,自定義方面也更容易.缺點是沒有動畫也不是Material Design設計模式的一部分.下面就講解用於有導航欄的主頁開發:
一般主頁導航欄與內容用Tablayout與Fragment配合使用
1.第一種Tablayout+ViewPager+Fragment,好處是可以左右滑動不需要自己實現滑動,並且可以有動畫出現
2.第二種Tablayout+Fragment,如果你不需要左右滑動就可以輕松的選擇這個模式.
在xml里
因為有2種添加Item的方式,所以寫法也可以是2個種
第一種,這種方法可以直接配置Item的名稱屬性，注意！這種方法還可以設置圖標android:icon=
<com.google.android.material.tabs.TabLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" /> </com.google.android.material.tabs.TabLayout>
第二種,這種需要自己在代碼里添加子Item,並且可以實現自定義布局和View的Item(下面會說明在代碼里添加Item)
<com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" android:layout_width="0dp" android:layout_height="56dp" app:tabIndicatorHeight="0dp" app:tabBackground="@android:color/transparent" app:tabRippleColor="@android:color/transparent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> </com.google.android.material.tabs.TabLayout>
代碼部分講解
方式1.如果你需要與ViewPager配合使用,那么你需要知道下面的關鍵代碼
ContentFragment fragment1 = new ContentFragment(); ContentFragment fragment2 = new ContentFragment(); ContentFragment fragment3 = new ContentFragment(); ContentFragment fragment4 = new ContentFragment();
fragments.add(fragment1);
fragments.add(fragment2);
fragments.add(fragment3);
fragments.add(fragment4); adapter = new FragmentAdapter(getSupportFragmentManager(), fragments);
viewpager.setAdapter(adapter); tablayout.setupWithViewPager(viewpager);
tablayout.setupWithViewPager(viewpager);是關鍵,負責連接ViewPager與Tablayout,當然選擇的適配器FragmentAdapter也是關鍵。
也可以使用FragmentStatePagerAdapter與FragmentPagerAdapter 這2個適配器， FragmentStatePagerAdapter適合在頁面很多的情況下使用因為它會清理一些已經滑動走的Fragment， 而FragmentPagerAdapter會保存所有Fragment
方式2.如果你是需要自定義Item(下面用創建Tab的方式添加到TabLayout里,就前面說的代碼里添加Item)
private void addTabData() { mTablayout = findViewById(R.id.tablayout); String[] tabContentArray = {"首頁", "通知", "圈子", "我的"}; int[] tabIconArray = {R.drawable.ic_home_homepage, R.drawable.ic_home_notice, R.drawable.ic_home_circle, R.drawable.ic_home_my}; for (int i = 0; i < 4; i++) { TabLayout.Tab tab = mTablayout.newTab();//關鍵的創建一個Tab,注意這里使用的是已經實例的mTablayout創建的Tab,很容易疏忽使用new Tablayout().new Tab()的方式創建,這個是會報錯的. View view = LayoutInflater.from(this).inflate(R.layout.home_tab_item,mTablayout,false); ImageView icon = view.findViewById(R.id.icon); TextView content = view.findViewById(R.id.content); icon.setImageResource(tabIconArray[i]); content.setText(tabContentArray[i]); tab.setCustomView(view); if (i == 0){ mTablayout.addTab(tab,0,true);//設置選擇的item }else { mTablayout.addTab(tab); } } }
home_tab_item.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="35dp" android:layout_height="wrap_content"> <TextView android:id="@+id/red_dot" android:layout_width="10dp" android:layout_height="10dp" android:background="@drawable/bg_reddot" app:layout_constraintTop_toTopOf="@id/icon" app:layout_constraintLeft_toRightOf="@id/icon" app:layout_constraintRight_toRightOf="@id/icon"/> <ImageView android:id="@+id/icon" android:layout_width="24dp" android:layout_height="24dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> <TextView android:id="@+id/content" android:textColor="@color/fontColorMain2" android:textSize="@dimen/font_size_11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2dp" app:layout_constraintTop_toBottomOf="@id/icon" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>
ic_home_homepage.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@mipmap/ic_home_page_select"/> <item android:state_selected="false" android:drawable="@mipmap/ic_home_page"/> </selector>
實現圖片的選中變化
Tablayout選中回調
private void initTablayoutListener(){ mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //選中某個tab } @Override public void onTabUnselected(TabLayout.Tab tab) { //當tab從選擇到未選擇 } @Override public void onTabReselected(TabLayout.Tab tab) { //已經選中tab后的重復點擊tab } }); }
XML屬性講解
設置Tab的TextSize
首先你需要在styles.xml文件里創建這個文字屬性的styles
<style name="TabLayoutTextStyle"> <item name="android:textSize">@dimen/font_size_16</item> </style>
然后在使用以下屬性導入styles
app:tabTextAppearance="@style/TabLayoutTextStyle"
如果你不需要選中下划線,可以使用這個屬性取消
app:tabIndicatorHeight="0dp"
如果你不需要點擊后的陰影加漣漪動畫效果,可以使用下面2個屬性取消
app:tabBackground="@android:color/transparent"
app:tabRippleColor="@android:color/transparent"
app:tabIndicatorColor ：指示線的顏色
app:tabIndicatorHeight ： 指示線的高度
app:tabIndicatorFullWidth="false" ：指示線是否鋪滿整個tab寬度，可以配合實現圓角
app:tabSelectedTextColor ： tab選中時的字體顏色
app:tabTextColor="@color/colorPrimary" ：未選中字體顏色
app:tabBackground="color" ： 整個tab的背景顏色
app:tabMode="scrollable" ： 默認是fixed，固定的；scrollable：可滾動的
app:tabMaxWidth="0dp" ：tab的最大寬度
app:tabMinWidth="0dp" ：tab的最小寬度
app:tabPaddingTop="0dp" ：tab上內邊距
app:tabPadding="0dp" ：tab的內邊距
app:tabGravity="center" ：tab的位置
app:tabIndicator= : 自定義指示線，注意！這里的指示線其實是android:state_selected="true"的選中狀態，所以如果單單寫一個shape的xml文件設置是無法顯示的,需要在寫一個選中狀態的xml。參考如下：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp"> <!-- 設置邊距 --> <shape> <!-- 設置圓角 --> <corners android:radius="5dp" /> <!-- 設置邊框 --> <stroke android:width="1dp" android:color="@color/colorAccent" /> </shape> </item> </layer-list>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/indicator" android:state_selected="true" /> </selector>
app:tabTextAppearance="@style/tab_layout_item_text" ： 改變字體大小顏色等等，style參考如下：
<style name="tab_layout_item_text"> <item name="android:textSize">16sp</item> <item name="android:textColor">@color/color_18</item> </style>
以下是從View的源碼里復制來的屬性,以下屬性僅做參考,有些並沒有提供方法設置.比如tabTextSize 有歸有,但是人家不提供方法設置..除非自己繼承重寫
int tabPaddingStart;
int tabPaddingTop;
int tabPaddingEnd;
int tabPaddingBottom;
int tabTextAppearance;
android.content.res.ColorStateList tabTextColors;
android.content.res.ColorStateList tabIconTint;
android.content.res.ColorStateList tabRippleColorStateList;
@androidx.annotation.Nullable
android.graphics.drawable.Drawable tabSelectedIndicator;
android.graphics.PorterDuff.Mode tabIconTintMode;
float tabTextSize;
float tabTextMultiLineSize;
final int tabBackgroundResId;
int tabMaxWidth;
private final int requestedTabMinWidth;
private final int requestedTabMaxWidth;
private final int scrollableTabMinWidth;
private int contentInsetStart;
int tabGravity;
int tabIndicatorAnimationDuration;
int tabIndicatorGravity;
int mode;
boolean inlineLabel;
boolean tabIndicatorFullWidth;
boolean unboundedRipple;
補充內容
在代碼里選中某一個TabItem
mTabLayout.getTabAt(0).select();
你從select()方法就可以看出.就是希望你使用select()方法來切換item
end
app:tabPaddingTop="0dp"
app:tabPaddingStart="0dp"