Design 之BottomNavigationView 的实践

近日， Android的 API 升级到了25 SDK,更新了Android支持库到25.0.0，在新版本中，除了其他的功能外，还引入了BottomNavigationView小部件，它实现了材料设计指南里的底部导航模式。

 引用材料设计里的图片

接下来就要实现BottomNavigationView了。

1、升级Android Support Library 为 25.0.0。

2、在build.gradle 添加如下：

dependencies{

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

}

3、创建一个menu文件，用于配置底部栏的子项

menu_bottomnav.xml

.......

          android:title="主页"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

          android:id="@+id/m1"/>

          android:title="旅游"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

          android:id="@+id/m2"/>

          android:title="脚印"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

          android:id="@+id/m3"/>

          android:title="心语"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

          android:id="@+id/m4"/> 

创建menu文件

4、将android.support.design.widget.BottomNavigationView放在读者想要的布局文件中

注意记得添加menu文件：app:menu="@menu/menu_bottomnav"（这个对应各自的menu）

main_activity.xml

xmlns:app="http://schemas.android.com/apk/res-auto">

...省略一大堆代码

android:id="@+id/bottomnavigationview"

android:layout_width="match_parent"

android:layout_height="50dp"

android:layout_gravity="start"

app:itemTextColor="#008000"

app:itemIconTint="#008000"

app:menu="@menu/menu_bottomnav"/>

layout文件中引入该控件

5、监听

bottomnavigationview.setOnNavigationItemSelectedListener(newBottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public booleanonNavigationItemSelected(@NonNullMenuItemitem) {

     Toast.makeText(MainActivity.this,""+item.getTitle(),Toast.LENGTH_SHORT).show();

        return false;

   }

});

注意：google推荐一般 3-5个为宜

3 个选项卡的效果图

4个选项卡的效果图 

5个选项卡的情况

以上几个效果图，目前三个的比较合适，对称均匀。其他的都是点击了就歪了，不懂google这样设计是基于什么考虑，还需等他们更多的信息。