總結(jié)一下tabLayout使用中的一些注意事項(xiàng)

TabLayout作為常用的控件问裕， 在官方更新維護(hù)后也可以方便的增加角標(biāo)了。這么好用的控件使用起來(lái)卻有很多需要注意點(diǎn) ∷傅牵總結(jié)一下方便大家使用。

• 自定義下劃線

劃重點(diǎn) 首先需要更新你的material庫(kù) 1.4.0之后就可以自定義下劃線啦

首先直接寫一個(gè)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里的屬性都支持哦 還可以漸變 圓角都沒(méi)有問(wèn)題

然后有一個(gè)關(guān)鍵點(diǎn)來(lái)了 app:tabIndicatorColor必須設(shè)置為@null 官方給的demo里沒(méi)設(shè)這個(gè)沒(méi)有效果

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

這樣自定義寬高的下劃線就搞定了Ｎ狄ā６住！

• 更改text字體大小

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

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

然后在TabLayout中引用就可以啦

app:tabTextAppearance="@style/SmallText"

• 自定義Tab

舉個(gè)例子

tab.png

注 自定義的tab會(huì)使tabSelectedTextColor 和 tabTextColor會(huì)失效 需要自己手動(dòng)設(shè)置

<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中添加 這樣會(huì)默認(rèn)觸發(fā)onTabSelected以及onTabUnselected

如果在onCreate方法中則不會(huì)觸發(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)動(dòng)以及增加角標(biāo)

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

使用TabLayoutMediator不需要再手動(dòng)添加tab了

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

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

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

舉個(gè)列子

            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中設(shè)置礼患。

• 其他的一些常用方法和注意事項(xiàng)

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