1. 前提準備

今天回顧了下TabLayout與ViewPager的聯合使用，順便寫個demo來加深下理解。首先要明確TabLayout是design下的，並非系統原來的widget下的。所以首先在app下的build.gradle的dependencies閉包中加入如下引用：

compile 'com.android.support:design:26.0.0-alpha1'

2. 主介面的佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

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

</LinearLayout>
 

其中，android.support.design.widget.TabLayout標籤中有個app:tabMode屬性，值為scrollable表示可滑動；fixed表示固定不可滑動。預設是不可滑動。

3. Java程式碼中

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

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

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        init();
}

    private void init() {

        //初始化標題資料
        List<String> titles = new ArrayList<>();
        titles.add("新聞");
        titles.add("視訊");
        titles.add("音樂");

        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }

        //初始化Fragment資料
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new NewsListFragment());
        fragments.add(new VideoListFragment());
        fragments.add(new MusicListFragment());

        //給ViewPager設定介面卡
        mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments,titles));
        //將TabLayout與ViewPager關聯起來
        mTabLayout.setupWithViewPager(mViewPager);
    }
}
 

其中，初始化了3個標題，並建立了相應的TabLayout和Fragment,給ViewPager設定了介面卡，並將TabLayout與ViewPager關聯起來。

4. 條目Fragment

為了完善效果演示，對每個Fragment進行了簡單的初始化：

public class VideoListFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_video_list, container, false);
    }
}
 

注：VideoListFragment繼承的Fragment是android.support.v4.app.Fragment包下的。

VideoListFragment的佈局如下：

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="這是視訊介面"
        android:textSize="24dp" />

</LinearLayout>

NewsListFragment和MusicListFragment()與VideoListFragment類似，這裡就不重複敘述。

5. Demo執行效果圖如下所示：