如何在MeowBottomNavigation的每个图标下方添加文字？

MeowBottomNavigation本身默认不支持图标下方显示文字，但可以通过以下两种方式实现：

方法一：自定义MenuItem布局（推荐） #

这种方式最灵活，能完全自定义每个导航项的样式：

1. 创建自定义导航项布局（比如res/layout/item_bottom_nav.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/nav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_home"/>

    <TextView
        android:id="@+id/nav_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首页"
        android:textSize="12sp"
        android:textColor="@color/white"
        android:layout_marginTop="4dp"/>
</LinearLayout>

2. 在代码中加载自定义布局并设置菜单：

Kotlin示例 #

val bottomNav = findViewById<MeowBottomNavigation>(R.id.nav_view)

// 添加导航项时指定自定义布局
bottomNav.add(
    MeowBottomNavigation.Model(
        1, // 唯一ID
        R.layout.item_bottom_nav // 自定义布局ID
    )
)
bottomNav.add(
    MeowBottomNavigation.Model(
        2,
        R.layout.item_bottom_nav
    )
)

// 监听选中状态，切换图标和文字样式
bottomNav.setOnShowListener { model ->
    val view = model.view ?: return@setOnShowListener
    val icon = view.findViewById<ImageView>(R.id.nav_icon)
    val title = view.findViewById<TextView>(R.id.nav_title)
    
    when(model.id) {
        1 -> {
            icon.setImageResource(R.drawable.ic_home_selected)
            title.text = "首页"
            title.setTextColor(Color.WHITE)
        }
        2 -> {
            icon.setImageResource(R.drawable.ic_profile_selected)
            title.text = "我的"
            title.setTextColor(Color.WHITE)
        }
    }
}

Java示例 #

MeowBottomNavigation bottomNav = findViewById(R.id.nav_view);

// 添加导航项
bottomNav.add(new MeowBottomNavigation.Model(1, R.layout.item_bottom_nav));
bottomNav.add(new MeowBottomNavigation.Model(2, R.layout.item_bottom_nav));

// 选中监听
bottomNav.setOnShowListener(model -> {
    View view = model.getView();
    if (view == null) return null;
    ImageView icon = view.findViewById(R.id.nav_icon);
    TextView title = view.findViewById(R.id.nav_title);
    
    switch (model.getId()) {
        case 1:
            icon.setImageResource(R.drawable.ic_home_selected);
            title.setText("首页");
            title.setTextColor(Color.WHITE);
            break;
        case 2:
            icon.setImageResource(R.drawable.ic_profile_selected);
            title.setText("我的");
            title.setTextColor(Color.WHITE);
            break;
    }
    return null;
});

方法二：动态添加TextView到导航容器 #

如果不想自定义布局，可以通过代码给每个导航项的容器添加TextView：

Kotlin示例 #

val bottomNav = findViewById<MeowBottomNavigation>(R.id.nav_view)
val titles = listOf("首页", "我的", "发现")

// 先添加基础导航项
titles.forEachIndexed { index, title ->
    bottomNav.add(MeowBottomNavigation.Model(index+1, R.drawable.ic_home))
}

// 延迟添加文字（确保视图已加载）
bottomNav.post {
    val container = bottomNav.findViewById<ViewGroup>(com.etebarian.meowbottomnavigation.R.id.mbn_container)
    for (i in 0 until container.childCount) {
        val itemView = container.getChildAt(i)
        val iconView = itemView.findViewById<ImageView>(com.etebarian.meowbottomnavigation.R.id.mbn_item_icon)
        
        val textView = TextView(this)
        textView.text = titles[i]
        textView.textSize = 12f
        textView.setTextColor(Color.WHITE)
        textView.gravity = Gravity.CENTER
        
        // 将TextView添加到图标下方
        (itemView as ViewGroup).addView(textView)
        // 调整布局参数
        val params = textView.layoutParams as ViewGroup.MarginLayoutParams
        params.topMargin = 4.dpToPx(this)
        textView.layoutParams = params
    }
    
    // 监听选中状态切换文字颜色
    bottomNav.setOnShowListener { model ->
        val container = bottomNav.findViewById<ViewGroup>(com.etebarian.meowbottomnavigation.R.id.mbn_container)
        val itemView = container.getChildAt(model.id-1)
        val textView = itemView.getChildAt(1) as TextView
        textView.setTextColor(if (model.id == bottomNav.currentId) Color.WHITE else Color.GRAY)
        null
    }
}

// 扩展函数：dp转px
fun Int.dpToPx(context: Context): Int {
    return (this * context.resources.displayMetrics.density).toInt()
}

注意：方法二依赖库的内部ID（mbn_container、mbn_item_icon），如果库版本更新可能会失效，稳定性不如方法一。

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