TabLayout的使用和自定義紅點消息提示

Tab+ViewPager可以說是Android開發中非常常見的佈局了，以前實現tab佈局一般使用LinearLayout或者HorizontalScrollView，還需要自己監聽ViewPager的滑動。如果想實現比較順滑的滑動效果，我們還需要自定義動畫。在Android6.0之後，谷歌在design包中提供了一個widget叫TabLayout，TabLayout繼承自HorizontalScrollView，可以方便地實現與ViewPager的聯動，還自帶順滑的滑動效果：

1. 首先要引入android design包，在gradle中加入：

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

2. 在xml佈局中直接跟ViewPager一起使用

<android.support.design.widget.TabLayout
        android:id="@+id/about_my_tab"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/white_color"
        app:tabIndicatorColor="@color/main_color"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/main_color"
        app:tabTextAppearance="@style/MiddleTextStyle"
        app:tabTextColor="@color/second_text_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/about_my_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

app:tabIndicatorColor：指示器的顏色，就是底部那條線的顏色，這裏選擇的是綠色

app:tabMode：tab滑動模式，有fixed和scrollable兩種，fixed是不可滑動，scrollable是可滑動

app:tabIndicatorHeight: 底部指示器的高度，這裏使用是默認高度
app:tabSelectedTextColor： tab選中之後文字的顏色

app:tabTextAppearance：tab標題文字的大小

app:tabTextColor：tab標題文字非選中狀態時的顏色

3.下一步就是在Activity中設置標題，並設置與ViewPager聯動：

tabLayout= view.findViewById(R.id.about_my_tab);
tabLayout.addTab(tabLayout.newTab().setText("我的私信"));
tabLayout.addTab(tabLayout.newTab().setText("我的回覆"));

設置與ViewPager的聯動也異常簡單：

tabLayout.setupWithViewPager(viewPager);

至此，一個TabLayout+ViewPager的佈局就完成了，如果我們想在tab上加東西怎麼辦呢？在tab上加消息紅點提示，如下圖所示：

 

谷歌是沒有幫我們準備對應的API可以直接設置這種紅色badge，但是TabLayout可以設置自定義view：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <CheckedTextView
        android:id="@+id/tv_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@style/MiddleTextStyle"
        android:text="我的回覆"
        android:textColor="@color/selector_tab_text"/>

    <TextView
        android:id="@+id/tv_message_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_alignBottom="@id/tv_tab_title"
        android:layout_toEndOf="@id/tv_tab_title"
        android:background="@drawable/shape_red_point"
        android:gravity="center"
        android:textColor="@color/white_color"
        android:textSize="@dimen/text_size_10"
        android:text="9"
        android:visibility="visible"/>

</RelativeLayout>

寫好tab的佈局之後，可以使用tabLayout.setCustomView(View v)自定義tab的樣式，自定義tab的view之後，需要添加listener，自行修改選中和非選中狀態，而不是直接setupWithViewPager了

       for (int i = 0; i < 2; i++) {
            TabLayout.Tab tab = tabLayout.newTab();
            tab.setCustomView(getTabView(i));
            tabLayout.addTab(tab);
        }
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //自行修改選中狀態
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
               //自行修改非選中狀態
            }

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

            }
        });