BottomNavigationView 的使用

Tinggeng included in Mobile Android

2017-02-18 183 words One minute views

Contents

why

BottomNavigationView 这个概念很早之前就被提出,之后出一个第三方库.但是一直未有官方的支持,今天正好看到有官方支持,记录一下.

what

BottomNavigationView 是 material design 中的设计的实现，这种设计很早就出现了。

how

添加依赖

1

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

在menu下新建 menu配置文件，顺序就是 bottom bar 显示的顺序

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/recents"
            android:title="Recents"
            android:icon="@drawable/ic_recents"/>
    <item
            android:id="@+id/favorites"
            android:title="Favorites"
            android:icon="@drawable/ic_favorites"/>
    <item
            android:id="@+id/nearby"
            android:title="Nearby"
            android:icon="@drawable/ic_nearby"/>
</menu>

在 drawable 和 drawable-v21下新建item的背景文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<?xml version="1.0" encoding="utf-8"?>
<!-- in drawable for lower then 21 API-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@android:color/white"/>
    <item android:drawable="@android:color/transparent"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<!--in drawable-v21 folder, for greater or equal then 21 API-->
<ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@android:color/white">
</ripple>

在 layout 下新建布局文件，用来添加 BottomNavigationView

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@android:color/holo_blue_bright"
            app:itemBackground="@drawable/navigationbar_item_bg"
            app:itemIconTint="@android:color/white"
            app:itemTextColor="@android:color/white"
            app:menu="@menu/menu_bottom_navigation_view"/>

</RelativeLayout>

在 Activity 或者 fragment 中添加监听即可。

1
2
3
4
5
6
7
8


bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigationView);
this.bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Toast.makeText(BottomNavigationViewActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
        return true;
    }
});

##　Ｃonclusion 官方的这个支持，可扩展性不强，也没什么特别的新意，可参考学习第三方库BottomBar.