Material Design > TabLayout篇

開發工具：Android Studio

TabLayout 是 Google 針對 Material Design 所出的其中一個套件，在這裡想介紹大家如何去使用。

因為 Design 並未內建在 SDK 中，所以我們要掛個 Library

首先在 Gradle 中加入

1. 
   
2. compile "com.android.support:appcompat-v7:23.0.1"
   
3. compile "com.android.support:design:23.0.1"
   

複製代碼

先看一下 XML 的擺放方式

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>
   
3. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
   
5.     android:id="@+id/main_content"
   
6.     android:layout_width="match_parent"
   
7.     android:layout_height="match_parent"
   
8.     android:fitsSystemWindows="true">
   
9. 
   
10.     <android.support.design.widget.AppBarLayout
    
11.         android:id="@+id/appbar"
    
12.         android:layout_width="match_parent"
    
13.         android:layout_height="wrap_content"
    
14.         android:theme="@style/AppTheme.AppBarOverlay">
    
15. 
    
16.     <android.support.v7.widget.Toolbar
    
17.         android:id="@+id/toolbar"
    
18.         android:layout_width="match_parent"
    
19.         android:layout_height="?attr/actionBarSize"
    
20.         android:background="?attr/colorPrimary"
    
21.         app:popupTheme="@style/AppTheme.PopupOverlay"/>
    
22. 
    
23.         <android.support.design.widget.TabLayout
    
24.             android:id="@+id/tabs"
    
25.             android:layout_width="match_parent"
    
26.             android:layout_height="wrap_content"
    
27.             android:background="@android:color/white"
    
28.             app:layout_scrollFlags="scroll|enterAlways"
    
29.             app:tabMode="scrollable"
    
30.             app:tabTextAppearance="?android:attr/textAppearanceMedium" />
    
31. 
    
32.     </android.support.design.widget.AppBarLayout>
    
33. 
    
34.     <android.support.v4.view.ViewPager
    
35.         android:id="@+id/viewpager"
    
36.         android:layout_width="match_parent"
    
37.         android:layout_height="match_parent"
    
38.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
39. 
    
40. </android.support.design.widget.CoordinatorLayout>
    

複製代碼

這邊說明一下 CoordinatorLayout 以及 AppBarLayout，這兩個元件也是 Material Design 的相關效果。我在 ViewPager 的地方放了

1. app:layout_behavior="@string/appbar_scrolling_view_behavior"

複製代碼

宣告 AppBarLayout 的行為主要是根據 ViewPager，所以當 ViewPager 的畫面在 Scroll 的時候，上方的 AppBarLayout 就會根據我的其它設定而動作。

大家可以看到，我在 TabLayout 放了

1. app:layout_scrollFlags="scroll|enterAlways"

複製代碼

表示當畫面在 scroll 的時候， TabLayout會跟著 scroll，但卻不會消失在畫面上，會一直固定在最上方。

Toolbar 的部份我沒有下，就代表當畫面在 scroll 的時候，Toolbar 是會消失的。

如果你有實作，你就會知道我在說什麼了，哈。

另外我們來看看 TabLayout 的屬性

1. app:tabMode="scrollable"

複製代碼

這是代表 Tablayout 可以 scroll 的，當 tab 很多的時候就會有效果，另外也可以下 fix 的模式唷。

再來就跟大家說要怎麼生成內容呢？其實 TabLayout 是跟 ViewPager 綁在一起的唷，所以...

1. 
   
2.         ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
   
3.         TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
   
4. 
   
5.         // 為 viewpager 建立 adapter
   
6.         Adapter adapter = new Adapter(getSupportFragmentManager());
   
7.         viewPager.setAdapter(adapter);
   
8.         // TabLayout 綁定 viewpager
   
9.         tabLayout.setupWithViewPager(viewPager);
   
10. 
    
11.         // 生成內容，這邊隨便寫的，請按造你自己的需求去修改
    
12.         for (int i = 0; i < 5; i++) {
    
13.             HashMap<String, Object> object = new HashMap<String, Object>();
    
14.             object.put("title", "title"+Integer.toString(i));
    
15.             adapter.addFragment(new GameSumFragment(), object);
    
16.         }
    
17. 
    
18.         // Adapter 實作的 class
    
19.     class Adapter extends FragmentStatePagerAdapter {
    
20.         private final List<Fragment> mFragments = new ArrayList<>();
    
21.         private final List<HashMap<String, Object>> mFragmentList = new ArrayList<>();
    
22.         private FragmentManager fragmentManager;
    
23. 
    
24.         public Adapter(FragmentManager fm) {
    
25.             super(fm);
    
26.             fragmentManager = fm;
    
27.         }
    
28. 
    
29.         public void addFragment(Fragment fragment, HashMap<String, Object> map) {
    
30.             Bundle bundle = new Bundle();
    
31.             bundle.putString("title", map.get("title").toString());
    
32.             fragment.setArguments(bundle);
    
33.             mFragments.add(fragment);
    
34.             mFragmentList.add(map);
    
35.         }
    
36. 
    
37.         @Override
    
38.         public Fragment getItem(int position) {
    
39.             return mFragments.get(position);
    
40.         }
    
41. 
    
42.         @Override
    
43.         public int getCount() {
    
44.             return mFragments.size();
    
45.         }
    
46. 
    
47.         @Override
    
48.         public CharSequence getPageTitle(int position) {
    
49.             HashMap<String, Object> map = mFragmentList.get(position);
    
50.             return map.get("title").toString();
    
51.         }
    
52.     }
    

複製代碼