[Android] 實現TabLayout依據ViewPager選取的頁面呈現不同的Icon

有許多APP都會使用ViewPager，使用者僅需螢幕左右滑動，就可以切換不同的功能需求，而絕大多數的都會有一個Tab列，來提示使用者目前於哪個功能區塊，如圖

Tab列的圖示會根據當前是否選取，而呈現不同的圖示，今天就來紀錄一下如何實做這個功能。

實作畫面

主要使用到ViewPager以及Google所提供的Design Support Library中提供的TabLayout。

要使用TabLayout，首先要在Gradle中加入Design Support Library。

此專案的Gradle文件

主畫面的Layout檔，ViewPager以及TabLayout

那要如何讓Icon隨著是否選取而改變呢? 透過Selector中的「android:state_selected」屬性可以輕鬆做到這項效果，當為true就是被選取時的狀態，要呈現的圖片，透過drawble來設置圖片的路徑，反之，flase就是為非選取的狀態。這邊只貼出一個的程式碼，大家可以舉一反三。
selector_one.xml

ViewPager所使用的Fragment Layout檔，這裡我使用三個不同的Fragment，由於十分類似，所以只貼出其中一個，而在真正實作上，各個Fragment所呈現的畫面大多都是不相同的。

ViewPager與Fragment做搭配所需要的FragmentAdapter，這邊我選擇使用FragmentPagerAdapter
FragmentList_One.java 如想要在各個Fragment實作各項功能，可以自行增加 MainActivity.java
完整專案:Solinari GitHub

Read More