关于标签是否应该放在屏幕顶部或底部的争论已经持续了近十年。Android总是偏爱在页面顶部使用选项卡作为过滤机制，而iOS则使用底部标签作为导航的主要来源。现在，在支持设计库中添加了底部导航视图，Android开发者可以选择他们的应用程序的主要导航来。

底部导航条使您的用户可以轻松地通过一个水龙头浏览顶级视图，比较了从侧面飞出的导航抽屉，当一个应用程序有很多不同的部分时，它是一个标准。今天，我将在您的应用程序中最好使用底部导航，如何实现它，以及如何根据您的喜好定制它。

底层导航的核心体验是专为手机设备使用的，它允许用户轻松地在页面之间进行交换。如果你使用底部导航应该注意的一些问题是：

  • 你的应用程序有3到5个顶层页面吗？
  • 你的顶层页面需要直接访问吗？

如果你的应用程序有超过五页，最好和导航抽屉在一起；如果少于三页，坚持标准的顶部标签。

入门

开始新的底部导航视图， 我们要确保我们的Android应用程序的更新了 AppCompat Activity 并且更新到 最新的支持库。 有了这些，我们现在可以通过NuGet包（当前版本是25.3.3）来安装Xamarin.Android.Support.Design到我们的应用工程中。

添加选项卡/菜单项

我们必须定义的项目，将在我们添加到bottomnavigationview控制后显示。这是控制同样的navigationdrawer，使用XML定义的菜单。我们可以在资源目录中创建一个新的菜单文件夹，并添加一个新的XML文件。我们在Resources/menu/下创建一个bottom_navigation_main.xml文件，并且从Android Asset Studio下载一个选项卡的图标，大小都是24dpX24dp.

点击(此处)折叠或打开

  1. ?xml version="1.0" encoding="utf-8"?>
  2. menu xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto">
  4.   item
  5.       android:id="@+id/menu_home"
  6.       android:enabled="true"
  7.       android:icon="@drawable/ic_action_home"
  8.       android:title="@string/tab1_title"
  9.       app:showAsAction="ifRoom" />
  10.  
  11.   item
  12.       android:id="@+id/menu_audio"
  13.       android:enabled="true"
  14.       android:icon="@drawable/ic_action_audiotrack"
  15.       android:title="@string/tab2_title"
  16.       app:showAsAction="ifRoom" />
  17.  
  18.   item
  19.       android:id="@+id/menu_video"
  20.       android:enabled="true"
  21.       android:icon="@drawable/ic_action_videocam"
  22.       android:title="@string/tab3_title"
  23.       app:showAsAction="ifRoom" />
  24. /menu>

添加底部导航视图

底部导航工作时，选择一个项目时替换碎片。这意味着我们的Android的XML也应该有一个FrameLayout交换和碎片，将显示。我们的XML将以其基本形式看起来像这样：

点击(此处)折叠或打开

  1. RelativeLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent">
  7.     FrameLayout
  8.         android:id="@+id/content_frame"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:layout_above="@+id/bottom_navigation"/>
  12.     android.support.design.widget.BottomNavigationView
  13.       android:id="@+id/bottom_navigation"
  14.       android:layout_width="match_parent"
  15.       android:layout_height="56dp"
  16.       android:layout_gravity="start"
  17.       android:layout_alignParentBottom="true"
  18.       android:background="@android:color/white"
  19.       app:elevation="16dp"
  20.       app:menu="@menu/bottom_navigation_main" />
  21.       !-- Note: background color is required to get elevation -->
  22.   /RelativeLayout>

我们可以定义一个高程，这样底部导航就可以用漂亮的阴影从页面上移除，我们在导航视图中定义我们的条目，菜单属性引用我们前面创建的菜单。

我们可以看到，默认会自动将我们的主色和灰色的取消项目。

处理点击事件

现在是我们实际处理点击事件并设置内容的时候了。在这个例子中，我有三个不同的片段，它们只是加载一个显示当前索引的Android XML文件。我们可以创建一个简单的方法来替换当前的片段，基于我们主活动中的菜单XML中设置的ID：

点击(此处)折叠或打开

  1. void LoadFragment(int id)
  2. {
  3.     Android.Support.V4.App.Fragment fragment = null;
  4.     switch (id)
  5.     {
  6.         case Resource.Id.menu_home:
  7.             fragment = Fragment1.NewInstance();
  8.             break;
  9.         case Resource.Id.menu_audio:
  10.             fragment = Fragment2.NewInstance();
  11.             break;
  12.         case Resource.Id.menu_video:
  13.             fragment = Fragment3.NewInstance();
  14.             break;
  15.     }
  16.  
  17.     if (fragment == null)
  18.         return;
  19.  
  20.     SupportFragmentManager.BeginTransaction()
  21.         .Replace(Resource.Id.content_frame, fragment)
  22.         .Commit();
  23. }

现在我们可以加载XML，找到BottomNavigationView，并登记为NavigationItemSelected事件：




点击(此处)折叠或打开

  1. BottomNavigationView bottomNavigation;
  2. protected override void OnCreate(Bundle bundle)
  3. {
  4.     base.OnCreate(bundle);
  5.     SetContentView(Resource.Layout.main);
  6.     var toolbar = FindViewByIdAndroid.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
  7.     if (toolbar != null)
  8.     {
  9.         SetSupportActionBar(toolbar);
  10.         SupportActionBar.SetDisplayHomeAsUpEnabled(false);
  11.         SupportActionBar.SetHomeButtonEnabled(false);
  12.     }
  13.  
  14.     bottomNavigation = FindViewByIdBottomNavigationView>(Resource.Id.bottom_navigation);
  15.  
  16.     bottomNavigation.NavigationItemSelected += BottomNavigation_NavigationItemSelected;
  17.  
  18.     // Load the first fragment on creation
  19.     LoadFragment(Resource.Id.menu_home);
  20. }
  21.  
  22. private void BottomNavigation_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
  23. {
  24.     LoadFragment(e.Item.ItemId);
  25. }

添加颜色

谷歌的建议是简单地使用默认的白色或黑色背景颜色和主要色调的图标，如果你的应用程序使用默认主题，你的工具栏已经着色。如果您希望设置底部导航的颜色，然后建议将当前动作的图标和文本变为黑色或白色。 There are two additional properties, 有两个附加属性，app:itemIconTint 和 app:itemTextColor，可以设置帽子来处理这个问题。 将它们直接设置为特定的颜色是您可能认为您想要做的事情，但最直接的问题会出现，它还将取消选择状态相同的颜色。例如，如果我设置了这三个属性：

点击(此处)折叠或打开

  1. android:background="@color/primary"
  2. app:itemIconTint="@android:color/white"
  3. app:itemTextColor="@android:color/white"

为了解决这个问题，我们只需要创建一个drawable文件夹选择器在我们的定义，将基于一个新的XML文件的状态颜色；我们叫做 nav_item_colors.xml:

点击(此处)折叠或打开

  1. ?xml version="1.0" encoding="utf-8"?>
  2. selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.   item android:state_checked="true" android:color="@android:color/white" />
  4.   item android:color="#80FFFFFF" />
  5. /selector>
现在，回到我们的BottomNavigationView，我们可以用新的颜色选择器：

点击(此处)折叠或打开

  1. android:background="@color/primary"
  2. app:itemIconTint="@drawable/nav_item_colors"
  3. app:itemTextColor="@drawable/nav_item_colors"

绝对可爱！



了解更多

了解更多关于android底部导航的知识，一定要通过阅读它的 材料设计指南 来了解所有的“清规戒律”。你也可以从我的GitHub repo你抓取全部样本以及其它导航的样品。


如果转载请保留出处或者联系我。