Day.18 學習XML 大師菁英班 - 增加分頁 3

15th鐵人賽

星星

團隊三個資安仔中出了一個間諜

2023-10-03 14:50:27

282 瀏覽

分享至

正文

程式時間

接下來是快樂的撰寫切換分頁的程式碼時間，需要透過 binding 來偵測我們的 BottomNavigationView 被選擇的 item 是哪一個，然後去呼叫

看到 res/menu/menu.xml，我們需要給每 item 一個 id 方便呼叫，程式碼如下：

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

回到 java/MainActivity，使用 setOnItemSelectedListener 讓我們知道是哪個 item 被點擊了，程式碼如下：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.bottomNavigationView.setOnItemSelectedListener { menuItem->
        when(menuItem.itemId){ // 功能跟 case 一樣，差別只有這是 Kotlin 的寫法
            R.id.home_item->{
                true
            }
            R.id.setting_item->{
                true
            }
            R.id.about_item->{
                true
            }
            else->false
        }
    }
}

接下來我們需要寫一個 methon 用來做 fragment 的切換，這邊先到 activity_main.xml 給 FrameLayout 一個 id

<FrameLayout
    android:id="@+id/frame_layout"
    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>

再回到 java/MainActivity 寫我們可愛的 methon，需要宣告兩個變數一個是 FragmentManager 用來操作 Fragment 以及 FragmentTransaction 做切換，最後用到 replace，將原本的 Fragment 用取代的方式切換成新的頁面，程式碼如下：

private fun replaceFragment(fragment:Fragment){
    val fragmentManager:FragmentManager = supportFragmentManager
    val fragmentTransaction:FragmentTransaction = fragmentManager.beginTransaction()
    fragmentTransaction.replace(R.id.frame_layout,fragment)
    fragmentTransaction.commit()
}

methon 寫完後，就可以在剛剛的 when 裡面加入 replaceFragment ，參數是呼叫 java 檔裡我們新增的三個 Fragment，程式碼如下：

when(menuItem.itemId){
    R.id.home_item->{
        replaceFragment(HomeFragment())
        true
    }
    R.id.setting_item->{
        replaceFragment(SettingFragment())
        true
    }
    R.id.about_item->{
        replaceFragment(AboutFragment())
        true
    }
    else->false
}

最後我們要記得一件很重要的事情，初始畫面是 Home，所以在程式的前面也要記的初始化初始畫面

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    replaceFragment(HomeFragment()) // 加入這行

		/.../
}

美化 BottomNavigationView

為了補償各位所以今天加碼！我們來學怎麼讓畫面變漂亮，作法來自參考資料最下面的 YT 連結，大家也可以去看看。

首先我們要新增一些素材，在 values/colors.xml 新增一個顏色作為 bottom 的底色和沒有被選到時的顏色，大家可以根據色碼表選一個喜歡的顏色，這是我的範例：
```
<color name="bottom_backgroundColor">#5A5AAD</color>
<color name="bottom_unclick">#d2d2d2</color>
```
然後新增一個 bottom 的背景，對 drawable 點擊右鍵，在 New 裡選擇 Drawable Resource File
name 取一個喜歡的名字，Root element 填入 shape，我們希望它是一個形狀，點擊 OK
再新增一個針對 item 的設定，對 drawable 點擊右鍵，在 New 裡選擇 Drawable Resource File
name 取一個喜歡的名字，點擊 OK

我們要寫當 item 被選擇時以及沒有被選擇時的設定，這邊主要修改只有顏色，程式碼如下：

<item
    android:state_selected="true"
    android:color = "@color/white"/>
<item
    android:state_selected="false"
    android:color = "@color/bottom_unclick"/>

素材準備完成後，回到 activity_main.xml，開始進行一些神奇的改造，大家可以一行一行加，然後看看畫面的變化，非常有趣，程式碼如下：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_background"
    android:layout_marginEnd="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginBottom="30dp"
    android:layout_marginTop="30dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="parent"
    app:menu="@menu/menu"
    app:itemIconSize="30dp"
    app:itemIconTint="@drawable/item_selector"
    app:itemRippleColor="@android:color/transparent"
    app:labelVisibilityMode="unlabeled"/>