【APP/Android】如何製作分頁 TabLayout with ViewPager，可滑動換頁

tags: APP Android

步驟1：在 View 創建 TabLayout, ViewPager

TabLayout 選用屬性

• tabMode
  • fixed：TabLayout 只有螢幕範圍的大小，不能超出螢幕邊界
  • scrollable：TabLayout 中當 Tab 超出螢幕邊界時，將提供滑動以顯示看不到的 Tab
• tabIndicatorColor：指標顏色，也就是 selected Tab 的底線顏色
• tabSelectedTextColor：selected Tab 的字體顏色
• tabTextColor：其他 Tab 的字體顏色
  

Example 範例

<LinearLayout
    ...> 

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_blue_light"
        app:tabSelectedTextColor="@android:color/black"
        app:tabTextColor="@android:color/darker_gray"
        app:tabMode="scrollable"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</LinearLayout>

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

ViewPager 需要一個自己的 PagerAdapter

• PagerAdapter 種類：
  • PagerAdapter (少用)
    • getCount()
    • isViewFromObject(View view, Object o)：來判斷顯示的是否是同一個視圖
    • instantiateItem(ViewGroup container, int position)：對顯示的資源進行初始化
    • destroyItem(ViewGroup container, int position, Object object)：PagerAdapter有一個緩存範圍，如果在滑動過程中超過了緩存範圍，就會調用這個方法，銷毀資源
  • FragmentPagerAdapter：頁面不會被回收，適合用於靜態頁面中
    • getCount()
    • getPageTitle(int position)：取得相對的tab 標題
    • getItem(int position)：每一個position對應到自己的Fragment page
  • FragmentStatePagerAdapter：沒使用的頁面會被回收，較適合用於多頁面
    • getCount()
    • getItem(int position)：很像 createItem，用來產生一個新的 Fragment

TabLayout 方法整理

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

ViewPager 方法整理

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

Example 範例

private String[] titles = getResources().getStringArray(R.array.example); // 也可以直接將標題寫在這
private List<ExampleFragment> fragmentList = new ArrayList<>(); // 要放入ViewPager的東西

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    
    // 設定 TabLayout
    for (String title : titles) {
        tabLayout.addTab(tabLayout.newTab().setText(title));
    }
    
    // 設定 ViewPager
    ExamplePagerAdapter pagerAdapter = new ExamplePagerAdapter(getSupportFragmentManager(), titles, fragmentList);
    viewPager.setAdapter(pagerAdapter);
    tabLayout.setupWithViewPager(viewPager);

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
        }
    });
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}

// 設定 PagerAdapter
private class ExamplePagerAdapter extends FragmentPagerAdapter{
    private List<ExampleFragment> fragmentList;
    private String[] titles;

    ExamplePagerAdapter(FragmentManager fm, String[] titles, List<ExampleFragment> fragmentList) {
        super(fm);
        this.titles = titles;
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

Reference 參考資料

1. TabLayout 展示圖片：http://www.tellmehow.co/add-android-badges-tab-layout/
2. Android Material Design TabLayout属性app:tabMode和app: tabGravity
   https://blog.csdn.net/zhangphil/article/details/48931483
3. TabLayout 官方文件
   https://developer.android.com/reference/android/support/design/widget/TabLayout.html
4. TabLayout－Design Library
   https://medium.com/@devwilly/tablayout-design-library-409497547f89
5. 如何使用 ViewPager + TabLayout
   http://givemepass.blogspot.tw/2016/07/viewpagertablayout_9.html
6. android之ViewPager介紹：http://www.itread01.com/articles/1475982946.html