Android BottomNavigationView的使用与问题处理方案

最新推荐文章于 2024-07-10 16:40:48 发布
最新推荐文章于 2024-07-10 16:40:48 发布
阅读量354 收藏 1
点赞数
分类专栏： Android 文章标签： android
原文链接：https://blog.csdn.net/qq_20451879/article/details/79240842
版权

底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好高于25.1，因为有一些问题没有处理好 ~

对于一个项目，底部导航基本是标配，特提供我自己记录的几篇Blog

闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！

Effect

这里写图片描述

实现过程
  • 1.build 引入
 compile 'com.android.support:design:25.3.1'
  • 2.BottomNavigationView 控件引用
    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:id="@+id/bv"
        android:background="#e4e4e4"
        app:menu="@menu/first_menu"
    />
  • 3.对应第二步的 ‘app:menu="@menu/first_menu"’属性，res - menu - 创建对应的menu文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_tab1"
        android:icon="@drawable/tab1"
        android:title="2018" />
    <item
        android:id="@+id/item_tab2"
        android:icon="@mipmap/tab_2_a"
        android:title="我们"
        />
    <item
        android:id="@+id/item_tab3"
        android:icon="@mipmap/tab_3_a"
        android:title="继续" />

    <item
        android:id="@+id/item_tab4"
        android:icon="@mipmap/tab_4_a"
        android:title="前行" />

</menu>
  • 4.因点击底部会有图标动态变更的效果，这里主要采用的是drawable 状态属性效果，在res - drawable创建文件 tab1.xml (如使用的是mipmap的死图片，此条可忽略)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/tab_6_b"/>
    <item android:state_checked="false" android:drawable="@mipmap/tab_6_a"/>
</selector>
  • 5.创建 ViewPager 承载的 Fragment ，因内部代码相同，可直接Copy，Tab1Fragment
package com.example.yongliu.bottomnavigationview;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * author  yongliu
 * date  2018/2/1.
 * desc:
 */

public class Tab1Fragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab_1, null);
        return view;
    }
}

tab_1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Tab_1"
        android:textColor="#f00"
        android:gravity="center"
        />
</LinearLayout>
  • 6.ViewPager适配器，BottomAdapter
package com.example.yongliu.bottomnavigationview;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * author  yongliu
 * date  2018/2/2.
 * desc:
 */

public class BottomAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments = new ArrayList<>();

    public BottomAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    public void addFragment(Fragment fragment) {
        fragments.add(fragment);
    }
}
完整示例

MainActivity

package com.example.yongliu.bottomnavigationview;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mBv;
    private ViewPager mVp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mBv = (BottomNavigationView) findViewById(R.id.bv);
        mVp = (ViewPager) findViewById(R.id.vp);
        BottomNavigationViewHelper.disableShiftMode(mBv);

        //这里可true是一个消费过程，同样可以使用break，外部返回true也可以
        mBv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.item_tab1:
                        mVp.setCurrentItem(0);
                        return true;
                    case R.id.item_tab2:
                        mVp.setCurrentItem(1);
                        return true;
                    case R.id.item_tab3:
                        mVp.setCurrentItem(2);
                        return true;
                    case R.id.item_tab4:
                        mVp.setCurrentItem(3);
                        return true;
                }
                return false;
            }
        });

        //数据填充
        setupViewPager(mVp);
        //ViewPager监听
        mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mBv.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //禁止ViewPager滑动
        //        mVp.setOnTouchListener(new View.OnTouchListener() {
        //                    @Override
        //                    public boolean onTouch(View v, MotionEvent event) {
        //                        return true;
        //                    }
        //                });
    }

    private void setupViewPager(ViewPager viewPager) {
        BottomAdapter adapter = new BottomAdapter(getSupportFragmentManager());
        adapter.addFragment(new Tab1Fragment());
        adapter.addFragment(new Tab2Fragment());
        adapter.addFragment(new Tab3Fragment());
        adapter.addFragment(new Tab4Fragment());
        viewPager.setAdapter(adapter);
    }
}

activity_main

<?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:background="#FFF"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.example.yongliu.bottomnavigationview.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/vp"
        />

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:id="@+id/bv"
        android:background="#e4e4e4"
        app:menu="@menu/first_menu"
    />
    <!--app:itemIconTint="@drawable/bottom_navigation_selector"-->
    <!--app:itemTextColor="@drawable/bottom_navigation_selector"-->

</LinearLayout>
所遇问题归纳

注意 ：底部Bottom选项，最少为3项，超过3项之后,BottomNavigationView会自动使用本身控件的自带动画属性，同时最多好像为5项，目前没有进行验证

取消自带动画效果，实现常规显示

问题 ：当底部Button超过三个之后，自带动画效果
需求 ：取消原有动画效果，常规显示

解决方式 ：

  • 创建BottomNavigationViewHelper类，进行disableShiftMode方法调用
public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
  • 设置BottomNavigationView展示类型
 BottomNavigationView mBv = (BottomNavigationView) findViewById(R.id.bv);
 //调用上面的类进行设置
 BottomNavigationViewHelper.disableShiftMode(mBv);
禁止ViewPager自带滑动效果

问题 ：因为使用的是ViewPager ，所以自带滑动效果
需求 ：禁止ViewPager自带滑动效果

解决方式 ：

        //禁止ViewPager滑动
//        mVp.setOnTouchListener(new View.OnTouchListener() {
//                    @Override
//                    public boolean onTouch(View v, MotionEvent event) {
//                        return true;
//                    }
//                });

需求 ：当选项卡为三项，且中间的选项卡我们用到自己的样式

解决方式 ：

	//menu中第二项我们设置icon，title为空
    <item
        android:id="@+id/navigation_center"
        android:icon="@null"
        android:title="" />

设置 item 之后，使用线性布局，以权重的方式，进行图片替换（关于这一点我没有进行具体校验）。

底部Icon、text选中状态
底部icon选中、未选中图标

常规是通过类似以下代码设置图标，但是扩展性、灵活性太差

 app:itemIconTint="@drawable/bottom_btn_selected_color"

所以我们通过另一种方式实现，结合底部菜单的方式，主要用到了类似app:menu="@menu/bottom_menu"的属性

select_bottom_home：先创建一个选中、未选中的图标选择器 （具体个数根据自己菜单数量定制)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_home_selected"/>
    <item android:state_checked="false" android:drawable="@mipmap/ic_home_normal"/>
</selector>

bottom_menu：创建底部菜单，将之前建好的选择器一并声明

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_tab1"
        android:icon="@drawable/select_bottom_home"
        android:title="首页" />
    <item
        android:id="@+id/item_tab2"
        android:icon="@drawable/select_bottom_game"
        android:title="街区" />
    <item
        android:id="@+id/item_tab3"
        android:title="发布" />
    <item
        android:id="@+id/item_tab4"
        android:icon="@drawable/select_bottom_msg"
        android:title="消息" />
    <item
        android:id="@+id/item_tab5"
        android:icon="@drawable/select_bottom_mine"
        android:title="我的" />
</menu>

使用示例

 <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#e4e4e4"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/bottom_menu" />
底部text选中、未选中颜色

早期

解决方式

 app:itemTextColor="@drawable/colortext"

colortext

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#f00"/>
    <item android:state_checked="false" android:color="#957"/>
</selector>

补入的（和之前相似）

bottom_text_selected（字体选中、未选中选择器）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black_def" android:state_checked="true" />
    <item android:color="@color/gray_login_text" android:state_checked="false" />
</selector>

主要属性 app:itemTextColor="@drawable/bottom_text_selected"

示例

     <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#e4e4e4"
            app:itemTextColor="@drawable/bottom_text_selected"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_menu" />

Look Here：如果通过上方设置，无效的话则通过下方代码动态设置

  • java版本
 //获取底部导航图标颜色，根据图标颜色设置文字颜色
 Resources resource = getResources();
 @SuppressLint("ResourceType")
 ColorStateList csl = resource.getColorStateList(R.drawable.bottom_btn_selected_color);
 bottomNav.setItemTextColor(csl);
  • kt版本
 //获取底部导航图标颜色，根据图标颜色设置文字颜色
 val csl: ColorStateList = resources.getColorStateList(R.drawable.bottom_text_selected)
 binding.bn.itemTextColor = csl
定制化UI，多图标时中间图标放大显示

类似效果

在这里插入图片描述

xml

<?xml version="1.0" encoding="utf-8"?>
<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=".basic.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/fl"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#e4e4e4"
            app:itemIconTint="@drawable/bottom_text_selected"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_menu" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <ImageView
            android:layout_width="@dimen/dp_40"
            android:layout_height="@dimen/dp_40"
            android:layout_marginBottom="@dimen/dp_5"
            android:src="@mipmap/ic_publish" />

        <TextView
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发布"
            android:textSize="@dimen/dp_12"
            android:layout_marginBottom="@dimen/dp_5"
            android:textColor="@color/black_def" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

有帮助的博文

转载:https://blog.csdn.net/qq_20451879/article/details/79240842

大渔歌_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓动态设置BottomNavigationView底部导航
01-03
前言：解决项目中有多个端的情况 效果图： 1：app\build.gradle中添加依赖： android x : implementation 'androidx.appcompat:appcompat:1.1.0' 非android x（注意版本号对应） : implementation 'com.android.support:design:28.0.0' 2：MainActivity： public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigation
Android底部导航栏之BottomNavigationView
u010855711的博客
03-10 3066
Android底部导航栏之BottomNavigationView
Android |（八）BottomNavigationView 底部导航栏
最新发布
codeSong的博客
07-10 621
实战演示——微信底部导航栏
Android关于BottomNavigationView使用指南
QG
08-30 4374
BottomNavigationView
Android进阶之路 - BottomNavigationView的使用与问题处理方案
热门推荐
Android、前端、小程序、后端
02-02 3万+
底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好相对高于25.1，因为有一些问题没有处理好。 闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！
Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换
lb220303082的博客
07-02 7949
本教程详细全面，对新手友好
【Android】BottomNavigationView的使用笔记
大模型训练
04-17 2157
我们在使用控件的时候，总是有两个必须填写的值，一个是`width`，一个是`height`，而它们分别对应我们印象中的物体的长度和宽度。当控件被遮盖住，这时候我们就需要指定控件的`Z`轴高度了。   何为`Z`轴高度？比如我们在三维空间中定义一个物体的具体位置，需要知道它的空间属性值，通过`XYZ`轴来精确定。这里的`Z`轴高度，其实就是指真正的“高度”，而不是宽度！ 总结： 让添加的`ImageView`在`Z`轴上的高度 大于等于`BottomNavigationView`的。
Android studio BottomNavigationView 应用设计
01-03
在Android应用开发中，BottomNavigationView是一种常用的导航组件，它位于屏幕底部，通常包含三到五个图标，用于在不同页面间切换。本教程将深入探讨如何在Android Studio中有效地设计和实现BottomNavigationView。 ...
BottomNavigationView和viewpager解决图片不显示只改变颜色的问题
05-18
4. 对于ViewPager的使用，通常我们会用`FragmentPagerAdapter`或`FragmentStatePagerAdapter`与BottomNavigationView配合。确保在切换Fragment时，BottomNavigationView的选中状态同步更新。这可以通过监听`...
Android Studio 使用BottomNavigationView 实现底部 tabs (二)
03-20
本教程将深入探讨如何在Android Studio中使用BottomNavigationView来创建底部tabs，这是系列教程的第二部分。 首先，我们需要在项目的布局XML文件中添加BottomNavigationView。在res/layout目录下打开或创建主活动...
BottomNavigationView去除菜单项动画效果代码
08-17
在Android开发中，BottomNavigationView（底部导航视图）是一个常用组件，用于在多个视图间进行切换。在设计用户界面时，我们有时需要对它的默认行为进行自定义，比如在这个场景下，我们要去除 BottomNavigationView...
Android 使用BottomNavigationView实现底部导航栏
02-02
Android 使用BottomNavigationView实现底部导航栏，在Android Support Library 25 中增加了 BottomNavigationView 控件，官方为我们提供了这样这一个控件。
BottomNavigationView-Demo.zip
09-12
BottomNavigationView在Android开发中是一种常见的组件，用于在底部展示多个导航选项，通常与ViewPager和Fragment配合使用，以实现页面间的切换。在这个名为"BottomNavigationView-Demo"的项目中，开发者提供了一个...
Android底部导航栏的实现（BottomNavigationView），结合ViewPage
Sean_Word的博客
11-27 396
首页底部tab栏用 BottomNavigationView，我们可以创建一个menu文件来给tab栏按钮设置样式。BottomNavigationView 控件引用该menu，来显示底边按钮。步骤：右键res文件夹 -> New -> Dirctory -> 命名 “menu” -> 右键menu文件夹 -> New -> Menu Resource File.光这样还不够，我们还要实现页面和底部按钮的绑定。这一行代码引用类我们刚刚的menu布局文件。在该布局文件中，我设置了标题和图片资源。
底部菜单控件BottomNavigationView的使用
热爱技术
01-16 1万+
BottomNavigationView实现底部导航栏的整体效果如下图所示： 基本使用 BottomNavigationView控件的主要属性含义： 控件点击时候颜色选择@color/sl_color_green_grey 完整的MainActivity代码 运行的效果图如下： item多的时候，指的是item非选中状态显示文字，有以下几个值：它们依次运行如下图所示 auto和select和i 属性sShifting有关 此时isShifting=true;你会发现auto和 selected的效
Android Studio —— BottomNavigationView（模拟支付宝底部导航）
wx微信公众号“码农总动员”，获取更多编程知识
01-24 3031
效果   源码     代码过程 步骤1: 主界面垂直线性布局,加入ViewPager、BottomNavigationView两个控件。 加入5张图片作为底部切换的图标,创建menu文件及xml文件,将5张图片加入到xml内item。 在BottomNavigationView中加入menu选项,将上面的xml加入。 (此时可以查看到界面底部的5个按钮,并可点击。)
Android BottomNavigationView底部导航栏的使用（更新中）
江小白的博客
06-02 2092
implementation 'com.google.android.material:material:1.0.0'
Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
06-29 1万+
现在常用的App主页都会有一个底部导航栏，根据需求也使用过好几种方法进行实现，于是想着还是总结一下，今天还写一个简单的BottomNavigationView方法来实现这个功能它是android原生的一个底部导航框架，一般和Fragment一起使用。xml布局：最外层的layout不用管，那是databinding框架的根布局，主要的布局FrameLayout来装载fragment列表，BottomNavigationView实现底部导航栏，最后监听绑定实现点击切换 其中BottomNavigation
android新特性： 底部导航栏BottomNavigationView系统库与第三方库的两种不同库的使用方法
旺仔的专栏
04-17 6054
20161223172807254.gif Android Design Support Library中增加了 BottomNavigationView 这个控件。那么以后底部导航栏是不是就有新的方式了呢？ 在这里让我们来学习一下系统的BottomNavigationView和第三方BottomNavigationView库的使用吧！ 一、首先来看看系统的BottomNavigatio
stackpanel 底部留白
07-11
您好！对于 StackPanel 控件底部留白的问题，您可以尝试以下两种方法： 方法一：使用 Margin 属性 您可以在 StackPanel 上设置一个负的 Margin 值来实现底部留白。例如，设置 `Margin="0,0,0,-10"` 可以在底部留出 10 像素的空白。 ```xaml <StackPanel Margin="0,0,0,-10"> <!-- 控件内容 --> </StackPanel> ``` 方法二：使用 VerticalAlignment 属性 您可以将 StackPanel 的 VerticalAlignment 属性设置为 Bottom 来实现底部对齐，并将底部内容留白。 ```xaml <StackPanel VerticalAlignment="Bottom"> <!-- 控件内容 --> </StackPanel> ``` 这两种方法都可以实现 StackPanel 控件底部留白的效果，您可以根据具体需求选择适合的方法使用。希望能对您有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值