BottomNavigationView

作者: 爱红旗渠 | 来源:发表于2017-12-11 16:29 被阅读78次

    要点:本文主要写使用 BottomNavigationView 和遇到的一些问题的解决办法

    引言

    作为谷歌 Material Design Components 新控件 BottomNavigationView, 提供应用底部导航栏的实现。没有这个控件之前,Android 底部导航栏一般通过 LinearLayout 包裹几个 Button 或使用 RadioGroup 和 RadioButton 来实现。使用 BottomNavigationView 这个控件,可以提供更好的用户体验和开发更容易。此文主要介绍在使用 BottomNavigationView 过程中遇到的几个问题。

    如何使用

    添加依赖

    这个没有什么好说的

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

    添加布局

    布局分两个部分,首先是总的布局:

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:itemIconTint="@color/tab_home"
            app:itemTextColor="@color/tab_home"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/navigation" />
    

    其次,配置导航项。在 res 的 menu 目录下创建上面代码中 app:menu="@menu/bottom_menu" 要引用到的文件:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/ic_home"
            android:title="@string/title_home" />
    
        <item
            android:id="@+id/navigation_category"
            android:icon="@drawable/ic_category"
            android:title="@string/title_category" />
    
        <item
            android:id="@+id/navigation_activity"
            android:icon="@drawable/ic_activity"
            android:title="@string/title_activity" />
    
        <item
            android:id="@+id/navigation_cart"
            android:icon="@drawable/ic_cart"
            android:title="@string/title_cart" />
    
        <item
            android:id="@+id/navigation_mine"
            android:icon="@drawable/ic_mine"
            android:title="@string/title_mine" />
    
    </menu>
    

    事件处理

    主要是点击事件的处理,代码如下:

    navigation = (BottomNavigationView) findViewById(R.id.navigation);
            navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    
                    switch (item.getItemId()) {
                        case R.id.navigation_home:
                            return true;
                        case R.id.navigation_category:
                            setTitle(R.string.title_category);
                            return true;
                        case R.id.navigation_activity:
                            setTitle(R.string.title_activity);
                            return true;
                        case R.id.navigation_cart:
                            setTitle(R.string.title_cart);
                            return true;
                        case R.id.navigation_mine:
                            setTitle(R.string.title_mine);
                            return true;
                    }
                    return false;
                }
            });
    

    通过以上的代码,我们的代码就能运行起来,效果图如下:[图片上传失败...(image-7e3f7a-1512980965647)]:

    没那么简单

    很快你会发现,接入简单,但是真正符合我们的设计要求,我们还需要捣腾捣腾。

    下面列举一下我遇到的问题:

    1. 当导航项大于三个的时候,选中项变大,其它文字被隐藏
    2. 当我们自定义默认和选中图之后,选中的效果图变色了

    问题来了,我们怎么解决呢?

    针对第一个问题,在网上查资料后,发现是 mShiftingMode 的问题,默认是开启的且谷歌没有开放修改接口。既然谷歌不给修改接口,那么我们就硬来,用反射来解决。实现代码如下:

    BottomNavigationViewHelper.disableShiftMode(navigation);
    

    BottomNavigationViewHelper 代码如下:

    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);
                    item.setShiftingMode(false);
                    item.setChecked(item.getItemData().isChecked());
                }
            } catch (NoSuchFieldException e) {
                Log.e("BottomNavigationViewHelper", "Unable to get shift mode field", e);
            } catch (IllegalAccessException e) {
                Log.e("BottomNavigationViewHelper", "Unable to change value of shift mode", e);
            }
        }
    
    }
    

    针对第二个问题,各种谷歌百度后,发现是控件默认着色器的问题。知道问题所在,解决起来就简单了。只需一行代码禁 tint 就好了

     navigation.setItemIconTintList(null);
    

    默认和选中文字的颜色,只需要添加颜色 selector 就可以了

    app:itemTextColor="@color/tab_home"
    

    另外,BottomNavigationView 支持的导航项数量是3-5个。

    总结

    谷歌 BottomNavigationView 效果是挺好的,使用很方便,特效也很不错,唯一不足就是接口不太友善。总的来说,这个控件使用容易且效果很赞,建议使用。

    源文地址

    http://ihongqiqu.com/2017/06/14/BottomNavigationView/

    作者为

    Zhenguo

    相关文章

      网友评论

        本文标题:BottomNavigationView

        本文链接:https://www.haomeiwen.com/subject/vgoiixtx.html