敲代码也挺好的,就是头顶有点凉!

0%

BottomNavigationView + Fragment 底部导航栏实现

本篇是自己在学习 BottomNavigationView 时整理的笔记。

效果图:
效果图.gif

目录结构:
目录结构.png

https://github.com/Evan-zch/BottomNavigationViewDemo

正文

​前面呈现的效果图是现在很多主流App都在使用底部导航栏模式,比如常用的微信、QQ这些基本的社交软件,其实要实现上面的效果也很简单。

1、添加库文件

要使用 BottomNavigationView 需要在build.gradle中添加design

1
implementation 'com.android.support:design:27.1.1'
2、布局文件
1
2
3
4
5
6
7
8
9
<android.support.design.widget.BottomNavigationView
android:id="@+id/bv_bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/write"
app:itemIconTint="@drawable/bottom_navigation_item_selector"
app:itemTextColor="@drawable/bottom_navigation_item_selector"
app:menu="@menu/main_bottom_navigation" />

app:itemBackground:设置item的背景

app:itemIconTint:设置icon的颜色

app:itemTextColor:设置文字的颜色

app:menu :设置底部导航栏icon和文字

3、bottom_navigation_item_selector.xml

app:itemIconTint="@drawable/bottom_navigation_item_selector"
app:itemTextColor="@drawable/bottom_navigation_item_selector"

drawable下新建xml文件,通过为 itemIconTintitemTextColor 设置 selector,可实现在点击时icontitle颜色的变换。

1
2
3
4
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/theme" android:state_checked="true" />
<item android:color="@color/bottom_navigation_normal" android:state_checked="false" />
</selector>
4、main_bottom_navigation.xml

app:menu="@menu/main_bottom_navigation"

menu目录下新建xml文件,自定义底部导航栏icontitle,代码如下:

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
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_message"
android:enabled="true"
android:icon="@mipmap/message"
app:showAsAction="ifRoom"
android:title="消息" />
<item
android:id="@+id/menu_contacts"
android:enabled="true"
android:icon="@mipmap/icon_contacts"
app:showAsAction="ifRoom"
android:title="联系人" />
<item
android:id="@+id/menu_discover"
android:enabled="true"
android:icon="@mipmap/icon_discover"
app:showAsAction="ifRoom"
android:title="发现" />
<item
android:id="@+id/menu_me"
android:enabled="true"
app:showAsAction="ifRoom"
android:icon="@mipmap/me"
android:title="我" />
</menu>
5、在Activity中进行初始化:
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
public void initBottomNavigation() {
mBottomNavigationView = findViewById(R.id.bv_bottomNavigation);
// 添加监听
mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_message:
setFragmentPosition(0);
break;
case R.id.menu_contacts:
setFragmentPosition(1);
break;
case R.id.menu_discover:
setFragmentPosition(2);
break;
case R.id.menu_me:
setFragmentPosition(3);
break;
default:
break;
}
// 这里注意返回true,否则点击失效
return true;
}
});
}

特别说明

当底部导航栏item数目大于三个时,展示效果如下:

item大于三个时效果图.gif

item数目大于三个时,底部导航栏展示的效果采取动画的方式,很多时候非我们想要的效果, 通过反射来进行处理原文

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class BottomNavigationViewHelper {
@SuppressLint("RestrictedApi")
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);
}
}
}

可以在初始化的时候多添加一行代码就能避免这个问题

1
2
3
4

mBottomNavigationView = findViewById(R.id.bv_bottomNavigation);
// 解决当item大于三个时,非平均布局问题
BottomNavigationViewHelper.disableShiftMode(mBottomNavigationView);
您的支持是对我最大的鼓励.