关于tablayout+viewpager+fragment配合使用的一点记录

最近在写项目的时候遇到要求使用tablayout和fragment，遇到了这里记录一下大致思路。

tablayout是头部可以左右切换的头部控制栏控件，配合viewpager使用，fragment是碎片，可以放在viewpager里面，实现类似网易云音乐首页切换的效果。效果图如下：

首先添在build.gradle里面添加依赖：

     implementation 'com.android.support:support-v4:28.0.0'
     implementation 'com.android.support:design:28.0.0'

然后在布局文件里写好tablayout和viewpager

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true"
     tools:openDrawer="start">

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <android.support.v7.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             android:background="#06a5fa"
             app:popupTheme="@style/AppTheme.PopupOverlay" />

           <android.support.design.widget.TabLayout
               android:id="@+id/Tablayout"
               app:tabBackground="@android:color/white"
               app:tabIndicatorColor="@color/colorAccent"
               app:tabTextColor="@android:color/black"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"/>

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

     <include
         app:layout_behavior="@string/appbar_scrolling_view_behavior"
         layout="@layout/app_bar_main"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

     <android.support.design.widget.NavigationView
         android:id="@+id/nav_view"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         android:fitsSystemWindows="true" />

 </android.support.v4.widget.DrawerLayout>

由于tablayout只是项目要求中的一个，所以代码中有一些其他的布局文件，重点看tablayout和viewpager

然后首先在activity里面初始化控件和两个list还有要用到的fragment：

        private TabLayout tabLayout;
        private ViewPager viewPager;

         private ArrayList<String> TitleList = new ArrayList<>();  //页卡标题集合
         private ArrayList<Fragment> ViewList = new ArrayList<>();   //页卡视图集合
         private Fragment all_Fragment,recent_Fragment,like_Fragment;  //页卡视图    

titlelist用来储存tab的标题，viewlist用来储存视图，剩下的三个fragment就是我们要呈现的视图，当然上面代码中的三个fragment是我继承fragment后自己重写的，代码如下：

 public class All_Fragment extends Fragment {

     private View rootView;
     private RecyclerView recyclerView;
     private SwipeRefreshLayout swipeRefreshLayout;
     private StringBuilder response;
     List<Map<String,Object>> list=new ArrayList<>();

     private int flag;
     public static final int GET_DATA_SUCCESS = 1;
     private String id;
     private String thumbnail;
     private String description;
     private String name;

     @Override
     public void onAttach(Context context){
         super.onAttach(context);
     }

     @Override
     public View onCreateView(@Nullable LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
         rootView = inflater.inflate(R.layout.activity_all_column_,container,false);
                 initUi();
         return rootView;
     }

     private void initUi(){
            //这里写加载布局的代码
     }

     @Override
     public void onActivityCreated(Bundle savedInstanceState){
         super.onActivityCreated(savedInstanceState);
              //这里写逻辑代码
44             }
45     }

篇幅原因，这里只贴一个fragment的代码，另外两个类似.

上述工作完成之后，在activity的oncreate方法中找到我们在布局文件xml中定义的控件：

 //首先找到tablayout控件和view pager控件
         tabLayout = findViewById(R.id.Tablayout);
         viewPager = findViewById(R.id.Viewpager);

然后将fragment在后面new出来：

         all_Fragment = new All_Fragment();
         recent_Fragment = new Recent_Fragment();
         like_Fragment = new Like_Fragment();

然后将fragment添加到页卡视图的集合里面去：

  //添加页卡视图
         ViewList.add(all_Fragment);
         ViewList.add(recent_Fragment);
         ViewList.add(like_Fragment);

将想要设置的tab标题添加到titlelist：

 //添加页卡标题
         TitleList.add("栏目总览");
         TitleList.add("热门消息");
         TitleList.add("我的收藏");

设置tab的显示模式并添加tab选项卡：

         //设置tab模式
         tabLayout.setTabMode(TabLayout.MODE_FIXED);
         //添加tab选项卡
         tabLayout.addTab(tabLayout.newTab().setText(TitleList.get(0)));
         tabLayout.addTab(tabLayout.newTab().setText(TitleList.get(1)));
         tabLayout.addTab(tabLayout.newTab().setText(TitleList.get(2)));

设置viewpager的adapter并与tab绑定：

 //设置adapter
         viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()){

             //获取每个页卡
             @Override
             public android.support.v4.app.Fragment getItem(int position){
                 return ViewList.get(position);
             }

             //获取页卡数
             @Override
             public int getCount(){
                 return  TitleList.size();
             }

             //获取页卡标题
             @Override
             public CharSequence getPageTitle(int position){
                 return TitleList.get(position);
             }
                              });

         //tab与viewpager绑定
         tabLayout.setupWithViewPager(viewPager);

这样大致框架就搭建好了，想要实现的具体内容可以写在fragment里面，下面是我简单加载图片后的效果：

菜鸟一枚，有什么错误的地方请多指正，感激不尽！