添加依赖:
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support:design:26.+'
注意: support:design
的版本要和support:appcompat
的版本一致。否则编译不通过。
代码中使用
layout布局:
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/life_red"
app:itemIconTint="@color/life_white"
app:itemTextColor="@color/life_white"
app:menu="@menu/menu_material_bottom_navigation"
android:layout_gravity="bottom">
</android.support.design.widget.BottomNavigationView>
menu布局
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="@drawable/home_page_black"
android:title="@string/home_page" />
<item
android:icon="@drawable/icons8_compass_96"
android:title="@string/find" />
<item
android:icon="@drawable/icons8_product_96"
android:title="@string/product" />
<item
android:icon="@drawable/icons8_user_96"
android:title="@string/me" />
</menu>
默认效果
为图标和字体换颜色
app:itemIconTint="@color/life_white"
app:itemTextColor="@color/life_white"
只能设置color不能设置drawable
- 在res目录下创建color资源文件夹
- 创建selector文件material_bottom_navigation
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/life_white" android:state_pressed="true"/>
<item android:color="@color/life_white" android:state_checked="true"/>
<item android:color="@color/life_black"/>
</selector
- 替换
app:itemIconTint="@color/material_bottom_navigation"
app:itemTextColor="@color/material_bottom_navigation"
问题
- 当item = 3个时,没有动画,大于3个 会出现上面的动画效果。
- 扩展性差
推荐文章:
https://juejin.im/post/59f924b0f265da431f4a60c3
https://www.jianshu.com/p/aa499cc64f72
https://material.io/develop/android/components/bottom-navigation-view/
目前市面上有比较不错的三方:
https://github.com/aurelhubert/ahbottomnavigation
https://github.com/chaychan/BottomBarLayout