如何让 ViewPager 与 kotlin 项目中的底部导航选项卡配合使用

Question

为了让

ViewPager

在 Android Kotlin 中作为底部导航选项卡的嵌套导航部分工作，我遇到了一些问题

这是我的代码：

MainActivity.kt

class MainActivity : AppCompatActivity() {

    lateinit var viewPager : ViewPager2
    lateinit var viewPageAdpater : ViewPagerAdapter

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

        viewPager = findViewById(R.id.viewPager)
        viewPageAdpater = ViewPagerAdapter(this)
        viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
        viewPager.adapter = viewPageAdpater




    }


}

activite_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layoutDirection="rtl"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"
        android:background="?android:attr/windowBackground"/>


</LinearLayout>

我的

bottom_tab_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_viewpager"
        android:title="Home"
        android:icon="@drawable/ic_launcher_foreground" />
    <item
        android:id="@+id/nav_items_discover"
        android:title="item List"
        android:icon="@drawable/ic_launcher_foreground" />
    <item
        android:id="@+id/nav_user"
        android:title="User"
        android:icon="@drawable/ic_launcher_foreground" />
</menu>

我的

ViewpagerAdapter.kt

class ViewPagerAdapter(mainActivity: MainActivity) : FragmentStateAdapter(mainActivity) {

    override fun getItemCount(): Int {
        return 5
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Home_Main()
            1 -> Home_Itemslist()
            2 -> Home_Contactus()

            else -> Home_Main()
        }
    }
}

我想要实现的是：

1. 底部选项卡导航 - 主页（在 Viewpager 中包含 3 个子片段）
2. 底部选项卡导航-item_discover（独立Fragment）
3. 底部标签导航-用户登录（另一个激活）

Answer 1

我有同样的问题，然后我尝试下面的应用程序代码，它对我有用。我在这里写下代码，请检查它是否对您有帮助。

谢谢你

MainActivity.kt

class MainActivity : AppCompatActivity() {

lateinit var viewPager: ViewPager2
lateinit var viewPageAdapter: ViewPagerAdapter
lateinit var bottomNavigationView: BottomNavigationView

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

    viewPager = findViewById(R.id.viewPager)
    bottomNavigationView = findViewById(R.id.bottomNavigationView)

    viewPageAdapter = ViewPagerAdapter(this)
    viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
    viewPager.adapter = viewPageAdapter

    // Handle BottomNavigationView item selection
    bottomNavigationView.setOnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.nav_viewpager -> {
                viewPager.currentItem = 0 // This will handle the Home fragment with nested ViewPager
                true
            }
            R.id.nav_items_discover -> {
                viewPager.currentItem = 1 // This will handle the item discover fragment
                true
            }
            R.id.nav_user -> {
                // Navigate to User Login Activity
                val intent = Intent(this, UserLoginActivity::class.java)
                startActivity(intent)
                true
            }
            else -> false
        }
    }

    // Sync ViewPager with BottomNavigationView
    viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            bottomNavigationView.menu.getItem(position).isChecked = true
        }
    })
}

更新ViewPagerAdapter

class ViewPagerAdapter(mainActivity: MainActivity) : FragmentStateAdapter(mainActivity) {

    override fun getItemCount(): Int {
        return 3 // Number of main tabs
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> HomeFragment() // Home with ViewPager of nested fragments
            1 -> ItemDiscoverFragment() // Independent fragment for item discovery
            else -> HomeFragment()
        }
    }
}

HomeFragment.kt

class HomeFragment : Fragment() {

    lateinit var nestedViewPager: ViewPager2
    lateinit var nestedAdapter: NestedViewPagerAdapter

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_home, container, false)
        nestedViewPager = view.findViewById(R.id.nestedViewPager)

        nestedAdapter = NestedViewPagerAdapter(this)
        nestedViewPager.adapter = nestedAdapter

        return view
    }
}

嵌套ViewPagerAdapter

class NestedViewPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    override fun getItemCount(): Int {
        return 3 // Number of sub-fragments in Home
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Home_Main()
            1 -> Home_Itemslist()
            2 -> Home_Contactus()
            else -> Home_Main()
        }
    }
}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.viewpager2.widget.ViewPager2 xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nestedViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />