Android进阶之路 - BottomNavigationView的使用与问题处理方案

远方那座山

已于 2023-02-27 11:01:25 修改

阅读量3.6w

点赞数 18

分类专栏： # 5.0-10.0 新特性、兼容 Android进阶之路文章标签： Android Android5.0控件底部导航栏

于 2018-02-02 16:40:54 首次发布

本文链接：https://blog.csdn.net/qq_20451879/article/details/79240842

版权

Android进阶之路同时被 2 个专栏收录

208 篇文章 40 订阅

订阅专栏

5.0-10.0 新特性、兼容

17 篇文章 0 订阅

订阅专栏

底部导航的实现之一为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>

有帮助的博文

远方那座山

关注

18
点赞
踩
94

收藏

觉得还不错? 一键收藏
打赏
28
评论
Android进阶之路 - BottomNavigationView的使用与问题处理方案

底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好相对高于25.1，因为有一些问题没有处理好。闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！
复制链接

扫一扫