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

本篇主要是示範：
1. Android TabLayout、ViewPager與FragmentLayout的綜合應用。
2. 如何將頁籤位置改至底端。
3. 每個頁籤內的Activity，該如何取到來自TabLayout得值。
4. 如何在每個頁籤設定不同的Activity。

首先build.gradle(Module: app)要加入這行。
dependencies {
    compile 'com.android.support:design:24.2.1'
}

Layout部分的配置。
這裡要注意，如果要將頁籤放置底部的話，ViewPager必須在TabLayout的上方。簡單來說，TabLayout必須要擺放在LinearLayout裡面的最下方才會有置底的效果。
File Name：activity_main.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        />

</LinearLayout>

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檔的撰寫。
在MainActivity中，我設置了一個字串變數s，只要觀察程式碼中的s是如何傳值，就可以得知頁籤中的Activity該如何取值了。
File Name：MainActivity
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    // I did a test that the value, s, it can transport to other activities or not?
    String s = ".";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // ViewPager mixed with Fragment.
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this, s);
        viewPager.setAdapter(adapter);
//        viewPager.setCurrentItem(1);

        // TabLayout mixed with ViewPager.
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
}

跟另一篇教學「【教學】TabLayout與ViewPager的綜合應用」不同的地方，在於這裡的頁籤設定方式是先將頁籤的名稱設定在一個字串陣列中，然後才產生。Ray小編個人比較喜歡這種產生方式，讓人感覺十分容易管理。

此外，大家如果要幫不同的頁籤設定不同的Activity的話，必須要在getItem(int position)這個方法中設定才行。
File Name：MyFragmentPagerAdapter
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String test;
//    private Context context;

    // Setting your tabs
    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4"};


    public MyFragmentPagerAdapter(FragmentManager fm, Context context, String s) {
        super(fm);
        // Getting values from MainActivity
//        this.context = context;
        test = s;

    }

    @Override
    public Fragment getItem(int position) {
        // Setting your activity on each different tab,
        // and transporting other values that you want at here.
        return new PageFragment().newInstance(position+1, test);
    }

    @Override
    public int getCount() {
        return titles.length;
    }

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

這裡比較麻煩的是取值的問題，必須先在newInstance(int page, String test)這個方法中，將要取得的值先裝至一個Buddle中，然後再藉由getArguments()這個方法取值。
File Name：PageFragment
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PageFragment extends Fragment {
    public static final String ARGS_PAGE = "args_page";
    private int mPage;
    private String test;

    public static PageFragment newInstance(int page, String test) {
        Bundle args = new Bundle();

        // Getting values from MyFragmentPagerAdapter.
        // You have to set a key for using the value
        args.putInt(ARGS_PAGE, page);
        args.putString("ARGS_TEST", test);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Getting values with key.
        mPage = getArguments().getInt(ARGS_PAGE);
        test = getArguments().getString("ARGS_TEST");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.pager_item,container,false);
        TextView textView = (TextView) view.findViewById(R.id.item_title);
        textView.setText(mPage+test);

        return view;
    }

}

以下是此次示範的成果。