探索android的底部導航視圖

關于標簽是否應該放在屏幕頂部或底部的爭論已經持續了近十年。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 = FindViewById<Android.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 = FindViewById<BottomNavigationView>(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你抓取全部樣本以及其它導航的樣品。