效果如上，頂部標簽滾動底下的頁面也跟著滾動 灰色的標簽只是一個recyclerview裝起來的

這里用TabLayout+Viewpager+Fragment實現(xiàn)

先看布局

<?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;}@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}@Overridepublic int getCount() {return fragmentList.size();}@Overridepublic 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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// TODO: add setContentView(...) invocationx.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);//添加標題itemdata.add(item);//這是菜單便簽的適配器//業(yè)務需要將不同的參數(shù)傳到fragment中加載不同的數(shù)據(jù)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) {@Overridepublic void onSuccess(Response<ArticleClassify> response) {datas = response.body();//initMenu();initTabLayout();}@Overridepublic 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);}}@Overridepublic void onTabSelected(TabLayout.Tab tab) {setNewTabView(tab.getPosition());}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}@Overridepublic 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);//根據(jù)標簽的選中事件跳轉到指定的tabmPager.setCurrentItem(nowPosition);//記得viewpager也要跟著切換mTab.getTabAt(nowPosition).select();//隱藏搜索框mLl_menu.setVisibility(View.INVISIBLE);} }

有不懂得留言哦

總結

以上是生活随笔為你收集整理的TabLayout+Viewpager+Fragment实现分页滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。