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

.......

<item android:enabled="true"

          android:title="主页"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

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

<item android:enabled="true"

          android:title="旅游"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

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

<item android:enabled="true"

          android:title="脚印"

          android:showAsAction="ifRoom"

          android:icon="@drawable/ic_menu"

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

<item android:enabled="true"

          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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

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

...省略一大堆代码

<android.support.design.widget.BottomNavigationView

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"/>

</LinearLayout>

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这样设计是基于什么考虑,还需等他们更多的信息。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容