關於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);
       32         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里面，下面是我簡單加載圖片后的效果：

 

菜鳥一枚，有什么錯誤的地方請多指正，感激不盡！