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

携手创造，共同成长！这是我参与「日新方案 8 月更文应战」的第19天，点击检查活动详情

关于作者

众所周知，人生是一个绵长的流程，不断克服困难，不断反思行进的进程。在这个进程中会产生许多对于人生的质疑和考虑，于是我决议将自己的考虑，经历和故事悉数共享出来，以此寻觅共识！！！

专注于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)

其他

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

转载阐明-必须注明来历：芝麻粒儿 的个人主页 – 专栏 – ()

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