TabLayout 图标不显示

Question

我是一名 Kotlin 新手，正在将旧的 Android Java 应用程序转换为 Kotlin。我的应用程序有 2 个选项卡。在我的旧应用程序中，我能够为每个选项卡显示 1 个图标而不是文本 header。但是，我旧代码中的一些 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, 0, image.intrinsicWidth, image.intrinsicHeight)
            Log.d("DEBUG", "image isn't null")

            val imageSpan = ImageSpan(image, ImageSpan.ALIGN_BOTTOM)
            sb.setSpan(imageSpan, 0, 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>

Answer 1

首先，将您的 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()
        }
    }

TabLayout 图标不显示

TabLayout icons not displaying

android

kotlin

android-viewpager

android-tablayout