Day3(下) TabLayout的用法大全及其屬性詳解

通常在ViewPager的上方，我們都會放一個標籤指示器與ViewPager進行聯動，同樣“愛閱”也是遵照這樣的設計風格進行設計和實現的。可選擇的實現方案其實有很多，比如：TabPageIndicator或者GitHub上的開源框架PagerSlidingTabTrip。但是這些都是第三方的而且也已經比較老了，所以我使用Android自帶的控件TabLayout來實現這個效果，而且TabLayout更爲強大，因爲Tab標籤可以使用自定義View並且可以實現多種屬性的設置。

首先來看下效果圖：

點此進入目錄：[乾貨] 十天 教你從創意到上線APP

一、TabLayout的基本使用

1、在佈局中加入該控件

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        android:background="#D2A2CC"
        app:tabMode="scrollable" />

2、在代碼中找到並設置

    @BindView(R.id.tab_layout_main)
    TabLayout mTabLayout;
    mTabLayout.addTab(tablayout.newTab().setText("新聞"));
    mTabLayout.addTab(tablayout.newTab().setText("天氣"));
    mTabLayout.addTab(tablayout.newTab().setText("娛樂"));

顯示效果

向上滑動還可收縮成這樣：

這樣我們就把最簡單的用法掌握了，但如果你想要往裏面加入一些個性化設置也是可以的，比如你想加入圖片的話，可以這麼辦：

    mTabLayout.addTab(tablayout.newTab().setText("新聞").setIcon(R.mipmap.icon1));
    mTabLayout.addTab(tablayout.newTab().setText("天氣").setIcon(R.mipmap.icon2));
    mTabLayout.addTab(tablayout.newTab().setText("娛樂").setIcon(R.mipmap.icon3));

二、結合ViewPager施展魔法

基本的設置結束了，那麼這個時候我們要實現最開始的效果 —— 滑動ViewPager的同時改變Tab的狀態，要真麼辦呢？

1、首先要準備好ViewPager的數據

在我們上午實現的ViewPagerAdapter中重寫getPageTitle()方法，以此返回每個ViewPager的標題的數據，代碼如下：

    @Override
    public CharSequence getPageTitle(int position) {
        return mCategoryList.get(position).getName();
    }

這個方法裏對應返回的值就是我們最終想要顯示在Tab中的標題，所以你要可以根據你自己的業務場景來進行實現。

2、把ViewPager和TabLayout進行綁定

代碼很簡單，一行搞定：

    mTabLayout.setupWithViewPager(mViewpager);

沒錯，setupWithViewPager()是TabLayout自帶的方法，就是專門用來和ViewPager視圖進行綁定的。如果沒有其他問題，你會發現我們的基本視圖效果已經實現了，但是如果你想要實現更多的屬性效果，可以參看接下來總結的一些常用屬性。

三、TabLayout常用屬性

1、顏色改變

• 改變選中字體的顏色

app:tabSelectedTextColor="@android:color/holo_orange_light"

• 改變未選中字體的顏色

app:tabTextColor="@color/colorPrimary"

• 改變指示器下標的顏色

app:tabIndicatorColor="@android:color/holo_orange_light"

• 改變整個TabLayout的顏色

app:tabBackground="color"

2、尺寸與圖標

• 改變TabLayout內部字體大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

• 改變指示器下標的高度

app:tabIndicatorHeight="4dp"

• 添加圖標

mTabLayout.addTab(tabLayout.newTab().setText("Tab A").setIcon(R.mipmap.ic_launcher));

• 內容的顯示模式

app:tabGravity="center"  // 居中，如果是fill，則是充滿

3、寬度限制

• 設置最大的tab寬度

app:tabMaxWidth="xxdp"

• 設置最小的tab寬度

app:tabMinWidth="xxdp"

4、TabLayout的監聽事件

選中了某個tab的監聽事件OnTabSelectedListener()

    tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

        @Override
        public voidonTabSelected(TabLayout.Tab tab) {
            //選中了tab的邏輯
        }

        @Override
        public voidonTabUnselected(TabLayout.Tab tab) {
            //未選中tab的邏輯
        }

        @Override
        public voidonTabReselected(TabLayout.Tab tab) {
            //再次選中tab的邏輯
        }
    });

至此爲止，我們TabLayout的最常用屬性就介紹完畢了，如果你還有更復雜的需求，比如：Tab點擊縮放的實現，可以參考該鏈接：TabLayout使用方法詳解

聯繫方式：

簡書：WillFlow
CSDN：WillFlow
微信公衆號：WillFlow