如何在使用自定义MeowBottomNavigation的现有应用中实现ViewPager

完全可以在已完成开发、使用自定义底部导航的项目中接入ViewPager，不需要重构现有底部导航逻辑，仅需做双向事件绑定即可正常运行，以下是可直接复用的实操步骤： #

1. 布局文件调整 #

在原有布局中，将原有的Fragment容器替换为ViewPager，或直接新增ViewPager控件放置在MeowBottomNavigation的上方即可，参考布局示例：

<!-- 根布局用LinearLayout或ConstraintLayout都可以，这里以LinearLayout为例 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.etebarian.meowbottomnavigation.MeowBottomNavigation
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mbn_backgroundBottomColor="@color/white"
        app:mbn_defaultIconColor="@color/gray"
        app:mbn_selectedIconColor="@color/design_default_color_primary" />

</LinearLayout>

注意：ViewPager高度不要直接设置match_parent，否则会把底部导航挤出可视区域，用约束布局的话需要将ViewPager的底部约束到导航栏的顶部。

2. 编写ViewPager适配器 #

根据你的页面数量选择适配器类型，页面数少于5个用FragmentPagerAdapter即可，页面多建议用FragmentStatePagerAdapter节省内存，Kotlin示例如下：

class MainPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(
    fm,
    BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT
) {
    // 按底部导航的顺序排列对应的Fragment
    private val pageFragments = listOf(
        HomeFragment(),
        DiscoveryFragment(),
        PublishFragment(),
        MessageFragment(),
        ProfileFragment()
    )
    override fun getCount(): Int = pageFragments.size
    override fun getItem(position: Int): Fragment = pageFragments[position]
}

Java实现逻辑完全一致，仅语法差异，不需要额外修改逻辑。 #

3. 双向事件绑定（核心步骤，大部分报错都出在这一步） #

要实现点击底部导航切换页面、滑动页面同步底部导航选中状态，必须做双向绑定，同时要注意关闭冲突动画：

绑定底部导航选中事件到ViewPager切换 #

bottomNav.setOnShowListener { menuItem ->
    // menuItem.id和你添加导航项时设置的id对应，按你的实际配置修改
    viewPager.currentItem = when (menuItem.id) {
        1001 -> 0
        1002 -> 1
        1003 -> 2
        1004 -> 3
        1005 -> 4
        else -> 0
    }
}

绑定ViewPager滑动事件到底部导航选中 #

viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {}
    override fun onPageSelected(position: Int) {
        // 第二个参数设置为false，关闭底部导航的切换动画，避免和ViewPager滚动动画冲突导致跳动
        bottomNav.show(
            id = when (position) {
                0 -> 1001
                1 -> 1002
                2 -> 1003
                3 -> 1004
                4 -> 1005
                else -> 1001
            },
            enableAnimation = false
        )
    }
    override fun onPageScrollStateChanged(p0: Int) {}
})

4. 初始化配置 #

// 给ViewPager设置适配器
viewPager.adapter = MainPagerAdapter(supportFragmentManager)
// 如果不需要左右滑动切换页面，可以加这行禁用滑动
// viewPager.setOnTouchListener { _, _ -> true }
// 给底部导航添加菜单项，id要和上面绑定逻辑里的id完全对应
bottomNav.add(MeowBottomNavigation.Model(1001, R.drawable.ic_home))
bottomNav.add(MeowBottomNavigation.Model(1002, R.drawable.ic_search))
bottomNav.add(MeowBottomNavigation.Model(1003, R.drawable.ic_add))
bottomNav.add(MeowBottomNavigation.Model(1004, R.drawable.ic_message))
bottomNav.add(MeowBottomNavigation.Model(1005, R.drawable.ic_profile))
// 设置默认选中首页
bottomNav.show(1001, false)
viewPager.currentItem = 0

常见报错排查 #

• 切换页面崩溃：检查FragmentManager是否正确，Activity中用supportFragmentManager，嵌套在父Fragment中要用childFragmentManager
• 底部导航和页面错位：检查菜单项id和ViewPager position的对应关系是否写错
• 底部导航切换时跳动：确认ViewPager切换时调用show方法的enableAnimation参数设置为false
• ViewPager空白不显示内容：检查ViewPager的高度配置是否正确，适配器的Fragment列表是否为空

内容的提问来源于stack exchange，提问作者Gustavo Locatelli Helena