XML 使用 setupWithViewPager 时 TabItem 消失了

Question

我正在尝试添加 TabItem 的表单 XML，稍后想在 java 代码中将它们与 ViewPager 连接起来。但是，一旦我调用 tab_layout.setupWithViewPager(pager)，标签项就会变成空白。

片段代码：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val listOfFragment = listOf(Fragment1.newInstance(),Fragment2.newInstance(),Fragment3.newInstance())
    homePagerAdapter = HomePagerAdapter(childFragmentManager, listOfFragment)
    view_pager.adapter = homePagerAdapter
    tab_layout.setupWithViewPager(view_pager)
}

FragmentPagerAdapter:

class HomePagerAdapter(fm: FragmentManager, private val listOfFragment: List<FragmentData>) :
    FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    override fun getItem(position: Int): Fragment {
        return listOfFragment[position].fragment
    }

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

XML:

<...>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title_appbar">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/profile_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_profile"
            android:text="@string/profile" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/photos_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_photos"
            android:text="@string/photos" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/live_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_live"
            android:text="@string/live" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout">
    </androidx.viewpager.widget.ViewPager>    
</...>

结果：

预计：

请注意：我很清楚实现此目的的其他几种方法，例如动态添加 TabItem 然后连接 ViewPager 并添加 tab_layout.selectTab(tab_layout.getTabAt(position)) ViewPager 的onPageSelected 回调。但我希望在不对 java 代码进行任何修改的情况下将 XML TabItem 与 ViewPager 连接起来。提前致谢。

Answer 1

方法 tabLayout.setupWithViewPager() removes all tabs 然后从适配器添加选项卡。
使用您的适配器填充 TabLayout.

XML 使用 setupWithViewPager 时 TabItem 消失了

XML TabItem are gone when using setupWithViewPager

android

android-viewpager

android-tablayout