文章目录
  1. 1. 引言
  2. 2. 如何使用
    1. 2.1. 添加依赖
    2. 2.2. 添加布局
    3. 2.3. 事件处理
  3. 3. 没那么简单
  4. 4. 总结

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

引言

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

如何使用

添加依赖

这个没有什么好说的

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

添加布局

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

1
2
3
4
5
6
7
8
9
<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” 要引用到的文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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>

事件处理

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;
}
});

通过以上的代码,我们的代码就能运行起来,效果图如下:bottomnavigation_example_1

没那么简单

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

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

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

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

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

1
BottomNavigationViewHelper.disableShiftMode(navigation);

BottomNavigationViewHelper 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 就好了

1
navigation.setItemIconTintList(null);

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

1
app:itemTextColor="@color/tab_home"

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

总结

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


本文地址 http://94275.cn/2017/06/14/BottomNavigationView/ 作者为 Zhenguo

author:Zhenguo
Author: Zhenguo      Blog: 94275.cn/     Email: jinzhenguo1990@gmail.com
I have almost 10 years of application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for IT tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 引言
  2. 2. 如何使用
    1. 2.1. 添加依赖
    2. 2.2. 添加布局
    3. 2.3. 事件处理
  3. 3. 没那么简单
  4. 4. 总结
返回顶部