关于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里面，下面是我简单加载图片后的效果：

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