Tablayout + Viewpager + Fragment 联动显示

效果图：

上面是tablayout,下面是viewpager(嵌套fragment)

首先导入依赖

[html] view plain copy

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

整体布局fragment_manageleft.xml,上面tablayout,下面fragment

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns: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.   
8.     <android.support.design.widget.TabLayout  
9.         android:id="@+id/tab_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="60dp"  
12.         app:tabGravity="center"  
13.         app:tabIndicatorColor="#FF995B"  
14.         app:tabMode="scrollable"  
15.         app:tabSelectedTextColor="#FF995B"  
16.         app:tabTextAppearance="@style/tablayout_ziti"  
17.         app:tabTextColor="#9A9A9A" />  
18.   
19.     <android.support.v4.view.ViewPager  
20.         android:id="@+id/view_pager"  
21.         android:layout_width="match_parent"  
22.         android:layout_height="0dp"  
23.         android:layout_weight="11" />  
24. </LinearLayout>  

上述布局中控制tablayout字体大小的文件,需要在values-styles.xml里面加入样式

放上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>

接着是ManageLeftFragment.java的代码,我这里只展示了两个fragment,除了第一个tablayout标签不一样外,其余的tablayout标签都用的一个fragment显示

[html] view plain copy

1. public class ManageLeftFragment extends Fragment {  
2.   
3.     @BindView(R.id.tab_layout)  
4.     TabLayout tabLayout;  
5.     @BindView(R.id.view_pager)  
6.     ViewPager viewPager;  
7.     Unbinder unbinder;  
8.   
9.     @Nullable  
10.     @Override  
11.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
12.         View view = inflater.inflate(R.layout.fragment_manageleft, container, false);  
13.   
14.         unbinder = ButterKnife.bind(this, view);  
15.   
16.         final List<String> list = new ArrayList<>();  
17.   
18.        //添加4条数据,作为tablayout标签  
19.         list.add("待审核");  
20.         list.add("待支付");  
21.         list.add("待参加");  
22.         list.add("已完成");  
23.   
24.         //设置viewpager可以预加载全部的页数,,不会销毁其他的页面  
25.         viewPager.setOffscreenPageLimit(list.size());  
26.         viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {  
27.   
28.             private ZongYiFragment zongYiFragment;  
29.             private QuanbuFragment quanbuFragment;  
30.   
31.             @Override  
32.             public CharSequence getPageTitle(int position) {  
33.                 return list.get(position);  
34.             }  
35.   
36.             @Override  
37.             public Fragment getItem(int position) {  
38.   
39.                 if (position == 0) {  
40.                     //当选中第一个tablayout标签时候,展示这个fragment  
41.                     quanbuFragment = new QuanbuFragment();  
42.                     return quanbuFragment;  
43.                 } else {  
44.                     //选中其他tablayou标签时候,展示这个fragment  
45.                     zongYiFragment = new ZongYiFragment();  
46.                     return zongYiFragment;  
47.                 }  
48.             }  
49.   
50.             @Override  
51.             public int getCount() {  
52.                 return list.size();  
53.             }  
54.         });  
55.   
56.         //设置tablayout和viewpager联动  
57.         tabLayout.setupWithViewPager(viewPager);  
58.         return view;  
59.   
60.     }  
61.   
62.   
63.     @Override  
64.     public void onDestroyView() {  
65.         super.onDestroyView();  
66.         unbinder.unbind();  
67.     }  
68. }