TabLayout+Viewpager+Fragment实现分页滚动

效果如上，顶部标签滚动底下的页面也跟着滚动 灰色的标签只是一个recyclerview装起来的

这里用TabLayout+Viewpager+Fragment实现

先看布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f1f1f1"
                android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">

        <include layout="@layout/titlebar"/>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rl_title"
        android:background="@color/white"
        android:orientation="horizontal">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_weight="1"
            android:minHeight="45dp"
            app:tabMode="scrollable"
            app:tabIndicatorColor="@color/main_blue"
            app:tabSelectedTextColor="@android:color/black"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabTextColor="@android:color/darker_gray"/>

        <ImageView
            android:id="@+id/menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:src="@mipmap/icon_black_limit"/>

    </LinearLayout>


    <EditText
        android:id="@+id/et_search"
        android:layout_below="@+id/ll_tab"
        android:background="@drawable/shape_rec_white_bg"
        android:hint="请输入关键字搜索"
        android:paddingLeft="8dp"
        android:textSize="14sp"
        android:gravity="center_vertical"
        android:paddingRight="8dp"
        android:drawableRight="@drawable/search"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="45dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/et_search"
        android:layout_marginTop="1dp"/>
    <TextView
        android:layout_below="@+id/ll_tab"
        android:background="#f1f1f1"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
    <LinearLayout
        android:layout_below="@+id/ll_tab"
        android:orientation="vertical"
        android:layout_marginTop="1dp"
        android:id="@+id/ll_menu"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ll_tab"
            android:paddingBottom="15dp"
            android:layout_centerHorizontal="true"
            >
        </android.support.v7.widget.RecyclerView>
        <TextView
            android:background="#b8000000"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>


</RelativeLayout>

然后看看适配器怎么写

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.fjrcloud.fuqing.model.local.ArticleClassify;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Liberation on 2017/10/26.
 */

public class LessonPageAdapter extends FragmentPagerAdapter {
    List<ArticleClassify.RDataBean> titleList;
    private ArrayList<Fragment> fragmentList;

    public LessonPageAdapter(FragmentManager fm, List<ArticleClassify.RDataBean> titleList, ArrayList<Fragment> fragmentList) {
        super(fm);
        this.titleList = titleList;
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position).getTw_type_title();
    }


}

再看看activity中怎么将tablayout绑定viewpager快下班了偷懒啦

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.fjrcloud.fuqing.R;
import com.fjrcloud.fuqing.adapter.LessonMenuAdapter;
import com.fjrcloud.fuqing.adapter.LessonPageAdapter;
import com.fjrcloud.fuqing.callback.JsonCallback;
import com.fjrcloud.fuqing.model.local.ArticleClassify;
import com.fjrcloud.fuqing.model.local.BaseRequestEntity;
import com.fjrcloud.fuqing.model.local.GetArticle;
import com.fjrcloud.fuqing.ui.base.BaseActivity;
import com.fjrcloud.fuqing.ui.fragment.LessonFragment;
import com.fjrcloud.fuqing.util.Constants;
import com.google.gson.Gson;
import com.lzy.okgo.OkGo;
import com.lzy.okgo.model.Response;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.Event;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Liberation on 2017/10/26.
 */
@ContentView(R.layout.activity_lesson)
public class LessonActivity extends BaseActivity implements TabLayout.OnTabSelectedListener,  BaseQuickAdapter.OnItemChildClickListener {

    @ViewInject(R.id.tab_layout)
    TabLayout mTab;
    @ViewInject(R.id.view_pager)
    ViewPager mPager;
    LessonMenuAdapter mAdapter;
    List<ArticleClassify.RDataBean> data = new ArrayList<>();
    @ViewInject(R.id.menu)
    ImageView mMenu;
    int count;
    LessonPageAdapter lessAdapter;
    PopupWindow pop;
    @ViewInject(R.id.rl_title)
    RelativeLayout mRl_title;
    @ViewInject(R.id.ll_tab)
    LinearLayout mLl_tab;
    @ViewInject(R.id.et_search)
    EditText mEt_search;
    @ViewInject(R.id.rv)
    RecyclerView mRv;
    @ViewInject(R.id.ll_menu)
    LinearLayout mLl_menu;
    private ArticleClassify datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // TODO: add setContentView(...) invocation
        x.view().inject(this);
        getTab();
        initMenu();

    }

    private void initMenu() {
        mAdapter = new LessonMenuAdapter(R.layout.item_lesson_menu, data);
        mRv.setLayoutManager(new GridLayoutManager(this, 4));
        mRv.setAdapter(mAdapter);
        mAdapter.setOnItemChildClickListener(this);
    }

    private void initTabLayout() {
        setTitle("一线课堂");
        List<ArticleClassify.RDataBean> titleList = new ArrayList<>();
        ArrayList<Fragment> fragmentList = new ArrayList<>();
        for (ArticleClassify.RDataBean item : datas.getRData()) {
            titleList.add(item);//添加标题item
            data.add(item);//这是菜单便签的适配器
            //业务需要将不同的参数传到fragment中加载不同的数据
            Bundle bundle = new Bundle();
            bundle.putString("tw_type_key", item.getTw_type_key());
            LessonFragment lessonFragment = LessonFragment.newInstance();
            lessonFragment.setArguments(bundle);
            fragmentList.add(lessonFragment);
        }
        mAdapter.setNewData(data);
        lessAdapter = new LessonPageAdapter(getSupportFragmentManager(), titleList, fragmentList);
        mPager.setAdapter(lessAdapter);
        //关键语句tablayout跟viewpager绑定
        mTab.setupWithViewPager(mPager, true);
        //tablayout的条目标题从适配器中直接获取
        mTab.setTabsFromPagerAdapter(lessAdapter);
        //给tablayout设置事件
        mTab.addOnTabSelectedListener(this);
    }

    /*获取分类列表*/
    private void getTab() {
        OkGo.<ArticleClassify>post(Constants.SERVICE_HOST).upJson(new Gson()
                .toJson(new BaseRequestEntity<>(Constants.ARTICLE, new GetArticle("tw_1000001"))))
                .execute(new JsonCallback<ArticleClassify>(ArticleClassify.class) {
                    @Override
                    public void onSuccess(Response<ArticleClassify> response) {
                        datas = response.body();
                        //initMenu();
                        initTabLayout();
                    }

                    @Override
                    public void onError(Response<ArticleClassify> response) {
                        super.onError(response);

                    }
                });
    }

    @Event(R.id.menu)
    private void onClick(View view) {
        count++;
        if (count % 2 == 1) {
            mEt_search.setVisibility(View.GONE);
            mLl_menu.setVisibility(View.VISIBLE);
        } else {
            mEt_search.setVisibility(View.VISIBLE);
            mLl_menu.setVisibility(View.GONE);
        }

    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        setNewTabView(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }



    @Override
    public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
        setNewTabView(position);
    }

    /*设置选中的视图*/
    public void setNewTabView(int nowPosition){
        for (int i = 0; i <data.size() ; i++) {
            data.get(i).setCheck(false);
        }
        data.get(nowPosition).setCheck(true);
        mAdapter.setNewData(data);
        //根据标签的选中事件跳转到指定的tab
        mPager.setCurrentItem(nowPosition);
        //记得viewpager也要跟着切换
        mTab.getTabAt(nowPosition).select();
        //隐藏搜索框
        mLl_menu.setVisibility(View.INVISIBLE);
    }
}

有不懂得留言哦