首页 > 解决方案 > Android:连接标签滑块 ViewPager 和标签工具栏(TabLayout)

问题描述

我成功创建了一个选项卡工具栏(这是一个 TabLayout),它在单击图标时更改片段(工具栏中有 3 个不同的选项卡),但是当我将 viewPager 连接到我为滑动创建的适配器时,我只能滑动在选项卡之间,但更改片段的图标停止运行。

我会尽量不让它变得复杂或混乱。这是我的 MainActivity.kt 中的代码:

class MeetActivity : AppCompatActivity() {

    private var profileFragment: ProfileFragment? = null
    private var swipeFragment: SwipeFragment? = null
    private var matchesFragment: MatchesFragment? = null

    private var profileTab: TabLayout.Tab? = null
    private var swipeTab: TabLayout.Tab? = null
    private var matchesTab: TabLayout.Tab? = null

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

        profileTab = navigationTabs.newTab()
        swipeTab = navigationTabs.newTab()
        matchesTab = navigationTabs.newTab()

        profileTab?.icon = ContextCompat.getDrawable(this, R.drawable.tab_profile)
        swipeTab?.icon = ContextCompat.getDrawable(this, R.drawable.tab_swipe)
        matchesTab?.icon = ContextCompat.getDrawable(this, R.drawable.tab_matches)

        navigationTabs.addTab(profileTab!!)
        navigationTabs.addTab(swipeTab!!)
        navigationTabs.addTab(matchesTab!!)

        val adapter = PagerAdapter(supportFragmentManager, navigationTabs.tabCount)
        fragmentContainer.adapter = adapter

        navigationTabs.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab?) {
                onTabSelected(tab)
            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
//                Log.d("TAG", tab.toString())
                when (tab) {
                    profileTab -> {
                        if (profileFragment == null) {
                            profileFragment = ProfileFragment()
                        }
                        replaceFragment(profileFragment!!)
                    }
                    swipeTab -> {
                        if (swipeFragment == null) {
                            swipeFragment = SwipeFragment()
                        }
                        replaceFragment(swipeFragment!!)
                    }
                    matchesTab -> {
                        if (matchesFragment == null) {
                            matchesFragment = MatchesFragment()
                        }
                        replaceFragment(matchesFragment!!)
                    }
                }
            }
        })

        profileTab?.select()
    }

    fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragmentContainer, fragment).commit()
    }

按下图标时正在调用 replaceFragment 函数,但由于某种原因没有替换片段。当我删除将 fragmentContainer 连接到适配器的代码中的行时,图标恢复正常运行。

我的适配器很简单:

class PagerAdapter (fm: FragmentManager, private val mNoOfTabs: Int) : FragmentStatePagerAdapter(fm, mNoOfTabs) {

    override fun getItem(position: Int): Fragment {
        when (position) {
            0 -> {
                return ProfileFragment()
            }
            1 -> {
                return SwipeFragment()
            }
            2 -> {
                return MatchesFragment()
            }
        }
        return null!!
    }

    override fun getCount() = mNoOfTabs
}

最后,activity_main.xml:

<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=".activities.MeetActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/navigationTabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/navigation_height"
        android:background="@drawable/navigation_shadow"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicator="@null"
        app:tabMinWidth="@dimen/navigation_height"
        app:tabRippleColor="@null" />

<!--    // the fragment will be displayed here:-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/navigationTabs"/>

提前致谢

标签: androidandroid-studiokotlinandroid-tablayout

解决方案


推荐阅读