效果圖：

上面是tablayout,下面是viewpager(巢狀fragment)

首先匯入依賴

1. compile 'com.android.support:design:25.3.1'  

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:orientation="vertical">
7.     <android.support.design.widget.TabLayout
8.         android:id="@+id/tab_layout"
9.         android:layout_width="match_parent"
10.         android:layout_height="60dp"
11.         app:tabGravity
    ="center"
12.         app:tabIndicatorColor="#FF995B"
13.         app:tabMode="scrollable"
14.         app:tabSelectedTextColor="#FF995B"
15.         app:tabTextAppearance="@style/tablayout_ziti"
16.         app:tabTextColor="#9A9A9A"/>
17.     <android.support.v4.view.ViewPager
18.         android:id="@+id/view_pager"
19.         android:layout_width
    ="match_parent"
20.         android:layout_height="0dp"
21.         android:layout_weight="11"/>
22. </LinearLayout>

放上styles.xml,標紅部分是新增的樣式

<resources>

    <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="notitle" parent="Theme.AppCompat.Light.NoActionBar">
    </style>

    <style name="tablayout_ziti">
        <item name="android:textSize">17sp</item>
    </style>
</resources>

1. public class ManageLeftFragment extends Fragment {  
2.     @BindView(R.id.tab_layout)  
3.     TabLayout tabLayout;  
4.     @BindView(R.id.view_pager)  
5.     ViewPager viewPager;  
6.     Unbinder unbinder;  
7.     @Nullable  
8.     @Override  
9.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
10.         View view = inflater.inflate(R.layout.fragment_manageleft, container, false);  
11.         unbinder = ButterKnife.bind(this, view);  
12.         final List<String>list = new ArrayList<>();  
13.        //新增4條資料,作為tablayout標籤  
14.         list.add("待稽核");  
15.         list.add("待支付");  
16.         list.add("待參加");  
17.         list.add("已完成");  
18.         //設定viewpager可以預載入全部的頁數,,不會銷燬其他的頁面  
19.         viewPager.setOffscreenPageLimit(list.size());  
20.         viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {  
21.             private ZongYiFragment zongYiFragment;  
22.             private QuanbuFragment quanbuFragment;  
23.             @Override  
24.             public CharSequence getPageTitle(int position) {  
25.                 return list.get(position);  
26.             }  
27.             @Override  
28.             public Fragment getItem(int position) {  
29.                 if (position == 0) {  
30.                     //當選中第一個tablayout標籤時候,展示這個fragment  
31.                     quanbuFragment = new QuanbuFragment();  
32.                     return quanbuFragment;  
33.                 } else {  
34.                     //選中其他tablayou標籤時候,展示這個fragment  
35.                     zongYiFragment = new ZongYiFragment();  
36.                     return zongYiFragment;  
37.                 }  
38.             }  
39.             @Override  
40.             public int getCount() {  
41.                 return list.size();  
42.             }  
43.         });  
44.         //設定tablayout和viewpager聯動  
45.         tabLayout.setupWithViewPager(viewPager);  
46.         return view;  
47.     }  
48.     @Override  
49.     public void onDestroyView() {  
50.         super.onDestroyView();  
51.         unbinder.unbind();  
52.     }  
53. }