Material Design 控件知識梳理(8) TabLayout

1、概述

前面咱們介紹了BottomNavigationBar，TabLayout和它的做用相似，都是方便用戶進行頁面之間的切換。

2、TabLayout的基本用法

下面，咱們先演示一遍TabLayout的基本用法 第一步：引入依賴：

compile 'com.android.support:design:25.3.1'
複製代碼

第二步：定義佈局，這裏使用了最經常使用的TabLayout+ViewPager的結構：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.lizejun.repotransition.TabLayoutActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="center"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
複製代碼

第三步：定義ViewPager的Adapter，這裏須要重寫getPageTitle方法，它就對應的是TabLayout當中的文案：

public class ViewPagerAdapter extends PagerAdapter {

    private List<String> mTitles;

    public ViewPagerAdapter(List<String> title) {
        mTitles = title;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ViewGroup itemView = (ViewGroup) LayoutInflater.from(container.getContext()).inflate(R.layout.item_view_pager, container, false);
        container.addView(itemView);
        TextView tv = (TextView) itemView.findViewById(R.id.tv_title);
        tv.setText(mTitles.get(position));
        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public int getCount() {
        return mTitles.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}
複製代碼

第四步：給ViewPager設置數據，並把ViewPager和TabLayout關聯起來：

public class TabLayoutActivity extends AppCompatActivity {

    private static final String[] TITLE_SHORT = new String[] {
            "深圳","南京","內蒙古"
    };

    private static final String[] TITLE_LONG = new String[] {
            "深圳","南京","內蒙古呼和浩特","廣西壯族自治區","上海","北京","天津"
    };

    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private ViewPagerAdapter mViewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        initViewPager();
        initTabLayout();
    }

    private void initViewPager() {
        mViewPager = (ViewPager) findViewById(R.id.vp_content);
        List<String> titles = new ArrayList<>();
        Collections.addAll(titles, TITLE_LONG);
        mViewPagerAdapter = new ViewPagerAdapter(titles);
        mViewPager.setAdapter(mViewPagerAdapter);
    }

    private void initTabLayout() {
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);
    }

}
複製代碼

最終的效果爲：

3、TabLayout相關設置

3.1 TabItem的外觀設置

對於每一個TabItem的外觀，TabLayout咱們比較經常使用的屬性有：

• 未選中TabItem的文本顏色：app:tabTextColor
• 選中TabItem的文本顏色app:tabSelectedTextColor
• 底部滑動條的顏色：app:tabIndicatorColor
• 底部滑動條的高度：app:tabIndicatorHeight
• TabItem的背景：app:tabBackground

咱們在第二節的基礎上進行修改：

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabTextColor="@android:color/darker_gray"
        app:tabSelectedTextColor="@android:color/holo_orange_dark"
        app:tabIndicatorColor="@android:color/holo_orange_dark"
        app:tabIndicatorHeight="2dp"
        app:tabBackground="@android:color/transparent" />
複製代碼

最終展示的效果爲：

3.2 TabItem的寬高相關設置

有兩個關於寬度的屬性比較重要：tabMinWidth和tabMaxWidth，它容許咱們這是每一個TabItem的最小和最大寬度。 此外，咱們還能夠設置TabItem四個維度的Padding。

3.3 tabMode和tabGravity

上面只是決定了單個TabItem的外觀，而TabItem在TabLayout當中的擺放規則須要由這兩個屬性來決定，它們可選的值分別爲：

• tabMode：fixed或者scrollable
• tabGravity：fill或者center

這兩個屬性分別經過：app:tabMode和app:tabGravity來設置，下面，咱們就來解釋這幾個值的含義。

3.3.1 tabMode=fixed

在這種模式下，每一個TabItem的寬度都是相等的，而且全部的TabItem加起來的寬度不會大於TabLayout的寬度，最終展示的結果還須要依賴於tabGravity屬性：

• tabGravity=fill 要求全部TabItem加起來的寬度等於TabLayout的寬度，也就是下面的效果

  

• tabGravity=center 不要求TabItem加起來的寬度等於TabLayout的寬度，會根據每一個TabItem的屬性，計算出TabItem的寬度，而後取它們中的最大值乘上TabItem的個數，當這一數值小於TabLayout的寬度時，會將每一個TabItem的寬度設置爲這個最大值，並將它們放置在整個TabLayout的中間，而若是這一數值大於TabLayout的寬度，那麼會將它們在TabLayout中均勻排列。

  

3.3.2 tabMode=scrollable

在tabMode=fixed模式下，TabItem的位置是固定的，而且它們加起來的寬度不會大於TabLayout的寬度，而在scrollable模式下則沒有這一限制，只須要計算好每一個TabItem的寬度，而後把它們排列在TabLayout中就行了，能夠經過拖動的方式查看更多的TabItem，而且當tabMode=scrollable時，tabGravity其實並無做用，下面是tabMode=scrollable的事例：

在這種模式下，每一個 TabItem的寬度默認狀況下是根據文字的寬度計算出來的，若是咱們但願進行相應的限制，那麼能夠修改 tabMinWidth或者 tabMaxWidth屬性。

3.4 設置監聽

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.d("onTabSelected", "position=" + tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.d("onTabUnselected", "position=" + tab.getPosition());

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("onTabReselected", "position=" + tab.getPosition());

            }
});
複製代碼

• onTabSelected，某個TabItem從未選中狀態變爲選中狀態時回調
• onTabUnselected，某個TabItem從選中變爲未選中時回調
• onTabReselected，某個TabItem已經處於選中狀態，可是它又被再次點擊了，那麼回調這個函數。

4、TabLayout + ViewPager

使用TabLayout時，通常都是採用ViewPager來管理多個子界面，而TabLayout也十分貼心地提供了方法讓它和ViewPager的滾動關聯起來，當點擊TabLayout中的Item時，會切換到ViewPager對應的界面，而若是滑動了ViewPager，那麼TabLayout也會切換到對應的TabItem。 咱們所須要的只是下面這句設置：

mTabLayout.setupWithViewPager(mViewPager);
複製代碼

爲了能讓TabLayout知道TabItem的標題，須要重寫ViewPager所對應的PagerAdapter中getPageTitle的方法：

@Override
public CharSequence getPageTitle(int position) {
    return mTitles.get(position);
}
複製代碼

雖然TabLayout並無提供切換到某個具體位置TabItem的方法，可是其實這一過程這徹底能夠經過mViewPager.setCurrentItem(int item)來實現。

---

更多文章，歡迎訪問個人 Android 知識梳理系列：

• Android 知識梳理目錄：www.jianshu.com/p/fd82d1899…
• 我的主頁：lizejun.cn
• 我的知識總結目錄：lizejun.cn/categories/