BottomNavigationView 的使用

BottomNavigationView 很早之前就在 Material Design 中出现了，但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件。

该控件使用方法如下：

• 在 build.gradle 文件中增加依赖：

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

• 在 res/menu/ 目录下创建一个 xml 文件（没有该目录则手动创建一个），我将其命名为 navigation.xml

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

<item

android:id= "@+id/add"

android:icon= "@drawable/ic_call_white_24dp"

android:title= "call" />

<item

android:id= "@+id/delete"

android:icon= "@drawable/ic_announcement_white_24dp"

android:title= "message" />

<item

android:id= "@+id/setting"

android:icon= "@drawable/ic_settings_white_24dp"

android:title= "setting" />

<item

android:id= "@+id/me"

android:icon= "@drawable/ic_account_circle_white_24dp"

android:title= "me"/>

menu>

在布局文件中添加如下代码即可：

1 2 3 4 5

<android.support.design.widget.BottomNavigationView android:layout_width= "match_parent" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" app:menu= "@menu/navigation"/>

注意这里的 app:menu="@menu/navigation" 引用了刚才创建的菜单文件。

最后，在代码中添加 BottomNavigationView 的事件监听：

navigationView.setOnNavigationItemSelectedListener(

new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

......

return true;

}

});

这样就完成了一个简单的 BottomNavigationView 控件。该控件有几个地方需要注意的：

• 底部导航栏高度默认是 56dp。
• 菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。
• icon 的选中颜色默认是 @color/colorPrimary。当然你也可以使用 app:itemIconTint="@android:color/white" 来自定义，这样定以后，所有的 icon 颜色都是这个了。
• 菜单元素文字的默认颜色是 @color/colorPrimary。你可以使用 app:itemTextColor="@android:color/white" 自定义。
• 底部导航栏背景颜色默认是当前样式的背景色（白色/黑色），你可以使用 app:itemBackground="@android:color/black" 来更改。

写个具体的例子吧。比如新建一个项目，activity_main.xml 布局如下：

<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:id= "@+id/activity_main"

android:layout_width= "match_parent"

android:layout_height= "match_parent"

tools:context= "me.qiushui.buttomnavigationdemo.MainActivity">

<TextView

android:id= "@+id/text"

android:layout_width= "wrap_content"

android:layout_height= "wrap_content"

android:layout_centerInParent= "true"

android:text= "Hello World!"

android:textSize= "36sp"/>

<android.support.design.widget.BottomNavigationView

android:id= "@+id/navigation"

android:layout_width= "match_parent"

android:layout_height= "wrap_content"

android:layout_alignParentBottom= "true"

app:itemBackground= "@android:color/black"

app:itemIconTint= "@android:color/white"

app:itemTextColor= "@android:color/white"

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

RelativeLayout>

菜单文件还是沿用开始创建的那个文件（图片资源自己添加）。MainActivity.java 代码如下：

public class MainActivity extends AppCompatActivity {

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;

}

});

}

}

运行效果如下图：