Android BottomNavigationView使用

原文地址：https://blog.stylingandroid.com/bottomnavigationview/
本文翻译如有侵犯原文作者权利，公众号有权删除译文。
转载请注明出处：出处

-----------------------我是哗啦啦的分割线-------------------

2016年10月，Google发布了Design support library v25.0.0，同时也发布
了Nougat（牛轧糖）7.1开发者预览版。这次发布的support包中有一个控件BottomNavigationView，BottomNavigationView是底部导航栏的简单实现，并且BottomNavigationView已经被添加到材料设计当中。这篇文章我们一起来看看BottomNavigationView控件的用法。

在我们准备Code前有几点需要注意：
第一、在Android设备上，我并不打算进入底部导航栏的「whys」跟「wherefores」页面，Android的样式更加关注「怎样去做」而不是「你应该怎样」，因此我将离开那个页面的交互相对于其它Tab来说。如果你觉得底部导航栏适合你的App，接下来这篇文章将讲解如何使用，而且使用起来它也足够简单。
第二、BottomNavigationView的java文档包含在示例代码中。不幸的是BottomNavigationView尽管在示例代码中被提到，但是它却不能正常运行，因为命名空间的包名被包含在了源码中。
第三、实例代码中使用了beta版本的ConstraintLayout。BottomNavigationView并不一定需要ConstraintLayout布局，并且示例代码也能用于任何布局文件。
接下来我们开始Coding,下面是一个包含BottomNavigationView的布局文件：
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.stylingandroid.bottomnavigationview.MainActivity">
 
  <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/navigation_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>
 
  <android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation"/>
 
</android.support.constraint.ConstraintLayout>

布局文件中使用了非标准属性app:menu，这是官方文档的一个问题。它指定了一个绑定在静态包名上的命名空间，但是如果你使用了绑定在「http://schemas.android.com/apk/res-auto」的命名空间app，那么你的代码将更加的轻便灵活。

菜单属性指定了一个标准的菜单资源文件，在这个栗子中，我将使用材料设计。
navigation.xml

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

如果你正在更换一个存在导航样式，接下来BottomNavigationView将使你的开发工作更容易。但是可能你想将「把最初的导航栏放在系统导航栏上这种愚蠢的想法」作为一个秘密。
当我们在使用菜单资源的时候，我们可能在Activity中监测菜单事件并处理其逻辑。BottomNavigationView可能用在「传统菜单」之外，当用户从我们的BottomNavigationView选择时，我们需要一种额外的机制来对用户反馈，不管怎样这已经都不是问题了。我们只需要实现BottomNavigationView.OnNavigationItemSelectedListener接口的实例即可监听用户的选择行为。在这个示例中，我们仅仅改变Fragment的文字，但是在实际的开发中，你可能会做更多的业务逻辑处理。
MainActivity.java文件如下：

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
 
    private TextFragment fragment;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragment = new TextFragment();
 
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.fragment_container, fragment);
        transaction.commit();
 
        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation_view);
 
        bottomNavigationView.setOnNavigationItemSelectedListener(this);
    }
 
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        @StringRes int text;
        switch (item.getItemId()) {
            case R.id.recents:
                text = R.string.recents;
                break;
            case R.id.favourites:
                text = R.string.favourites;
                break;
            case R.id.nearby:
                text = R.string.nearby;
                break;
            default:
                return false;
        }
        switchFragmentText(text);
        return true;
    }
 
    private void switchFragmentText(@StringRes int text) {
        fragment.setText(text);
    }
}

当我们运行时，我们能看到以下内容：
在我们所定义的主题中，我们能从colours选择样式。不管怎样，如果我们想手动地做这些事情，这里有几个额外的属性可以使用。
如果想自定义些样式，这里有几个XML参数跟getters & setters方法能够改变某一项的背景、Icon颜色、文字颜色。更多参数参考官方文档，这里已经给出了具体的说明。
底部导航栏已经成为正式材料设计的一部分，使用它仅仅需要增加design support库，并且他们非常容易使用。
原文作者：Mark Allison.
Demo源码

更多技术文章请关注我们的公众号「ssk-thinker」
或者访问深思客官网

qrcode_for_gh_666ca991514e_258.jpg