MaterialDesign系列文章（八）TabLayout的使用

筆墨Android發表於2018-05-13
TabLayout

祝天下所有的母親，母親節快樂
今天是母親節，希望所有在外漂泊的程式設計師，動動手給母親打個電話，告訴她我們長大了，謝謝你這麼多年的照顧！讓她們在這個簡單而又不平凡的日子裡，增添一縷欣慰！

謹以此獻給在外漂泊和奮鬥的程式設計師！！！

遊子吟

作者：孟郊
慈母手中線，遊子身上衣。
臨行密密縫，意恐遲遲歸。
誰言寸草心，報得三春暉。
複製程式碼

今天我們來說說TabLayout在開發中的一些使用集錦！

本文知識點：

  • TabLayout是什麼？
  • TabLayout的一下常見設定；
  • TabLayout的基本使用；
  • TabLayout的一些特殊配置；
  • TabLayout的一些常見案例。

1. TabLayout是什麼？

TabLayout提供了一個水平佈局來顯示選項卡。之前我們在使用選項卡的時候都是使用RadioGroup和RadioButton實現的，也有使用三方框架的。其實最主要的是沒有TabLayout的動畫效果，程式碼還很複雜！

2. TabLayout的一些常見設定

2.1 基本的屬性設定

  • app:tabBackground 設定背景
  • app:tabGravity 設定填充型別的
    • fill 全部填充 預設的
    • center 居中，但是這個是包裹內容的
  • tabIndicatorColor 設定選項卡底部橫線的顏色
  • tabIndicatorHeight 設定選項可底部橫線的高度
  • tabMaxWidth 設定最大寬度
  • tabMinWidth 設定最小寬度
  • tabMode 設定模式
    • MODE_FIXED 固定選項卡，可以顯示所有選項卡，但是多的話不建議使用
    • MODE_SCROLLABLE 可以滑動的選項卡，這裡涉及到上面的最大寬度，可以自行設定
  • app:tabPadding 設定padding 可以分別設定左上右下的padding距離
  • app:tabSelectedTextColor 設定選擇的文字顏色
  • app:tabTextAppearance 設定文字的樣式
  • app:tabTextColor 設定預設的文字的顏色
  • TabItem 內部維護的標籤
    • android:icon 設定圖示的

基本的設定就這麼多，上一張基本設定的效果圖

基本設定的效果圖

程式碼是這樣滴

<?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=".tablayout.TabLayoutActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="TabLayout的展示"
            android:textColor="@android:color/white"
            android:textSize="16sp" />
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabGravity="fill"
        app:tabIndicatorColor="#fcb314"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@android:color/white">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_dialer_sip_white_24dp"
            android:text="標籤1" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_search_black_24dp"
            android:text="標籤2" />
    </android.support.design.widget.TabLayout>
</android.support.constraint.ConstraintLayout>
複製程式碼

2.2 關聯ViewPager的操作

這應該是最常見的操作了。一般由TabLayout都會關聯ViewPager，但是由很多APP是通過FragmentTransaction進行替換的。這裡先不去說關於這種方法的實現，感興趣的同學可以自己研究一下！

2.2.1 當你在佈局檔案中設定了相應的標籤

對於這種情況，基本上是標籤固定的情況的設定，直接通多程式碼關聯一下就可以了！

  • setupWithViewPager(@Nullable ViewPager viewPager)
  • setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh)

由兩個相應的過載方法，這個autoRefreshsh是是否需要佈局更新的，也就是說你TabLayout的標籤增加的時候，是否需要更新(但是如果你新增了標籤的話，需要更改相應的ViewPager的介面卡中的條目)！如果你想選擇一個指定的條目，可以通過mTb.getTabAt(i).select();進行相應的選擇！！！

2.2.2 當你的標籤是從伺服器過來的時候

很多APP的標籤內容是通過伺服器過來的，那麼就存在一個動態改變的操作了，往往是通過程式碼去實現條目的，放心。也很簡單，像這樣！！！

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
複製程式碼

就可以動態的新增tab了。

坑

你在佈局檔案或者動態設定的標籤文字的時候，發現文字不見了？what？？？我明明設定了。。。這裡你只需要重寫一下ViewPager介面卡中的getPageTitle(int position)方法，把標題設定進去就好了。其實這個只是針對於標籤固定的內容設定的，但是一般我們的標籤都是不確定個數的，所以一般都是這樣設定的。

3. TabLayout的一些特殊配置

3.1 更改TabLayout顯示的文字

許多挑剔的產品或者美工，會提出各種各樣的關於文字顯示方面的內容，每次我都覺得一個字型就影響使用者體驗了？所以當時我的想法是醬紫的。。。

MaterialDesign系列文章（八）TabLayout的使用

其實是可以改的，但是真的就影響使用者體驗嗎？你可以這樣改！

    <!--TabLayout的文字修改-->
    <style name="TabLayoutStyle">
        <item name="android:textSize">20sp</item>
        <!--這個是控制你輸入的字母大小寫的！-->
        <item name="android:textAllCaps">false</item>
    </style>
複製程式碼

然後通過app:tabTextAppearance="@style/TabLayoutStyle"設定進去就好了。這裡說明一下，其實TabLayout裡面預設由三種文字狀態

  • TextAppearance.Large
  • TextAppearance.Medium
  • TextAppearance.Small 感興趣的同學可以設定看看效果！

3.2 關於TabLayot圖示的問題

預設情況下，你設定的圖示是在上邊的，但是產品跑過來說，放在左邊把！這樣好看一點，好看個大頭鬼啊！天天就改改改的.....我的終極絕招是通過程式碼把裡面的內容全部自定義，其實很簡答的啊！TabLayout給我們提供了一個方法，這個方法是Tab的setCustomView()設定你想要的佈局的，但是一下幾點內容需要注意的！也是我踩了很久的坑。。。

  • getCustomView(); 空指標異常的問題。 起初我還以為我哪裡寫錯了，網上各種找，各種對比，後來我發現了一個問題，如果你在 setupWithViewPager();之前呼叫新增自定義view的方法(也就是setCustomView())的時候，那麼後面不管你怎麼取都會是空，然後我就在像之前的標題沒有出現的問題，我有了一個大膽的假設，其實你的Tab生成的時機應該是關聯ViewPager之後，所以在這之前你設定的標題才不顯示的，但是你傳入標題的時候，設定標題，因為ViewPager認為標題是固定的，所以這種方式的時候，才會有標題，大家注意一下這裡就好了！！！順序問題。。。
  • 設定自定義後的文字顯示問題。 當你設定了自定義View的時候，文字的變色問題就很明顯了，這個時候你只要寫一個selector就可以解決問題了！

這樣無論圖示的問題就不是問題了，你想放在哪裡都可以了。對於美工不能慫。

3.3 關於TabLayout的選中背景

在相應的樣式中設定 **@drawable/tab_background**這個樣式也是一個狀態選擇器，自己寫喜歡的就好了！

3.4 關於TabLayout的監聽問題

有的時候會有監聽點選了那麼TabLayout的操作，關於TabLayout的監聽，這裡就有必要說明一下了！

  • addOnTabSelectedListener(@NonNull OnTabSelectedListener listener)
        TabLayout.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進行操作的。想怎麼改變在相應的回撥紅進行處理就好了！

效果1

效果2
這裡上兩張效果圖，小夥伴們自己想想怎麼實現的，如果你不知道怎麼實現的話，可以去我的gitHub上看看怎麼實現的。

今天的內容就這麼多了，別忘了給自己的母親打個電話！！！see you...

相關文章