TabLayout配合ViewPager

之前都習慣用RadioGroup配合ViewPager做頁面切換，官方是我TabLayout倒是用的很少，記錄下使用。

佈局：

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:navigationIcon="@mipmap/back_ib"
        app:subtitleTextColor="@color/white"
        app:title="Palette"
        app:titleTextColor="@color/white"
        >
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/toolbar_tab"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:fillViewport="false"
        app:layout_scrollFlags="scroll"
        app:tabIndicatorColor="#0835f8"
        app:tabIndicatorHeight="2.0dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="#090e21">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="主頁"/>

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="分享"/>

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="收藏"/>

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="關注"/>

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="微博"/>


    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>

app:tabIndicatorColor=”#0835f8” //該屬性下方滾動條顏色
app:tabIndicatorHeight=”2.0dp” //滾動條高度

viewpager中我們使用已經定義的behavior來關聯Tablayout
app:layout_behavior=”@string/appbar_scrolling_view_behavior”

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

代碼中：

 toolbar_tab = (TabLayout) findViewById(R.id.toolbar_tab);
        main_vp_container = (ViewPager) findViewById(R.id.main_vp_container);

        PaletteViewPagerAdapter vpAdapter = new PaletteViewPagerAdapter(getSupportFragmentManager(), this);
        main_vp_container.setAdapter(vpAdapter);
        toolbar_tab.setupWithViewPager(main_vp_container);//關聯

效果圖：