如何将Android应用中ViewPager Tab的文本标题替换为图标？

针对你用PagerSlidingTabStrip实现的文本Tab，咱们一步步来改成图标样式：

1. 准备图标资源 #

先把需要的Tab图标（比如录制图标、已保存录音图标）放到res/drawable目录下。如果想实现选中/未选中的状态切换，可以创建Selector Drawable，比如ic_record_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_record_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_record_normal"/>
</selector>

同理给第二个Tab创建ic_files_selector.xml，这样选中的Tab图标会自动变色，提升用户体验。

2. 创建自定义Tab布局 #

在res/layout下新建tab_icon.xml，用ImageView作为Tab的容器：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:paddingHorizontal="16dp"
    android:paddingVertical="8dp"/>

3. 修改Adapter代码 #

更新你的MyAdapter，添加图标资源数组，并调整getPageTitle方法（不需要文本标题了）：

inner class MyAdapter(fm: FragmentManager?) : FragmentPagerAdapter(fm!!) {
    // 存储Tab对应的图标资源ID
    private val icons = intArrayOf(
        R.drawable.ic_record_selector, 
        R.drawable.ic_files_selector
    )

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> RecordFragment.newInstance(position)
            1 -> FileViewerFragment.newInstance(position)
            else -> throw IllegalArgumentException("Invalid tab position: $position")
        }
    }

    override fun getCount(): Int {
        return icons.size
    }

    // 返回空字符串，避免显示文本标题
    override fun getPageTitle(position: Int): CharSequence? {
        return ""
    }

    // 新增方法，供外部获取对应位置的图标
    fun getTabIcon(position: Int): Int {
        return icons[position]
    }
}

4. 在Activity中绑定自定义Tab视图 #

修改onCreate方法，让PagerSlidingTabStrip使用我们的自定义布局，并为每个Tab设置图标：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_audio_recorder)
    
    pager = findViewById<View>(R.id.pager) as ViewPager
    val adapter = MyAdapter(supportFragmentManager)
    pager!!.adapter = adapter
    
    tabs = findViewById<View>(R.id.tabs) as PagerSlidingTabStrip
    tabs!!.setViewPager(pager)
    
    // 设置自定义Tab布局
    tabs!!.setCustomTabView(R.layout.tab_icon, 0)
    
    // 遍历每个Tab，绑定对应的图标
    for (i in 0 until adapter.count) {
        val tabView = tabs!!.getTabAt(i)
        tabView?.findViewById<ImageView>(R.id.tab_icon)?.setImageResource(adapter.getTabIcon(i))
    }

    val toolbar = findViewById<View>(R.id.toolbar) as Toolbar
    toolbar.popupTheme = R.style.ThemeOverlay_AppCompat_Light
    setSupportActionBar(toolbar)
}

小提示 #

• 如果不需要状态切换，直接用普通图标资源替换Selector即可。
• 可以调整tab_icon.xml里的padding、大小属性，让Tab显示更贴合你的App风格。
• 确保你的PagerSlidingTabStrip版本支持setCustomTabView方法，版本过旧的话建议更新依赖。

这样修改后，你的ViewPager Tab就会从文本变成图标啦！

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