紀錄自己的程式人生

開發平台：

Android studio(version 2.2.3)

測試平台：

ASUS Zenfone6(android 5)

實作內容：

做出底部的導航列。P.s.下方導航列最多只能有5個。

Step1 新增相依姓(新增完後要記得按右上角的Sync now)。

compile 'com.android.support:design:25.2.0'

Step2 到activity_main.xml中新增BottomNavigation。

xmlns:app="http://schemas.android.com/apk/res-auto"，是為了相容舊系統。

app:menu="@menu/自己定義menu的xml檔"。

xmlns:app="http://schemas.android.com/apk/res-auto"
<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_main"
        android:layout_alignParentBottom="true"/>

Step3 在drawable中新增按鈕icon。

Step3-1 drawable資料夾(按右鍵)→New→Image Asset。

Step3-2

Icon Type：選擇 Action Bar and Tab Icons。

Name：Icon名稱(自己取)。

Asset Type：選擇Clip Art(Image：選擇自己上傳的圖片、Text：純文字)。

Clip Art：選擇Icon圖樣(Step3-3)。

剩下的選項可以再對Icon做細部的調整。

Step3-3 選擇圖示。

Step3-4 選擇完後按Next→Finish。

Step4 新增BottomNavigation中的選項。

Step4-1 res右鍵→New→Android resource diectory(新增menu)。

Step4-2 menu右鍵→New→Menu file resource(新增menu file resource)。

Step4-3 menu resource file。

android:icon="@drawable/Step3-2所製作出來icon的名子"。

android:title="icon標題"。

<?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_home"
        android:enabled="true"
        android:icon="@drawable/ic_home"
        android:title="首頁"
        />
</menu>

Step5 主程式寫法。

BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener(){
       @Override
        public boolean onNavigationItemSelected(MenuItem item){
          //do something
           return true;
        }
});

測試畫面：

更新(20170806)：

因為BottomNavigation如果超過3個按鈕就會像上面的瀏覽圖，按鈕會往旁邊移，如果不要這個功能可以在MainActivity中新增程式碼把它關掉。

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
try {
  Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
  shiftingMode.setAccessible(true);
  shiftingMode.setBoolean(menuView, false);
  shiftingMode.setAccessible(false);

  for (int i = 0; i < menuView.getChildCount(); i++) {
    BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
    itemView.setShiftingMode(false);
    itemView.setChecked(itemView.getItemData().isChecked());
  }
} catch (NoSuchFieldException e) {
    Log.d("NoSuchFieldException","error");
} catch (IllegalAccessException e) {
    Log.d("IllegalAccessException","error");
}

程式碼：

https://github.com/shen0512/BottomNavigationBar