iT邦幫忙

2025 iThome 鐵人賽

0
Mobile Development

app學習實作經驗系列 第 25

Day 25:加入 Toolbar 與 BottomNavigation(實作多頁面切換)

  • 分享至 

  • xImage
  •  

今天嘗試加入Toolbar和BottomNavigation,實作出多頁面切換的效果。之前的App只有首頁一個畫面,現在我想讓使用者可以在不同頁面之間切換,例如「首頁」、「清單」和「個人資料」。

我先在主畫面的layout中加入一個BottomNavigationView,上面放三個項目:Home、List、Profile。再用Fragment來代表不同頁面。這樣就不需要一直用Intent跳轉,而是直接切換Fragment,比較順暢也更像真實的App架構。上方我也加了一個Toolbar,顯示目前的頁面名稱,看起來更有層次。

一開始我被Fragment切換的程式碼卡了一下,因為replace()跟add()搞混,導致畫面疊在一起。不過修正後就能正常切換了,還能改變BottomNavigation選中項目的顏色。完成後整個App看起來瞬間升級,像是有「多功能首頁」的感覺。

今天做完我學到,UI架構不只是擺元件,更重要的是整體使用流程。加上Toolbar和BottomNavigation之後,整體操作變得更自然,我也更清楚一個App是怎麼組成的。


上一篇
Day 24:在首頁新增一個清單頁(RecyclerView + 假資料)
下一篇
Day 26:加入簡單 API(用 Retrofit 讀取假資料 API)
系列文
app學習實作經驗30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言