總結一下tabLayout使用中的一些注意事項

TabLayout作為常用的控件， 在官方更新維護后也可以方便的增加角標了。這么好用的控件使用起來卻有很多需要注意點 。總結一下方便大家使用。

• 自定義下劃線

劃重點 首先需要更新你的material庫 1.4.0之后就可以自定義下劃線啦

首先直接寫一個drawble文件 注意要用layer-list包裹

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_horizontal"
        >
        <shape>
            <solid android:color="#EE9D18"/>
            <size
                android:width="10dp"
                android:height="2dp" />
        </shape>
    </item>
</layer-list>

shape里的屬性都支持哦 還可以漸變 圓角都沒有問題

然后有一個關鍵點來了 app:tabIndicatorColor必須設置為@null 官方給的demo里沒設這個沒有效果

app:tabIndicator="@drawable/shape_indicator"
app:tabIndicatorColor="@null"

這樣自定義寬高的下劃線就搞定了?。?！

• 更改text字體大小

TabLayout中有一個屬性是可以更改字體大小的 但是使用起來并沒有那么方便
首先需要自定義一個style

<style name="SmallText" parent="android:TextAppearance">
        <item name="android:textSize">12sp</item>
    </style>

然后在TabLayout中引用就可以啦

app:tabTextAppearance="@style/SmallText"

• 自定義Tab

舉個例子

tab.png

注 自定義的tab會使tabSelectedTextColor 和 tabTextColor會失效 需要自己手動設置

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.textview.MaterialTextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:textColor="@color/tv_rb_dark"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="15dp"
        android:layout_marginLeft="4dp"
        android:layout_height="12.5dp"
        android:src="@mipmap/ic_message"
        android:visibility="invisible"
        app:layout_constraintLeft_toRightOf="@android:id/text1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

然后添加tab

需要在onResume中添加 這樣會默認觸發(fā)onTabSelected以及onTabUnselected

如果在onCreate方法中則不會觸發(fā) 需要做額外的處理比較麻煩

tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab).setText("我是tab"));

添加監(jiān)聽

 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView=tab.getCustomView().findViewById(android.R.id.text1);
                textView.setTextColor(mActivity.getResources().getColor(R.color.tab_select));
                ImageView img=tab.getCustomView().findViewById(R.id.tab_icon);
                img.setVisibility(View.VISIBLE);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView=tab.getCustomView().findViewById(android.R.id.text1);
                textView.setTextColor(mActivity.getResources().getColor(R.color.tv_rb_dark));
                ImageView img=tab.getCustomView().findViewById(R.id.tab_icon);
                img.setVisibility(View.INVISIBLE);
            }

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

            }
        });

搞定

• 和viewpager2聯(lián)動以及增加角標

和viewpager2聯(lián)動也很簡單 使用TabLayoutMediator即可 viewpager2設置adpter后才可以調(diào)用

使用TabLayoutMediator不需要再手動添加tab了

new TabLayoutMediator(tabLayout, viewPager2, true,new TabLayoutMediator.TabConfigurationStrategy() {

            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText("tab");
            }
        }).attach();

添加角標也很簡單 調(diào)用Tab的getOrCreateBadge()方法 即可獲取到BadgeDrawable

舉個列子

            BadgeDrawable badgeDrawable= tabLayout.getTabAt(i).getOrCreateBadge();
            int num=list.get(i);
            badgeDrawable.setNumber(num);
            if(num<=0){
                badgeDrawable.setVisible(false);
            }else{
                badgeDrawable.setVisible(true);
            }

也可以放在TabLayoutMediator中設置。

• 其他的一些常用方法和注意事項

1.獲取當前選中的tab位置tabLayout.getSelectedTabPosition();
2.對于動態(tài)的tab 可以選擇在tab添加完成后再增加tab切換監(jiān)聽 然后調(diào)用
tabLayout.getTabAt(position).select();即可選中某個tab。并且不需要額外處理邏輯