Android好用組件推薦:android.support.design.widget.TabLayout

什麼是TabLayout

上圖中，我們可以看到，該頁面分成三個頁籤，每個頁籤對應不同的內容，如果讓我們來實現佈局的話，我們會很容易地想到佈局爲一個頁籤指示器+ViewPager，以前，相信各位大多使用的是GitHub上的開源框架PagerSlidingTabTrip來實現指示器的效果，而如今，Android中也有自帶這種指示器的控件TabLayout,TabLayout存在於android design庫中，它提供了一個水平的佈局來展示Tabs。

一如何使用TabLayout

1.要使用TabLayout,首先要添加 android support design包的依賴，在app模塊的build.gradle中添加:

    dependencies {
        ...
        compile 'com.android.support:design:26.0.0-alpha1'
    }

2.在佈局文件的xml中，使用TabLayout：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="頁籤1"
                />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="頁籤2"
                />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="頁籤3"
                />

        </android.support.design.widget.TabLayout>

    </LinearLayout>

代碼中我們可以看到，<TabLayout></TabLayout>之間包裹着TabItem,也就是每個頁籤的配置，我們這裏只是簡單地配置了文字，先運行下看看效果：

3.如何設置頁籤的點擊事件

在java文件中，我們根據id找到TabLayout,爲其添加頁籤選中的監聽，當選中標籤的時候，彈出對應標籤的文字：

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(TabLayoutActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

效果如圖：

動態創建Tab

上面我們簡單演示了在佈局文件中配置了TabLayout和對應的頁籤TabItem，接下來我們演示如何動態創建頁籤，修改佈局文件：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

在Activity中找到TabLayout，併爲其動態添加Tab:

    public class TabLayoutActivity extends AppCompatActivity {

        private String[] titles = new String[]{
                "體育",
                "社會",
                "新聞"
        };

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

            TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);
            for (int i = 0; i < titles.length; i++) {
                TabLayout.Tab tab = tabLayout.newTab();//創建tab
                tab.setText(titles[i]);//設置文字
                tabLayout.addTab(tab);//添加到tabLayout中
            }

            tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    Toast.makeText(TabLayoutActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {

                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {

                }
            });
        }
    }

效果如圖：

爲Tab設置圖標

Tab的創建是通過調用TabLayout的newTab()方法，創建出來的Tab對象即頁籤對象，除了setText()方法設置文字外，還可以設置對應的圖標，通過調用setIcon()方法，就可以設置Tab的圖標：

      for (int i = 0; i < titles.length; i++) {
            TabLayout.Tab tab = tabLayout.newTab();//創建tab
            tab.setText(titles[i]);//設置文字
            tab.setIcon(R.mipmap.ic_launcher);//設置圖標
            tabLayout.addTab(tab);//添加到tabLayout中
        }

效果如圖：

設置更加美觀的Tab

如果不喜歡圖標在頁籤的上面，有別的需求，比如圖標在頁籤的左邊，那麼這時，可以使用Tab的setCustomView(View view)方法，可以通過佈局填充器將自己佈局好的xml填充成View對象,然後設置進去，就可以實現更加美觀的頁簽了，有興趣的同學可以試試看。

修改TabLayout的樣式

Tablayout支持定製化修改，提供了不少自定義屬性供開發者進行設置。有以下屬性支持修改：

tabBackground=""                            tablayout的背景顏色

tabIndicatorColor=""                         指示器的顏色

tabIndicatorHeight=""                        指示器的高度

tabGravity=""                                指示器的位置

tabMode=""                                   顯示模式

tabSelectedTextColor=""                      選中時文字顏色

tabTextColor=""                              未選中時文字顏色

tabTextAppearance=""                         字體外觀

tabMaxWidth=""                               tab最大寬度

tabMinWidth=""                               tab最小寬度

tabPadding=""                                tab內邊距

自定義TabLayout:

下面我們簡單修改下TabLayout提供修改的屬性，看看修改後是怎樣的效果，修改佈局文件：

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="@android:color/darker_gray"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextColor="@android:color/white"
        app:tabTextAppearance="@style/TabTextStyle"
        />

這裏我們爲TabLayout設置了藍色的背景色，設置了指示器的高度和顏色（灰色），設置了選中時文字的顏色爲淺藍色，未選中時爲白色，還設置了字體的外觀，字體的外觀設置需要在style.xml中定義樣式，如下：

    <style name="TabTextStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
    </style>

這裏定義了字體的大小，樣式中還可以設置字體其他外觀，比如設置字體是否加粗等。

看一下自定義的TabLayout效果：

可以看到，效果和我們設置的一樣。

Tab的位置和顯示模式（tabGravity和tabMode）

1.tabGravity有兩個值可選，分別是center(居中)和fill(填滿)，默認tabGravity="fill",填滿，我們將它設置爲center,看下效果:

     <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="@android:color/darker_gray"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextColor="@android:color/white"
        app:tabTextAppearance="@style/TabTextStyle"
        app:tabGravity="center"
        />

可以看到TabLayout的寬度沒有填滿，而且整個TabLayout居中顯示。

2.當有很多個tab，多到屏幕放不下的時候，比如今日頭條的TabLayout，我們需要將TabLayout的顯示模式tabMode更改爲scrollable，這樣整個TabLayout就可以左右滑動，TabLayout默認tabMode爲fixed（固定），我們將其修改爲scrollable:

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="@android:color/darker_gray"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextColor="@android:color/white"
        app:tabTextAppearance="@style/TabTextStyle"
        app:tabGravity="center"
        app:tabMode="scrollable"
        />

添加多一些頁籤：

        String[] channels = getResources().getStringArray(R.array.channel);
        for (int i = 0; i < channels.length; i++) {
            TabLayout.Tab tab = tabLayout.newTab();//創建tab
            tab.setText(channels[i]);//設置文字
            tabLayout.addTab(tab);//添加到tabLayout中
        }

channel是一個定義在xml中的string-array:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string-array name="channel">
            <item>推薦</item>
            <item>視頻</item>
            <item>熱點</item>
            <item>社會</item>
            <item>娛樂</item>
            <item>科技</item>
            <item>汽車</item>
            <item>體育</item>
            <item>財經</item>
            <item>軍事</item>
            <item>國際</item>
            <item>時尚</item>
            <item>遊戲</item>
            <item>旅遊</item>
            <item>歷史</item>
            <item>探索</item>
            <item>美食</item>
            <item>育兒</item>
            <item>養生</item>
            <item>故事</item>
            <item>美文</item>
        </string-array>
    </resources>

運行的效果如下：

可以看到TabLayout有許多Tab，且可以左右滑動。需要注意的是，當設置tabMode爲scrollable時，此時設置tabGravity已經無效，無論設置爲哪個值，它都是填滿的效果。

TabLayout結合ViewPager

TabLayout + ViewPager 在開發中經常使用到，即上面顯示頁籤，下面展示不同的fragment，就如今日頭條，現在我們仿造今日頭條的首頁，演示下如果使用TabLayout + ViewPager。

首先，在佈局文件中配置TabLayout和ViewPager:

    <?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
    >

        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimary"
            app:tabIndicatorColor="@android:color/darker_gray"
            app:tabIndicatorHeight="5dp"
            app:tabSelectedTextColor="@android:color/holo_blue_light"
            app:tabTextColor="@android:color/white"
            app:tabTextAppearance="@style/TabTextStyle"
            app:tabGravity="center"
            app:tabMode="scrollable"
            />

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            />

    </LinearLayout>

java文件中，設置TabLayout和ViewPager關聯起來：

    public class TabLayoutActivity extends AppCompatActivity {

        private TabLayout mTabLayout;
        private ViewPager mVpContent;

        private List<ContentFragment> mFragments = new ArrayList<>();
        private String[] mTitles;

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

            initView();
            initData();
            initListener();
        }

        private void initView() {
            mTabLayout = (TabLayout) findViewById(R.id.tab);
            mVpContent = (ViewPager) findViewById(R.id.vp_content);
        }

        private void initData() {
            mTitles = getResources().getStringArray(R.array.channel);
            for (int i = 0; i < mTitles.length; i++) {
                ContentFragment fragment = new ContentFragment();
                Bundle bundle = new Bundle();
                bundle.putString(ContentFragment.TEXT, mTitles[i]);
                fragment.setArguments(bundle);
                mFragments.add(fragment);//添加到fragment中
            }
        }

        private void initListener() {
            TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager(), mFragments, mTitles);
            mVpContent.setAdapter(tabAdapter);//爲viewPager設置adapter
            mTabLayout.setupWithViewPager(mVpContent);//將TabLayout和ViewPager關聯
        }
    }

運行的效果如下：

可以看到，TabLayout和ViewPager已經關聯起來，當點擊頁籤的時候，ViewPager會切換到對應的fragment,滑動ViewPager，對應頁籤也會跟着改變。

這裏需要注意的是，實現ViewPager的adapter時，需要重寫Adapter的getPageTitle()方法，返回對應頁籤的內容，這樣TabLayout纔會有對應的頁籤。

好了，到這裏關於TabLayout的介紹就到此爲止了，想看源碼的話，可以點擊以下鏈接：

https://github.com/chaychan/MaterialDesignExercise

作者：chaychan
鏈接：https://www.imooc.com/article/23245
來源：慕課網
本文原創發佈於慕課網，轉載請註明出處，謝謝合作

Android好用組件推薦:android.support.design.widget.TabLayout

什麼是TabLayout

一如何使用TabLayout

修改TabLayout的樣式

TabLayout結合ViewPager

android源碼設計模式——框架模式MVC、MVP、MVVM

極簡的Android RecyclerView Adapter（使用DataBinding）

Andorid 拍照、從相冊中選擇圖片兼容7.0uri

Android使用AutoSize適配框架與字體大小全局改變getResources方法互斥的替代解決方式——通過Theme主題動態切換字體大小

Android DataBinding——利用數據改變UI，分離你的數據業務邏輯

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Android好用組件推薦:android.support.design.widget.TabLayout

什麼是TabLayout

一 如何使用TabLayout

修改TabLayout的樣式

TabLayout結合ViewPager

一如何使用TabLayout