Android修行手册 - TabLayout全解析 - 小红点和自定义样式
【摘要】 👉关于作者众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)欢迎关注公众号【空名先生】获取更多资源和交流! 👉前提这是小空坚持写的Android新手向系列,欢迎...
👉关于作者
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
专注于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)
📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)