Tab Fragment中BadgeView的实现问题求助

嘿，完全懂你不想依赖第三方库、自己实现Tab上Badge的需求！其实不用复杂，咱们用自定义Tab布局的方式就能稳稳搞定，既灵活又不会受版本限制，下面一步步来：

第一步：准备自定义Tab布局和Badge样式 #

先做一个包含标题和Badge的Tab布局文件（比如layout/custom_tab.xml），把Badge直接嵌在右上角位置：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- Tab标题 -->
    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/tab_text_color"  <!-- 你可以自己定义Tab文字颜色选择器 -->
        android:textSize="14sp" />

    <!-- Badge视图 -->
    <TextView
        android:id="@+id/tab_badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:visibility="gone"
        android:layout_gravity="top|end"
        android:layout_marginTop="-4dp"
        android:layout_marginEnd="-4dp" />

</FrameLayout>

然后做Badge的圆形背景（drawable/badge_background.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/holo_red_dark" /> <!-- 你可以换成自己想要的红色 -->
    <padding android:all="2dp" />
</shape>

第二步：给TabLayout设置自定义Tab #

在你的Activity或Fragment里，初始化TabLayout的时候，给每个Tab绑定这个自定义布局：

// 假设你的TabLayout实例是tabLayout
// 添加两个Tab
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab))
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.custom_tab))

// 设置Tab的标题
tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tab_title)?.text = "首页"
tabLayout.getTabAt(1)?.customView?.findViewById<TextView>(R.id.tab_title)?.text = "消息"

第三步：控制Badge的显示和更新 #

现在你可以轻松控制目标Tab的Badge了，比如给第二个Tab显示未读数量：

// 获取第二个Tab的Badge视图（索引从0开始）
val messageBadge = tabLayout.getTabAt(1)?.customView?.findViewById<TextView>(R.id.tab_badge)
messageBadge?.apply {
    text = "5"  // 设置未读数量
    visibility = View.VISIBLE
}

如果需要动态更新Badge（比如有新消息时），可以写个工具方法：

fun updateTabBadge(tabIndex: Int, unreadCount: Int) {
    val badgeView = tabLayout.getTabAt(tabIndex)?.customView?.findViewById<TextView>(R.id.tab_badge) ?: return
    if (unreadCount > 0) {
        // 超过99显示99+
        badgeView.text = if (unreadCount > 99) "99+" else unreadCount.toString()
        badgeView.visibility = View.VISIBLE
    } else {
        // 数量为0就隐藏
        badgeView.visibility = View.GONE
    }
}

以后直接调用updateTabBadge(1, 3)就能更新第二个Tab的Badge啦！

为什么用自定义Tab布局？ #

比起直接去扒TabLayout的内部View（不同版本的Material库内部布局可能不一样，容易失效），自定义Tab的方式更稳定，你还能自由调整标题、Badge的样式和位置，完全符合你不想依赖第三方库的需求～

内容的提问来源于stack exchange，提问作者Sahan Monaara