总结一下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中添加 这样会默认触发onTabSelected以及onTabUnselected

如果在onCreate方法中则不会触发 需要做额外的处理比较麻烦

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

添加监听

 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联动以及增加角标

和viewpager2联动也很简单 使用TabLayoutMediator即可 viewpager2设置adpter后才可以调用

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

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

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

添加角标也很简单 调用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.对于动态的tab 可以选择在tab添加完成后再增加tab切换监听 然后调用
tabLayout.getTabAt(position).select();即可选中某个tab。并且不需要额外处理逻辑