# TabLayout + ViewPager

###### tags: `Tag(Android 技術相關)`
[TOC]

## 步驟1：在 Layout 創建 TabLayout, ViewPager

### TabLayout 選用屬性

* app:tabMode：tabMode有兩種
* **scrollable**：當Tab過多無法顯示在畫面中時，可以左右滾動看其他的Tab，不會全部擠進畫面中
* **fixed**：會把所以Tab都塞到畫面中，若有太多Tab會導致看不出來那個Tab名稱
* app:tabGravity：tabGravity有兩種
* **center**：將Tab置中顯示，當Tab少的時候，左右會有空白
* **fill**：平均填滿畫面

* tabIndicatorColor：指標顏色，也就是 selected Tab 的底線顏色
* tabSelectedTextColor：selected Tab 的字體顏色
* tabTextColor：未選中的 Tab 的字體顏色

---

## 步驟2：在相對應的 Java class 實作 TabLayout, ViewPager

### ViewPager 需要一個自己的 **PagerAdapter**
* PagerAdapter:

* 子類繼承PagerAdapter需要實現方法說明
* Object instantiateItem(ViewGroup container, int position)
對顯示的資源進行初始化

* void destroyItem(ViewGroup container, int position, Object object)
銷毀資源

* isViewFromObject(View view, Object object)
來判斷顯示的是否是同一個視圖

* PagerAdapter原理
* ViewPager來控制一頁界面構造和銷毀的時機，使用回調來通知PagerAdapter具體做什麼，PagerAdapter只需要按照相應的步驟做。當然為了使用得更好、提供更多的功能，又建議了使用View的回收工作和管理工作，同時提供當數據改變時的界面刷新工作。

* FragmentPagerAdapter：
* **getCount()**
* **getPageTitle(int position)**：取得相對的tab 標題
* **getItem(int position)**：每一個position對應到自己的Fragment page

* FragmentStatePagerAdapter：
* **getCount()**
* **getItem(int position)**：很像 createItem，用來產生一個新的 Fragment

## 三種Adapter的緩存策略

* **PagerAdapter**：緩存三個，通過重寫instantiateItem和destroyItem達到創建和銷毀view的目的。
* **FragmentPagerAdapter**：內部通過FragmentManager來持久化每一個Fragment，在destroyItem方法調用時只是detach對應的Fragment，並沒有真正移除！
* **FragmentPagerStateAdapter**：內部通過FragmentManager來管理每一個Fragment，在destroyItem方法，調用時移除對應的Fragment。

## 三個Adapter使用場景分析

* **PagerAdapter**：當所要展示的視圖比較簡單時適用
* **FragmentPagerAdapter**：當所要展示的視圖是Fragment，並且數量比較少時適用
* **FragmentStatePagerAdapter**：當所要展示的視圖是Fragment，並且數量比較多時適用

---

### ViewPager 方法整理
* setAdapter(pagerAdapter)：如同上面提到的，ViewPager 需要一個自己的 PagerAdapter
* setCurrentItem()：設定被選擇的 ViewPager 相對應的 Page
* addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener()：監聽ViewPager的頁面切換，當頁面切換時TabLayout的標籤跟著切換

### TabLayout 方法整理

* addTab(tabLayout.newTab().setText(""))：設定 Tab 標題內容
* addOnTabSelectedListener(new TabLayout.OnTabSelectedListener...)：監聽TabLayout的標籤選擇，當標籤選中時ViewPager切換
* 需實作3個方法：
* onTabSelected：通常只會用到這個方法
* onTabUnselected
* onTabReselected
* setupWithViewPager(viewPager)：將 Tab 和 ViewPager 綁在一起

---

## 參考網址：
### https://ironglion.com/archives/android-viewpager-%E5%92%8C-tablayout/
### https://spicyboyd.blogspot.com/2018/04/appandroid-tablayout-with-viewpager.html
### https://juejin.im/post/5d401cabf265da03a53a12fe