TabLayout是開發(fā)中經(jīng)常使用到的控件，經(jīng)常與ViewPager一起配合使用，一組tab，可以點(diǎn)擊、可以滾動。這不，我們的app中也是用到了這個控件，之前對這個控件只停留在最基本的用法，因此開發(fā)時也去查了些資料，趁著周末，就系統(tǒng)地再學(xué)習(xí)一下。

基本操作

使用之前，首先需要在gradle文件中加入design庫，

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

首先看一下最默認(rèn)的行為與效果。 代碼如下：

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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"><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="56dp"></android.support.design.widget.TabLayout></android.support.constraint.ConstraintLayout> tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));tabLayout.addTab(tabLayout.newTab().setText("Tab 3").setIcon(R.mipmap.ic_launcher));tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {Toast.makeText(MainActivity.this,tab.getText(),Toast.LENGTH_SHORT).show();}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {Toast.makeText(MainActivity.this,tab.getText(),Toast.LENGTH_SHORT).show();}});

setOnTabSelectedListener是一個過時方法，官方建議使用addOnTabSelectedListener代替，其中監(jiān)聽器接口是一樣的，分別表示tab選中、未選中，再次選中狀態(tài)。其中再次選中狀態(tài)可以用于實(shí)現(xiàn)在選中tab的前提下，再點(diǎn)擊時，滾動到最頂部的效果，比如很多資訊類app就是這么實(shí)現(xiàn)的。

效果圖如下：

默認(rèn)效果可以看到指示器紅色，三個tab平分布局，有icon的顯示在文字上方。 如果TabLayout的寬度wrap_content，那么三個tab將會擠到左邊，每個tab的效果是wrap_content。

以上tab是通過代碼添加的，也可以在xml中進(jìn)行添加，效果等效于

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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"><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="56dp"><android.support.design.widget.TabItemandroid:layout_width="match_parent"android:layout_height="match_parent"android:icon="@mipmap/ic_launcher"android:text="Tab 1" /><android.support.design.widget.TabItemandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Tab 2" /><android.support.design.widget.TabItemandroid:layout_width="match_parent"android:layout_height="match_parent"android:icon="@mipmap/ic_launcher"android:text="Tab 3" /></android.support.design.widget.TabLayout></android.support.constraint.ConstraintLayout>

xml屬性說明

對于TabLayout的樣式修改，一些可以通過修改屬性就行修改。

修改指示器

可以修改指示器的顏色和高度，比如：

<android.support.design.widget.TabLayoutapp:tabIndicatorColor="@android:color/holo_green_dark"app:tabIndicatorHeight="10dp"android:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="56dp"/>

效果如下：

修改文字樣式

選中和未選中顏色設(shè)置

app:tabSelectedTextColor="#FF0000"app:tabTextColor="#0000FF"

效果如下圖：

2. 修改文字大小
使用textAppearence屬性，在style文件中設(shè)置大小。

app:tabTextAppearance="@style/my_tab_text_style"

my_tab_text_style內(nèi)容如下：

<style name="my_tab_text_style"><item name="android:textSize">20sp</item><item name="android:textStyle">bold</item></style>

效果如下：

修改tab樣式

使用padding參數(shù)，可以使用tabPadding進(jìn)行設(shè)置，比如：

<android.support.design.widget.TabLayoutapp:tabPaddingTop="20dp"android:paddingBottom="20dp"android:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content">

可以看到預(yù)覽圖的效果如下：

tabMode。tabMode支持兩種值，MODE_FIXED和MODE_SCROLLABLE；當(dāng)tab比較多，一屏容納不下時，會使用MODE_SCROLLABLE，這時可以隱藏部分MODE；而FIXED的就會始終顯示。

當(dāng)在xml布局中添加了很多TabItem后，預(yù)覽效果如下圖：

這時使用的就是FIXED模式，可以看到TabLayout默認(rèn)就是FIXED模式；當(dāng)改成MODE_SCROLLABLE后，

app:tabMode="scrollable"

預(yù)覽樣式如下圖：

Tab位置。當(dāng)只有三個tab時，默認(rèn)分散了，如果想三個tab聚合起來，可以通過設(shè)置tabGravity屬性進(jìn)行設(shè)置，比如：

app:tabGravity="center"

設(shè)置后的效果如下：

設(shè)置前的效果就是前面三個tab平鋪的效果。改屬性的默認(rèn)值是fill。

另外，可以通過設(shè)置tabContentStart設(shè)置偏移量，類似margin。

比如設(shè)置：

app:tabContentStart="100dp"

后的效果如下圖：

設(shè)置tab背景。tabBakcground屬性，比如設(shè)置的樣式如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><sizeandroid:width="50dp"android:height="30dp"></size><gradientandroid:startColor="#FF0000"android:endColor="#0000FF"></gradient></shape>

效果圖：

tab寬度，可以通過設(shè)置tabMaxWidth和tabMinWidth進(jìn)行限制。

TabItem樣式自定義

以上的xml樣式，都可以通過相應(yīng)的set方法進(jìn)行設(shè)置，但是如果想改變默認(rèn)的tab樣式，那么就需要代碼的操作了。默認(rèn)的tab樣式，icon在上，text在下；下面改個icon在左，text在右的樣式。

首先定義一個布局：

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"xmlns:tools="http://schemas.android.com/tools"android:layout_height="48dp"xmlns:app="http://schemas.android.com/apk/res-auto"><ImageViewandroid:padding="12dp"android:id="@+id/iv_icon"tools:src="@mipmap/ic_launcher"android:layout_width="48dp"android:layout_height="48dp" /><TextViewapp:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"android:textSize="18sp"android:textColor="#333333"android:id="@+id/tv_text"android:layout_width="0dp"android:layout_height="21dp"app:layout_constraintLeft_toRightOf="@id/iv_icon"app:layout_constraintRight_toRightOf="parent"tools:text="hha" /></android.support.constraint.ConstraintLayout>

然后在代碼中更改TabLayout現(xiàn)有Tab樣式，代碼如下：

tabLayout=findViewById(R.id.tabLayout);for (int i = 0; i < tabLayout.getTabCount(); i++) {TabLayout.Tab tab = tabLayout.getTabAt(i);View view=LayoutInflater.from(this).inflate(R.layout.my_tab_layout,null);tab.setCustomView(view);((ImageView)view.findViewById(R.id.iv_icon)).setImageDrawable(tab.getIcon());((TextView)view.findViewById(R.id.tv_text)).setText(tab.getText());}

運(yùn)行結(jié)果如下圖：

可以看到tab樣式已經(jīng)變成了icon在左，文字在右的樣式。

集成ViewPager

布局如下：

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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"><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="56dp"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"app:layout_constraintTop_toBottomOf="@id/tabLayout"app:layout_constraintBottom_toBottomOf="parent"android:layout_width="match_parent"android:layout_height="0dp"></android.support.v4.view.ViewPager></android.support.constraint.ConstraintLayout>

代碼如下：

public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager viewPager;private int[] imgs=new int[]{R.drawable.pic_11,R.drawable.pic_12,R.drawable.pic_11};private String[] tabs=new String[]{"Tab 1","Tab 2","Tab 3",};private List<ImgFragment> imgFragments=new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tabLayout=findViewById(R.id.tabLayout);viewPager=findViewById(R.id.viewpager);for (int i = 0; i < imgs.length; i++) {imgFragments.add(ImgFragment.newInstance(imgs[i]));}viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int i) {return imgFragments.get(i);}@Overridepublic int getCount() {return imgFragments.size();}@Nullable@Overridepublic CharSequence getPageTitle(int position) {return tabs[position];}});tabLayout.setupWithViewPager(viewPager);} }

運(yùn)行效果如下：

這里需要注意的是：當(dāng)調(diào)用了setupWithViewPager之后，tab值默認(rèn)將會從getPageTitle中獲取；如果這個時候沒有重寫PageAdapter的getPageTitle，那么效果將會如下圖：

這個時候可以發(fā)現(xiàn)TabLayout上面都是空的，但其實(shí)是有tab的，只不過tab內(nèi)容為空而已。這個時候可以通過代碼重新設(shè)置，比如：

tabLayout.setupWithViewPager(viewPager);for (int i = 0; i < tabLayout.getTabCount(); i++) {TabLayout.Tab tab=tabLayout.getTabAt(i);tab.setText(tabs[i]);tab.setIcon(imgs[i]);}

效果如下圖：

可以看到，不止設(shè)置了text，還設(shè)置了title，使用PageAdapter只能設(shè)置text。

總結(jié)

至此，TabLayout的基本用法也就是這樣了；除了這個，還有與Toolbar以及協(xié)調(diào)布局共同使用的情況，這個以后有機(jī)會會繼續(xù)深入的學(xué)習(xí)下。

DEMO地址

參考內(nèi)容

• https://developer.android.com/reference/android/support/design/widget/TabLayout
• TabLayout之自定義樣式
• MaterialDesign之對TabLayout的探索
• Design庫-TabLayout屬性詳解

總結(jié)

以上是生活随笔為你收集整理的TabLayout使用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。