探索安卓中的底部导航栏

原文来自https://medium.com/my-online-cafe/exploring-bottom-navigation-bar-in-android-a02fc4b9eebb#.3q9c23b6p

在过去几年里，安卓设计指南强烈钝化安卓开发者转向平面视图，与我们在一些iOS app中经常看到的相反。大多数iOS应用程序在其视图底部都有一个扁平栏，让用户在其应用程序中访问最基本的导航选项。另一方面，我们发现在Android中是一个侧面导航抽屉，它向我们展示Android app的各个部分。这个的基本问题是由于导航选项不在用户的视图中，他们往往会忘记开发人员提供给他们的各种功能，而且app变得不太方便它的用户。
几个月前，我们看到了在Material Design指南里的改变，介绍了安卓的底部导航栏。尽管安卓已经将它包含在他们的指南里，但是没有简单的方法来实现它。我们需要自己设计并且实现它或者依赖第三方库。但是在2016年10月，Android发布了他们的最新版本的Android Support LIbrary，修订版本25.0.0，其中添加了底部导航栏到Android的原生支持。目前它的功能非常有限，但是我们可以期待Google在短时间内添加更多的功能。在这个博客中我们将了解底部导航栏。
Material指南
以下是Android告诉我们在哪里以及如何使用底部导航栏在我们的app中维护Material Design的详细说明
1.哪儿：只有那些需要直接访问的目的应该在底部导航栏中。
2.多少：只能有3-5个顶层目的在底部导航栏中。如果你有1-2个顶级目的，使用Tab。如果你有5个以上，使用侧面导航抽屉。
3.尺寸：每个选项应该有视图的宽度除以操作数（最大值168dp和最小值80dp)。高度是56dp，每个图标是24*24dp。在图标的上面有6dp的填充（活动视图），8dp填充（非活动视图），在文本下面有10dp的填充，文本左右有12dp的填充。它应该有8dp的立体高。由于Snack bar较低的高度（6dp）,所以他们出现在底部导航栏的后面。

4.字体：Roboto Regular 14sp(活动视图)和Roboto Regular 12sp（非活动视图）。如果你使用自己的字体，基于应该怎样看上去是给定的字体Roboto相应的改变。
5.颜色：活动的图标应该显示app的主色。如果底部导航栏已经着色，应该使用黑色或白色。
6.视图：如果视图获取焦点，则将显示视图的图标和文本标签。如果仅有3个动作，图标和文本标签将始终显示。如果有4个或5个动作，则非活动视图应该仅显示图标。
7.操作：通过底部导航栏导航应该重置任务状态。如果用户点击活动动作，它应该导航用户到视图的顶部。不支持滑动操作。
8.注意：当组合底部导航和Tab时，开发者应该小心。在导航app时这可能造成混乱。
教程
1.开始一个新项目或打开一个存在的。
3.创建menu包在res目录中。创建一个XML文件命名为my_navigation_items.xml，在文件中添加用name和icon定义导航选项的代码：

<?xml version=”1.0" encoding=”utf-8"?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android">

    <item
     android:id=”@+id/menu_dialer”
     android:icon=”@android:drawable/ic_dialog_dialer”
     android:title=”Menu”/>

    <item
     android:id=”@+id/menu_email”
     android:icon=”@android:drawable/ic_dialog_email”
     android:title=”Email”/>

    <item
     android:id=”@+id/menu_map”
     android:icon=”@android:drawable/ic_dialog_map”
     android:title=”Map”/>

</menu>

4.在values目录打开colors.xml。添加必要的颜色。我已经添加这些：

<?xml version=”1.0" encoding=”utf-8"?>
<resources>
    <color name=”colorPrimary”>#3F51B5</color>
    <color name=”colorPrimaryDark”>#303F9F</color>
    <color name=”colorPrimaryLight”>#4d63de</color>
    <color name=”colorAccent”>#FF4081</color>
    <color name=”colorText”>#FFFFFF</color>
    <color name=”colorIcon”>#FFFFFF</color>
</resources>

5.打开添加导航栏的布局，添加：

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout
 xmlns:android=”http://schemas.android.com/apk/res/android"
 xmlns:tools=”http://schemas.android.com/tools"
 xmlns:app=”http://schemas.android.com/apk/res-auto"
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:orientation=”vertical”
 tools:context=”nav.bottom.MainActivity”>

    <FrameLayout
     android:layout_width=”match_parent”
     android:id=”@+id/frameLayout”
     android:layout_height=”0dp”
     android:layout_weight=”1"/>

    <!-- This is the Bottom Bavigation Bar -->
    <android.support.design.widget.BottomNavigationView
     android:id=”@+id/navigation”
     android:layout_width=”match_parent”
     android:layout_height=”wrap_content”
     android:layout_gravity=”start”
     app:menu=”@menu/my_navigation_items”
     app:itemBackground=”@color/colorPrimaryLight”
     app:itemIconTint=”@color/colorIcon”
     app:itemTextColor=”@color/colorText”/>

</LinearLayout>

6.构建和运行！！
定制
现在，我们将查看在单击操作和其他自定义的fragment的工作。
1.创建3个fragment布局。我已经创建3个fragment名字为FirstFragment,SecondFragment和ThirdFragment.
2.添加这段到MainActivity代码中的onCreate()函数中以改变视图（参考原文）
3.使你的MainActiviy实现Fragment创建的监听，像这样（参考原文）

现在，如果你想改变底部导航栏的选中和非选中动作的图标和文本颜色，在res文件夹中创建color目录而且创建background.xml文件：
并且改变xml视图像这样（参考原文）
最后，如果你想添加超过3个以上的选项，在my_navigation_items.xml中添加条目即可。记住，保持3-5个条目以维持Material Design准则。