BottomNavigationView+ViewPager+Fragment+TabLayout 常见设计问题解决

最新推荐文章于 2025-06-01 18:39:30 发布

置顶

黑夜问白天Alone

最新推荐文章于 2025-06-01 18:39:30 发布

阅读量6.4k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Android开发常用文章标签： BottomNavigationView ViewPager TabLayout BottomNavigationView+ViewPager

本文链接：https://blog.youkuaiyun.com/shine_qstm/article/details/78864982

本文详细介绍了如何解决在使用BottomNavigationView、ViewPager、Fragment和TabLayout组合设计中遇到的问题，包括：超过3个导航项影响底部效果的修复、动态添加并区分Fragment的方法，以及解决切换页面后TabFragment数据丢失的两种策略。提供了一个完整的项目架构和代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019.10.31更新：

禁止viewpager滑动的办法。项目中的那个有点问题。

package com.vwiov.enterpriseapp.widget;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 手动控制viewpager是否可以左右滑动
 * 去除滑动动画
 * setNoScroll(boolean noScroll)
 *
 * @author ex-panyong
 */
public class NoScrollViewPager extends ViewPager {
    private boolean noScroll = false;

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public NoScrollViewPager(Context context) {
        super(context);
    }

    public void setNoScroll(boolean noScroll) {
        this.noScroll = noScroll;
    }

    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        /* return false;//super.onTouchEvent(arg0); */
        switch (arg0.getAction()) {
        }


        return !noScroll && super.onTouchEvent(arg0);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return !noScroll && super.onInterceptTouchEvent(arg0);
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        super.setCurrentItem(item, smoothScroll);
    }

    @Override
    public void setCurrentItem(int item) {
        //false 去除滚动效果
        super.setCurrentItem(item, false);
    }

}

//禁止滑动 mViewpager.setNoScroll(true);

2019.06.10更新：针对design版本 27+ 在

android.support.design.widget.BottomNavigationView

加入

app:labelVisibilityMode="labeled"

这个属性，超过3个导航项会影响底部的效果的问题被修复了，不需要再那么处理了。

首先看下效果图：

先看项目架构吧：

第一步：构建底部的导航栏，使用BottomNavigationView

1.导包

compile 'com.android.support:design:26.1.0'

2.在activity_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"

    android:fitsSystemWindows="true"
    android:orientation="vertical"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/common_color">

        <Tex