TabLayout+Viewpager+Fragment实现分页滚动
2024-05-26 06:56:33
效果如上，顶部标签滚动底下的页面也跟着滚动 灰色的标签只是一个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;}@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);//这是菜单便签的适配器//业务需要将不同的参数传到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) {@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);//根据标签的选中事件跳转到指定的tabmPager.setCurrentItem(nowPosition);//记得viewpager也要跟着切换mTab.getTabAt(nowPosition).select();//隐藏搜索框mLl_menu.setVisibility(View.INVISIBLE);}
}
有不懂得留言哦
TabLayout+Viewpager+Fragment实现分页滚动相关推荐
- TabLayout+ViewPager+Fragment中Fragment的可见和不可见问题
场景 TabLayout+ViewPager+Fragment的使用过程中需要判断Fragment是否对用户可见,监听Fragment由不可见变为可见的事件 解决方案 重写Fragment的setUs ...
- Tablayout+ViewPager+Fragment 实现页面切换
项目也快上线了,就来总结下Tablayout+ViewPager+Fragment 的使用啦 主activity public class DoSomethingAct extends BaseAct ...
- TabLayout+ViewPager+Fragment(内部:TabLayout+ViewPager+ Fragment)需要注意！！
之前面试的时候,被面试官问道ViewPager嵌套ViewPager怎么处理的.我还一直在回答用最外层的vp的onInterceptTouchEvent来处理怎样怎样(注意是代码没有写过,就这样说了. ...
- TabLayout+ViewPager+Fragment实现切页展示
写在前面 目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验,最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式,最近在公司项目中 ...
- 使用TabLayout+ViewPager+Fragment实现切页展示
使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式,本例是在fragment中实现主要代码 步骤: 1,定义TabLayout和ViewPager的布局 2,实 ...
- 小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
昨夜西风凋碧树,独上高楼,望尽天涯路. 今天难得有时间,准备写一写我们在APP中经常用到的页面形式,废话不多说,直接一张图看看页面效果你就知道为啥是常用的页面形式.先看看逻辑和最后的效果是怎么样的: ...
- Android实现一个简易的新闻列表APP（TabLayout+ViewPager+Fragment）
Android实现一个简易的新闻列表APP(TabLayout+ViewPager+Fragment) 文章目录 Android实现一个简易的新闻列表APP(TabLayout+ViewPager+F ...
- Android viewpager+fragment实现无限滚动，左右有前/后一页的部分，并fragment显示的内容是activity传过去的数据
背景:最近在做app的时候碰到一个这样的需求.1,将从网络上获取的json数组数据显示出来,每页显示一个数据源,并且可以左右翻页查看:2,中间显示一个完整页,两边分别还有上下一页的一点,:3,可无限循 ...
- tabLayout+viewPager+fragment，当tab数目较少，能一屏展示时
最近做了个推荐影片的APP,根据标签展示不同的视频列表,用遥控器上下左右按键来操作标签.当标签数目较少,能一屏展示时的代码如下: acivity_main.xml <?xml version=& ...
最新文章
- 介绍一款facebook信息收集工具FBI
- 【java学习】Arraylist和LinkedList使用场景与性能对比
- LeetCode 919. 完全二叉树插入器（层序遍历队列）
- SpingBoot 整合 kafka Elk
- poj 3352Road Construction（无向双连通分量的分解）
- MySQL兼容服务器_服务器不支持 MySql 数据库的解决方法
- AACL2022会议征稿
- MySQL常用系统表
- Java学习路线图（完整详细2021版）
- 关于BOM表的一些事
- 将使用Tkinter编写的带图片的程序打包成exe文件，并且实现图片内嵌
- 电脑蓝牙突然无法使用，解决办法来了
- 解决ERROR: Cannot uninstall ‘llvmlite‘. It is a distutils installed project and thus we cannot accurat
- 如何恢复删除掉的压缩文件
- matlab提取图像特征程序,图像特征提取matlab程序
- java poi 边框_java poi 设置边框
- svn update 出现skipped '.' 或skipped '目录名称'
- 示波器电源测试交流耦合的陷阱
- 痉挛性斜颈头颤怎么办？
- Android N 应用内更新