（译）BottomNavigationView的使用

2017-04-09

本文介绍了BottomNavigationView的使用。

概述

Bottom navigation提供了方便的导航在三到五个不同View之间进行切换。它是最近添加到Material Design spec，在tabs 和 navigation drawers之间提供了另一个选择。

配置

查看design support library配置说明添加依赖。尤其是确保更新到了v25版本，因为底部导航支持最近才被添加。

然后，在布局文件中添加BottomNavigationView并确保设置alignParentBottom=true来保证view放置在布局底部：

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

然后，像配置Toolbar一样设置菜单资源，在res/menu/menu_bottom_navigation.xml文件中声明tabbed items和图标：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

你可以选择New -> Vector Asset创建图标：

然后选择Action找到合适的图标：

保存文件为ic_favorite_white_24dp.xml。在导入vector drawable之后可以通过修改fillColor改变填充颜色：

<!-- change fill color to white -->
<path
   android:fillColor="#FFFFFFFF"
   android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</path>

你可以按照这个步骤处理其它图标。你也可以直接从GitHub repo下载。

最后，你需要设置导航选择的手动处理：

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
  @Override
  public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()) {
      case R.id.action_favorites:
        // do something here
        return true;
      case R.id.action_schedules:
       // do something here
        return true;
      case R.id.action_music:
        // do something here
        return true;          
    }
  }
});

配合fragments使用

你可以使用底部导航切换fragments：

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     final FragmentManager fragmentManager = getSupportFragmentManager();

     // define your fragments here
     final Fragment fragment1 = new FirstFragment();
     final Fragment fragment2 = new SecondFragment();
     final Fragment fragment3 = new ThirdFragment();

     // handle navigation selection
     bottomNavigationView.setOnNavigationItemSelectedListener(               
        new BottomNavigationView.OnNavigationItemSelectedListener() {
          @Override
          public boolean onNavigationItemSelected(@NonNull MenuItem item) {
           public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
              case R.id.action_favorites:
                  FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                  fragmentTransaction.replace(R.id.flContainer, fragment1).commit();
                  return true;
              case R.id.action_schedules:
                  FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                  fragmentTransaction.replace(R.id.flContainer, fragment2).commit();
                  return true;
              case R.id.action_music:
                  FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                  fragmentTransaction.replace(R.id.flContainer, fragment3).commit();
                  return true;     
       }
     });
  }
}

自定义样式

底部导航view也可以自定义几个不同的选项，包括app:itemBackground，app:itemIcontint，和 app:ItemTextColor：

<android.support.design.widget.BottomNavigationView
  <!-- should match top primary color -->
  app:itemBackground="@color/colorPrimary"
  <!-- tint color for bottom navigation icons -->
  app:itemIconTint="@color/white"
  <!-- text color for bottom navigation text -->
  app:itemTextColor="@color/white">
</android.support.design.widget.BottomNavigationView>

参考

https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0