今天嘗試加入Toolbar和BottomNavigation,實作出多頁面切換的效果。之前的App只有首頁一個畫面,現在我想讓使用者可以在不同頁面之間切換,例如「首頁」、「清單」和「個人資料」。
我先在主畫面的layout中加入一個BottomNavigationView,上面放三個項目:Home、List、Profile。再用Fragment來代表不同頁面。這樣就不需要一直用Intent跳轉,而是直接切換Fragment,比較順暢也更像真實的App架構。上方我也加了一個Toolbar,顯示目前的頁面名稱,看起來更有層次。
一開始我被Fragment切換的程式碼卡了一下,因為replace()跟add()搞混,導致畫面疊在一起。不過修正後就能正常切換了,還能改變BottomNavigation選中項目的顏色。完成後整個App看起來瞬間升級,像是有「多功能首頁」的感覺。
今天做完我學到,UI架構不只是擺元件,更重要的是整體使用流程。加上Toolbar和BottomNavigation之後,整體操作變得更自然,我也更清楚一個App是怎麼組成的。