【教學】TabLayout與ViewPager的綜合應用

本篇主要是示範：
1. Android TabLayout與ViewPager的綜合應用。
2. 如何修改頁籤選中與未選中時的顏色。
3. 如何預設Tab在指定頁面。
4. 如何讓在頁籤超過螢幕長度時，可以滑動選擇頁籤。

首先Gradle要加入這行。
dependencies {
    compile 'com.android.support:design:24.0.0'
}

關於Gradle的部分，我一直搞不太懂一件事，就是'com.android.support:design:24.0.0'這一行的24，這應該是代表版本吧？在參考其他部落客寫的內容時，大多是寫22，而非24。但是Ray小編用22在跑時，結果怎麼跑都跑不起來。直到後來將版本改成跟Gradle裡compileSdkVersion一樣為24之後才跑成功。

所以如果跑失敗的話，別難過！參考你的compileSdkVersion改改看，說不定就會成功囉！
android {
    compileSdkVersion 24
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.ray.test.testingtablayout"
        minSdkVersion 16
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

Layout部分的配置。
File Name：activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
  
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@id/tabs"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
</RelativeLayout>
File Name：pager_item.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/item_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Page:"/>

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="80sp" />

</LinearLayout>

再來是Java檔的撰寫。
關於預設頁籤的部分，有一點要注意的是網路上的說法是說，在TabLayout.addTab(tab, boolean)或是TabLayout.addTab(tab, int, boolean)這兩個方法上面進行預設頁籤的動作。但是在這裡，因為使用到ViewPager的關係，因此預設頁籤的方法要改用ViewPager.setCurrentItem(int)來進行設定的動作。

再來是關於TabLayout.setTabMode(TabLayout.MODE_SCROLLABLE)這個方法，這個方法可以讓頁籤長度大於螢幕長度時，頁籤可以進行滑滾的動作。但是有一點要注意，就是當頁籤長度小餘螢幕長度時，頁籤無法配合螢幕長度，進行頁籤與螢幕等寬的長度設定哦！
File Name：MainActivity.java
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends Activity {

    private android.support.design.widget.TabLayout mTabs;

    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabs = (android.support.design.widget.TabLayout) findViewById(R.id.tabs);

        for(int i=0;i<10;i++)
            mTabs.addTab(mTabs.newTab().setText("Tab "+(i+1)));

        // The title of the page is black, when it is selected, else be gray
        mTabs.setTabTextColors(Color.GRAY, Color.BLACK);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new SamplePagerAdapter());
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabs));

        // Setting the default Tab
        mViewPager.setCurrentItem(2);

        // Making Tabs slipped, if length of tabs longer than the length of screen
        mTabs.setTabMode(TabLayout.MODE_SCROLLABLE);

        // The page show correct page, when the user click the Tab
        mTabs.setupWithViewPager(mViewPager);
    }

    class SamplePagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            // Setting maximum of Tabs
            return 10;
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return o == view;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // Setting title name of the Tab
            return "Item " + (position + 1);
        }


        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // Setting your content of page on the ViewPager
            View view = getLayoutInflater().inflate(R.layout.pager_item,
                    container, false);
            container.addView(view);
            TextView title = (TextView) view.findViewById(R.id.item_title);
            title.setText(String.valueOf(position + 1));
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

    }
}

以下是此次示範的成果。