目錄

1. 新增物件
2. 新增 menu
3. 新增 icon

正文

新的一天我們創建一個新專案，今天會帶著大家一步一步創分頁，今天的目標是三個分頁，分別是主頁、說明以及設定

新增物件

1. 打開 activity_main.xml 把 TextView 刪掉
2. 看到 Palette 點擊 Containers，拖曳 BottomNavigationView 到畫面上
   • BottomNavigationView 底部選單，最多支援五個項目
3. 看到 Palette 點擊 Layouts，拖曳 FrameLayout 到 Component Tree 的 ConstraintLayout 上，為甚麼不拉到畫面上呢，因為 FrameLayout 會變成 BottomNavigationView 的子物件，所以我們直接拉到 Component Tree 來避免這件事
   • FrameLayout 框架布局，最特別的是在這佈局中，元件可以疊在一起並且有層級關係
4. 接下來設定約束布局，以下是程式碼

   <FrameLayout
       android:layout_width="0dp"
       android:layout_height="0dp"
       app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
   </FrameLayout>
   
   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottomNavigationView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="parent" />
   

新增 menu

1. 接下來我們需要新增一個資料夾放分頁資料，對 res 資料夾點擊右鍵，選擇 New Resource Directory，name 取為 menu，type 選擇 menu，按下 OK
2. 再對著 menu 資料夾點擊右鍵，選擇 New Resource file，name 取為 menu，按下 OK，就會看到一個建好的資料夾有一個 XML 的檔案
   
3. 點擊 menu.xml，我們要新增三個 item，所以拖曳三個 Menu Item 到畫面上
   
4. 到 code 這邊，我們分別把三個 item 的 title 改成 Home、Setting、About

   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="Home" />
   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="Setting" />
   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="About" />
   

5. 有了 item 後，回到 activity_main.xml，我們要將 menu 加到 BottomNavigationView，我們加入最下面那行的程式，畫面就會出現分頁的選單了

   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottomNavigationView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="parent"
       app:menu="@menu/menu"/>
   

新增 icon

到這邊大家應該會覺得怪怪的，為甚麼文字那麼小，因為身為一個優秀的 Android 程式，我們需要可愛的 icon，所以我們要在 drawable 這個素材資料夾中引入圖片

1. 對 drawalbe 點擊右鍵，選擇 Vector Asset
2. 點擊 Clip art 選擇自己想要的 icon 圖案，取一個喜歡的名字，按下 Next，再按下 Finish 即可
   
3. 如果沒有找到自己喜歡的圖案可以選擇自己上傳 SVG 或 PSD 檔，這裡提供一個網站icons8給大家下載 SVG 檔，點擊 Path，然後選擇自己下載的檔案即可
   
4. 最後我們回到 menu.xml，三個 item 加入 icon 參數

   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="Home"
       android:icon="@drawable/ic_home"/>
   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="Setting"
       android:icon="@drawable/ic_setting"/>
   <item
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:title="About"
       android:icon="@drawable/ic_about"/>
   

5. 執行結果
   

總結

這邊主要是看了參考資料中第一個連結的影片一步一步做出來的，我花了很多時間找資料，但只有這個影片我覺得最清楚好懂（開字幕勉強能聽懂），一定是前兩天放假的報應，今天花超級久時間QwQ。

這邊篇主要處理的只有畫面呈現，下一篇會把切換頁面的程式碼做完！

雖然不清楚原因，但我在測試的時候有報錯，大意是我的 APK 版本太低，我的處理方法是照著這個網站做，如果有人也有遇到類似的問題，可以參考看看。

參考資料

Bottom Navigation Bar - Android Studio | Fragments | Java | 2023
https://www.youtube.com/watch?v=jOFLmKMOcK0

Android Layout 五大佈局（FrameLayout–框架佈局）
https://fiend1120.pixnet.net/blog/post/191809836

[Android Studio菜鳥的學習分享]UI分享(二) - BottomNavigationView
https://ithelp.ithome.com.tw/articles/10248865