垂直TabLayout添加角标布局问题求助

我太懂你折腾这个布局的痛苦了——之前调试垂直Tab的角标也卡了快一小时！默认TabLayout的内置视图确实没法直接改角标锚定，咱们换个思路，用自定义Tab布局就能完美解决，步骤给你理清楚：

1. 先做自定义Tab的布局文件 #

新建一个布局文件（比如layout_tab_vertical_badge.xml），用FrameLayout来嵌套图标和角标，方便锚定位置：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- 主图标 -->
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center"/>

    <!-- 角标TextView，锚定在图标右上角 -->
    <TextView
        android:id="@+id/tab_badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:background="@drawable/badge_circle_bg"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:paddingHorizontal="4dp"
        android:paddingVertical="2dp"
        android:text="5"/>
</FrameLayout>

这里的badge_circle_bg是你自己做的角标背景（比如圆形shape），可以根据需求调整样式。

2. 给TabLayout绑定自定义视图 #

在代码里初始化TabLayout时，替换掉默认的Tab视图，换成咱们自定义的：

val tabLayout = findViewById<TabLayout>(R.id.vertical_tab_layout)
// 先设置TabLayout为垂直方向
tabLayout.orientation = TabLayout.VERTICAL
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
tabLayout.isTabIndicatorFullWidth = false

// 遍历每个Tab，设置自定义布局
for (i in 0 until tabLayout.tabCount) {
    val tab = tabLayout.getTabAt(i) ?: continue
    tab.setCustomView(R.layout.layout_tab_vertical_badge)
    
    // 给图标和角标赋值（换成你自己的资源/数据）
    tab.customView?.findViewById<ImageView>(R.id.tab_icon)?.setImageResource(iconResList[i])
    tab.customView?.findViewById<TextView>(R.id.tab_badge)?.text = badgeTextList[i]
    
    // 可选：动态控制角标显示/隐藏
    tab.customView?.findViewById<TextView>(R.id.tab_badge)?.visibility = 
        if (badgeCountList[i] > 0) View.VISIBLE else View.GONE
}

如果用Java的话，逻辑完全一致，只是语法稍微调整下就行。

3. 调整TabLayout的布局属性 #

确保你的TabLayout在XML里是垂直方向的基础配置：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/vertical_tab_layout"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/your_primary_color"
    app:tabIndicatorWidth="2dp"/>

小补充：动态更新角标 #

如果需要后续动态改角标内容，建议把每个Tab的customView存起来，比如用一个列表保存，之后直接找到对应的TextView修改就行，不用再重新遍历TabLayout。

这样调整后，角标就能稳稳锚在图标右上角，完全符合你的需求啦～

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