TabLayout 图标不显示

问题描述

我是 Kotlin 新手，将旧的 Android Java 应用程序转换为 Kotlin。我的应用程序有 2 个标签。在我的旧应用程序中，我能够为每个选项卡标题显示 1 个图标而不是文本。但是，我的旧代码中的某些 API 已被弃用，即

context.getResources().getDrawable()

我已经更新了这个，如下所示，但没有任何效果。

我试过了：

• 使用 addTab() 和使用 setIcon() 手动添加标签
• 我已经添加了日志语句来确保我的图像加载。

仍然没有任何效果。我究竟做错了什么？我的代码如下。

主要活动：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var viewPager = findViewById<ViewPager>(R.id.viewpager)
        var myTabLayout = findViewById<TabLayout>(R.id.tab_layout)

        var adapter = MyFragmentPagerAdapter(supportFragmentManager,this)
        viewPager.adapter = adapter

        //myTabLayout.addTab(myTabLayout.newTab().setIcon(R.drawable.sunrise))
        //myTabLayout.addTab(myTabLayout.newTab().setIcon(R.drawable.sunrise))
        myTabLayout.setupWithViewPager(viewPager)
    }
}

MyFragmentPagerAdapter：

class MyFragmentPagerAdapter(fm: FragmentManager,private val mContext: Context) :
    FragmentPagerAdapter(fm,BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    private lateinit var context: Context

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> TabFragment1()
            1 -> TabFragment2()
            else -> TabFragment1()
        }
    }

    override fun getCount(): Int {
        return 2
    }

    /*override fun getPageTitle(position: Int): CharSequence? {
        return when (position) {
            0 -> "First"
            1 -> "Second"
            else -> "First"
        }
    }*/

    override fun getPageTitle(position: Int): CharSequence? {
        val image: Drawable? = if (position == 0)
            //context.getResources().getDrawable(R.drawable.sunrise)
            ContextCompat.getDrawable(mContext,R.drawable.sunrise)
        else
            //context.getResources().getDrawable(R.drawable.sunset)
            ContextCompat.getDrawable(mContext,R.drawable.sunset)

        val sb = SpannableString(" ")
        Log.d("DEBUG","Here")
        if (image != null) {
            image.setBounds(0,image.intrinsicWidth,image.intrinsicHeight)
            Log.d("DEBUG","image isn't null")

            val imageSpan = ImageSpan(image,ImageSpan.ALIGN_BottOM)
            sb.setSpan(imageSpan,1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        }
        return sb
    }
}

我的主要布局文件：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.constraintlayout.widget.ConstraintLayout>

解决方法

首先，将您的 ViewPager 更改为 ViewPager2：

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

然后，您可以使用 TabLayoutMediator 附加选项卡布局和视图分页器。 将 onCreate 方法中的代码更改为：

    override fun onCreate(savedInstanceState: Bundle?) 
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var viewPager = findViewById<ViewPager2>(R.id.viewpager)
        var myTabLayout = findViewById<TabLayout>(R.id.tab_layout)

        var adapter = MyFragmentPagerAdapter(supportFragmentManager)
        viewPager.adapter = adapter

        TabLayoutMediator(
            myTabLayout,viewPager
        ) { tab,position ->
            when(position) {
                0 -> {
                    tab.text = "First"
                    tab.icon = ContextCompat.getDrawable(this,R.drawable.sunrise)
                }
                else -> {
                    ...
                }
            }
        }.attach()
    }

另外，将您的 FragmentPagerAdapter 更改为 FragmentStateAdapter：

    class MyFragmentPagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {

        override fun getItemCount(): Int = 2

        override fun createFragment(position: Int) : Fragment = when (position) {
            0 -> TabFragment1()
            else -> TabFragment2()
        }
    }