Android修行手册 - TabLayout全解析 - 小红点和自定义样式

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

新手（√√√）

大佬（√）

👉实践过程

我们接着昨天的讲哈

😜显示小红点

红点是我们通信类软件常用的功能，而TabLayout默认是带有此功能的。

idTabLayoutSix.getTabAt(0)?.let {
    it.orCreateBadge.apply {
        backgroundColor = Color.RED
        //字符显示个数，最后的加号也算进内 比如这设置的4  则效果显示是 123+
        maxCharacterCount = 4
        number = 123456789
        badgeTextColor = Color.WHITE
    }
}
idTabLayoutSix.getTabAt(1)?.let {
    it.orCreateBadge.apply {
        //不设置一些关于文本的属性 就没有文字
        backgroundColor = Color.RED
    }
}

TabLayout tabLayout = findViewById(R.id.idTabLayoutSix);
TabLayout.Tab tab = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
if (tab != null) {
    tab.getOrCreateBadge().setBackgroundColor(Color.RED);
    //字符显示个数，最后的加号也算进内 比如这设置的4  则效果显示是 123+
    tab.getOrCreateBadge().setMaxCharacterCount(4);
    tab.getOrCreateBadge().setNumber(123456789);
    tab.getOrCreateBadge().setBadgeTextColor(Color.WHITE);
}
if (tab1 != null) {
    //不设置一些关于文本的属性 就没有文字
    tab1.getOrCreateBadge().setBackgroundColor(Color.RED);
}

😜去掉指示器（下划线）

只需要利用app:tabIndicatorHeight将高度设为0即可

😜自定义下划线样式

注意是样式，不包含颜色，颜色仍然使用tabIndicatorColor属性。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/idTabLayoutFive"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/shape_tab_indicator">
</com.google.android.material.tabs.TabLayout>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="6dp"
        android:gravity="center">
        <shape>
            <corners android:radius="6dp" />
        </shape>
    </item>
</layer-list>

😜自定义Tab

终于轮到我们重要的技巧了，就是自定义item的样式，注意是item而不是TabLayout，前面我们讲过自定义TabLayout。其实很简单，使用官方提供的setCustomView方法即可。

TabLayout tabLayout = findViewById(R.id.idTabLayoutSix);
TabLayout.Tab tab = tabLayout.newTab();
//方法一 直接设置布局
tab.setCustomView(R.layout.activity_bar);
//方法二 如果想控制里面的控件 直接利用LayoutInflater
View view = LayoutInflater.from(this).inflate(R.layout.activity_bar, null);
TextView textView = view.findViewById(R.id.text);
textView.setText("其他控件操作类似");
tab.setCustomView(view);
tabLayout.addTab(tab);

val  tab=idTabLayoutFour.newTab()
tab.setCustomView(R.layout.activity_bar);
val view = LayoutInflater.from(this).inflate(R.layout.activity_bar, null)
val textView: TextView = view.findViewById<TextView>(R.id.text)
textView.text = "其他控件操作类似"
tab.setCustomView(view)
idTabLayoutFour.addTab(tab)

👉其他

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。