BottomNavigationView 的使用

不多说先上效果图

zhouchatian.com

添加依赖

compile ‘com.android.support:design:25.0.0’

添加控件

在布局文件添加BottomNavigationView组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhouchatian.baseandroid.MainActivity">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_centerInParent="true"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation"/>
</RelativeLayout>

添加按钮

在res下创建navigation.xml 放在menu文件夹下，如果没有就创建一个menu文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bottom_home"
        android:icon="@mipmap/ic_home_white_24dp"
        android:title="首页" />
    <item
        android:id="@+id/bottom_book"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="书本" />
    <item
        android:id="@+id/bottom_collection"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="收藏"/>
    <item
        android:id="@+id/bottom_setting"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="设置" />
</menu>

要说下的这个按钮只能创建3个到5个，多了或少了都会报错。

添加监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class MainActivity extends AppCompatActivity {
    private TextView mTextView;
    private BottomNavigationView mNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = (TextView) findViewById(R.id.text);
        mNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mTextView.setText(item.getTitle().toString().toUpperCase());
                return true;
            }
        });
    }
}

这样一个建的底部导航就做好了，控件使用简单，带来局限性，只有修改一些。

修改

app:itemIconTint=”#FFFFFF”设置图标的颜色

app:itemTextColor=”#FFFFFF”设置文字的颜色

app:itemBackground=”@color/colorPrimary” 设置背景色

如果不设置就是上图的颜色，官方提供了三个颜色

zhouchatian.com

1
2
3
4
5
6
7
8
9
<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="#FFFFFF"
        app:itemTextColor="#FFFFFF"
        app:itemBackground="@color/colorPrimary"
        app:menu="@menu/navigation"/>

当然你也可以在代码中设置

setItemBackgroundResource(int resId)
setItemIconTintList(ColorStateList tint)
setItemTextColor(ColorStateList textColor)

在实际开发中使用item.getItemId()使用switch来判断选中了哪一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.bottom_home:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_book:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_collection:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_setting:
                        mTextView.setText(item.getTitle());
                        break;
                }
                return true;
            }
        });

其实这个还有另外一个监听

BottomNavigationView.OnNavigationItemReselectedListener

官方解释用于重选的监听，特意提下是希望各位用的时候别选错了。

问题

1. 默认选中的是第一个，但是我们要默认选中其他的怎么办？

官方提供了两个方法

getSelectedItemId(int itemId)

获得选中item的id，这时我们就可以使用另一个方法

setSelectedItemId(int itemId)