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

往期文章分享

• 点击跳转=>《导航贴》- Unity手册，系统实战学习
• 点击跳转=>《导航贴》- Android手册，重温移动开发

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。

本文约4千字，新手阅读需要7分钟，复习需要3分钟 【收藏随时查阅不再迷路】

👉实践过程

😜显示小红点

红点是我们通信类软件常用的功能，而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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

😜去掉指示器（下划线）

只需要利用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>
1
2
3
4
5
6

<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>
1
2
3
4
5
6
7
8
9
10
11

😜自定义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);
1
2
3
4
5
6
7
8
9
10

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)
1
2
3
4
5
6
7

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。

温馨提示：点击下方卡片获取更多意想不到的资源。