Material Design之BottomNavigationView

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Common_it/article/details/80430693

在开发中,底部导航栏基本是每个App必不可少,而Design就给我们提供了一个快捷的一个控件

效果

这里写图片描述

布局文件

一个底部导航栏,一个分割线,一个Fragment,比较简单

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--底部导航栏-->
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@null"
        app:itemIconTint="@color/select_color"
        app:itemTextColor="@color/select_color"
        app:menu="@menu/bottom_menu" />
    <!--分割线-->
    <View
        android:id="@+id/v_div"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@id/bottom_view"
        android:background="#999999" />
    <!--Fragment-->
    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/v_div" />
</RelativeLayout>

与导航栏的按钮一一对应

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_1"
        android:icon="@drawable/daohang_shouye"
        android:title="首页" />
    <item
        android:id="@+id/menu_2"
        android:icon="@drawable/daohang_xiaoxi"
        android:title="消息" />
    <item
        android:id="@+id/menu_3"
        android:icon="@drawable/video_pause"
        android:title="视频" />
    <item
        android:id="@+id/menu_4"
        android:icon="@drawable/daohang_wode"
        android:title="我的" />
</menu>

select_color

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#ff0000" android:state_checked="true"/>
    <item android:color="#666666" android:state_checked="false"/>
</selector>

自定义属性说明

自定义属性 说明 参数
menu Menu资源 Menu资源
itemIconTint menu中图片的颜色 颜色值
itemTextColor menu中文字的颜色 颜色值
itemBackground item背景颜色 颜色值

监听

调用 setOnNavigationItemSelectedListener设置监听,通过muen中设置的id来区别点击的Item。这里要注意的是监听的返回值,要返回 true

注意

  1. menu中的item最多有五个;
  2. 如果menu中Item超过3个,需要在找到控件之后调用BottomNavigationViewHelper.initShiftMode(底部导航栏控件);
  3. 如果想取消item点击时候的背景颜色就把app:itemBackground的值设置为@null

BottomNavigationViewHelper

帮助类是网上找的,原因是在源码中mShiftingMode = mMenu.size() > 3;这里做的限制!

public class BottomNavigationViewHelper {

    public static void initShiftMode(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);
                item.setShiftingMode(false);
                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);
        }
    }
}

猜你喜欢

转载自blog.csdn.net/Common_it/article/details/80430693