Android基礎控制項——TabLayout的使用、仿愛奇藝導航條

標籤：理解   tail   href   The   整合   需要   建立   apt   設定   

學習，學習，學以致用，讓基礎控制項貼近實戰效果

TabLayout是Google新推出的Material Design的控制項之一，TabLayout的使用必須結合ViewPager和Fragment的使用，如果對ViewPager不熟悉的同學，請自行查閱資料，很簡單的。我們來看下愛奇藝導航條的原效果

我們今天要實現的，在真機上運行效果會更接近原圖

由於TabLayout是Material Design中的控制項之一，整合它需要在Gradle檔案中添加依賴庫，由於我的compileSdkVersion為24，所以採用24的版本就不會提示錯誤

我不知道是我電腦項目中東西太多，還是Material Design本來就很大的庫，編譯的時候花了8分鐘

TabLayout需要和ViewPager一起使用，所以在TabLayout下面放置一個ViewPager

由於使用了TabLayout的自訂屬性，所以記得匯入資源

這裡對上面TabLayout的參數進行介紹

• tabIndicatorHeight：Tab指標下標的高度
• tabGravity：Tab內容的顯示模式
• tabMode：Tab的展示模式
  
  • fixed（預設）：固定的，標籤很多時候會被擠壓，不能滑動
  • scrollable：可滾動的，標籤多的時候可滾動
• tabIndicatorColor：Tab指標下標的顏色
• tabSelectedTextColor：Tab文字被選中的顏色
• tabTextColor：Tab文字的顏色

其實這些屬性都可以在代碼中設定，不過為了代碼的閱讀性和美觀，所以將屬性設定都在布局檔案中實現

找到對應的控制項，並添加對應的Tab和Fragment

可以發現，建立Tab都是通過聲明的該TabLayout產生的，這裡我們採用的是進階for迴圈遍曆

然後通過TabLayout的setupWithViewPager()方法綁定一個ViewPager，記得ViewPager是要有東西的，所以需要一個Adapter，ViewPager的使用和ListView大同小異，如果對ViewPager不懂的同學，請先學習ViewPager後再來理解

下面我們可以建立很多個不同的Fragment來跟我們的標籤綁定，這裡為了方便示範，所以只建立同一個Fragment

這裡有個方法需要注意：需要重寫getPageTitle()方法來為TabLayout的Tab添加上文字，否則會顯示不出來文字，這也是為什麼我們需要在構造方法中傳進來List< String> strings，其他的與ListView的Adapter大同小異

部分源碼下載

到這裡的課程就結束，如果對基礎控制項感興趣的朋友可以關注我部落格的基礎控制項系列

Android基礎控制項——TabLayout的使用、仿愛奇藝導航條