AppBarLayout + ViewPager + ReccyclerView +PagerSnapHelper

1,先看图AppBarLayout很高，里面有个Banner，四个大图标，还有ViewPager title，

1,首页Fragment的布局

1，最外面一个RelativeLayout 包着

2,里面第一个FrameLayout用来做搜索头，滑动时候不动

3，Framelayout下面一个SmartRefreshLayout来做全局刷新翻页，（这个要自己分配到View Pager里面的RecyclerView加载数据）

4，SmartRreshLayout里面就是常规的AppBarLayout加ViewPager

<?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"> <FrameLayout android:id="@+id/search_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <FrameLayout android:id="@+id/search_relativeLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/normal_space_to_border" android:layout_marginEnd="60dp" android:background="@drawable/shadow_181447"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="11dp" android:layout_marginTop="11dp" android:layout_marginBottom="11dp" android:drawableStart="@mipmap/icon_sy_search" android:drawablePadding="6dp" android:text="点击搜索你想要的服务和商品..." android:textColor="@color/color_C7C8CD" android:textSize="@dimen/textsize_small12" /> </FrameLayout> <FrameLayout android:id="@+id/message_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|center_vertical"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginStart="10dp" android:layout_marginEnd="@dimen/normal_space_to_border" android:background="@android:color/transparent" android:clickable="false" android:src="@mipmap/icon_sy_advices" /> <TextView android:id="@+id/red_point_tv" android:layout_width="10dp" android:layout_height="10dp" android:layout_gravity="top|end" android:layout_marginEnd="12dp" android:background="@drawable/rounded_red_background" android:clickable="false" android:gravity="center" android:textColor="@android:color/white" android:textSize="8sp" android:visibility="gone" /> </FrameLayout> </FrameLayout> <com.scwang.smartrefresh.layout.SmartRefreshLayout android:id="@+id/refreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/search_layout" app:srlAccentColor="@android:color/white" app:srlEnableAutoLoadMore="false" app:srlEnableLoadMore="true" app:srlEnablePreviewInEditMode="true" app:srlPrimaryColor="@android:color/darker_gray"> <com.scwang.smartrefresh.layout.header.ClassicsHeader android:layout_width="match_parent" android:layout_height="wrap_content" /> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_below="@+id/search_layout" android:background="@android:color/white" android:fitsSystemWindows="true"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay" app:elevation="0dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:descendantFocusability="beforeDescendants" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:orientation="vertical"> <com.qfxl.view.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="160dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="13dp" android:layout_marginTop="13dp" android:layout_marginEnd="13dp" android:layout_marginBottom="6dp" android:orientation="horizontal"> <RelativeLayout android:id="@+id/trust_deal_layout" android:layout_width="0dp" android:layout_height="80dp" android:layout_marginEnd="9dp" android:layout_weight="1" android:background="@drawable/rounded_ed7f9e_background" app:layout_constraintEnd_toStartOf="@id/jiyang_free_layout" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="9dp" android:drawableTop="@mipmap/icon_sy_credit" android:gravity="start" android:text="信用交易区" android:textColor="@android:color/white" android:textSize="15sp" android:textStyle="bold" /> </RelativeLayout> <RelativeLayout android:id="@+id/jiyang_free_layout" android:layout_width="0dp" android:layout_height="80dp" android:layout_weight="1" android:background="@drawable/rounded_7b88ea_background" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/trust_deal_layout" app:layout_constraintTop_toTopOf="parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="9dp" android:drawableTop="@mipmap/icon_sy_welfare" android:gravity="start" android:text="吉羊返利区" android:textColor="@android:color/white" android:textSize="15sp" android:textStyle="bold" /> </RelativeLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="13dp" android:layout_marginEnd="13dp" android:layout_marginBottom="12dp" android:orientation="horizontal"> <RelativeLayout android:id="@+id/jiyang_try_layout" android:layout_width="0dp" android:layout_height="80dp" android:layout_marginEnd="9dp" android:layout_weight="1" android:background="@drawable/rounded_eba272_background" app:layout_constraintEnd_toStartOf="@+id/product_exchange_layout" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/trust_deal_layout"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="9dp" android:drawableTop="@mipmap/icon_sy_experience" android:gravity="start" android:text="吉羊体验区" android:textColor="@android:color/white" android:textSize="15sp" android:textStyle="bold" /> </RelativeLayout> <RelativeLayout android:id="@+id/product_exchange_layout" android:layout_width="0dp" android:layout_height="80dp" android:layout_weight="1" android:background="@drawable/rounded_eb7997_background" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/jiyang_try_layout" app:layout_constraintTop_toBottomOf="@+id/jiyang_free_layout"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="9dp" android:drawableTop="@mipmap/icon_sy_exchange" android:gravity="start" android:text="诺券互换区" android:textColor="@android:color/white" android:textSize="15sp" android:textStyle="bold" /> </RelativeLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="5dp" android:background="@color/color_f3f3f3" app:layout_collapseMode="none" /> <com.shizhefei.view.indicator.FixedIndicatorView android:id="@+id/fragment_tabmain_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minHeight="45dp" app:layout_collapseMode="pin" /> <View android:id="@+id/tab_divider" android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/color_f3f3f3" app:layout_collapseMode="pin" /> </LinearLayout> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout>    <androidx.viewpager.widget.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="afterDescendants" app:layout_behavior="@string/appbar_scrolling_view_behavior" />  </androidx.coordinatorlayout.widget.CoordinatorLayout> <com.scwang.smartrefresh.layout.header.ClassicsHeader android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.scwang.smartrefresh.layout.SmartRefreshLayout> <ImageButton android:id="@+id/up_arrow_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentBottom="true" android:layout_gravity="bottom|end" android:layout_marginEnd="4dp" android:layout_marginBottom="40dp" android:background="@android:color/transparent" android:src="@mipmap/up_arrow" /></RelativeLayout>

这样基本完成一大部分了。

ViewPager里面是两个Fragment，里面是RecyclerView

Fragment里面的布局是这样的

<?xml version="1.0" encoding="utf-8"?><com.heitouyang.promise.view.CustomRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/relative_root" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f2f3f7" android:descendantFocusability="beforeDescendants" android:fitsSystemWindows="@bool/out_fits_system_windows"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" app:elevation="0dp"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white"> <HorizontalScrollView android:id="@+id/tag_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/user_name_tv" android:layout_gravity="center_vertical" android:layout_marginStart="10dp" android:layout_marginEnd="60dp" android:scrollbars="none"> <LinearLayout android:id="@+id/user_tag_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" /> </HorizontalScrollView> <ImageButton android:id="@+id/show_more_tag_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|center_vertical" android:background="@android:color/transparent" android:src="@mipmap/icon_sy_pull" /> <View android:id="@+id/tab_divider" android:layout_width="match_parent" android:layout_height="0.5dp" android:layout_gravity="bottom" android:background="@color/color_f3f3f3" app:layout_collapseMode="pin" /> </FrameLayout> </com.google.android.material.appbar.AppBarLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/app_bar"> <com.xiasuhuei321.loadingdialog.view.LoadCircleView android:id="@+id/lcv_circleload" android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center" android:visibility="visible" /> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_error" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="100dp" android:layout_height="80dp" android:layout_marginBottom="4dp" android:background="@mipmap/image_ymcc" /> <TextView android:id="@+id/content_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="页面出错" android:textColor="#333333" android:textSize="@dimen/text_size_small" /> </LinearLayout> </FrameLayout> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res-auto" android:id="@+id/show_more_tags_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_33000000" android:visibility="gone"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white"> <com.zhy.view.flowlayout.TagFlowLayout android:id="@+id/flowlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/normal_space_to_border" android:layout_marginBottom="@dimen/normal_space_to_border" android:layout_toStartOf="@+id/close_more_tag_button" zhy:max_select="1" /> <ImageButton android:id="@+id/close_more_tag_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_gravity="end" android:background="@android:color/transparent" android:src="@mipmap/icon_sy_upward" /> </RelativeLayout> </RelativeLayout></com.heitouyang.promise.view.CustomRelativeLayout>

然后就可以上下滑动了。这是完美的。都是系统的架构和行为。

然后我们项目的需求有些问题，但是说了没用，需求就是RecyclerView要一滑一页。这个用PagerSnaperHelper就好了

代码三行：

recyclerView.setOnFlingListener(null);

SnapHelper snapHelper =new PagerSnapHelper();

snapHelper.attachToRecyclerView(recyclerView);

但是加了这个之后你会发现AppbarLayout 的这个行为不流畅了，app:layout_scrollFlags="scroll|exitUntilCollapsed"，应该是PagerSnapHelper的动画影响了RecyclerView滑动的计算，不能一下子滑上去了。怎么办。我说实现不了。系统就这样。但是还是让我改，硬着头皮在此基础上改了一下。都自己写不可能，时间上不允许，我页没写过心里没底。首页的RelativeLayout我从写了。来监听触摸事件，在上层控制一下。

代码如下

package com.promise.view;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.RelativeLayout;import androidx.recyclerview.widget.RecyclerView;import com.google.android.material.appbar.AppBarLayout;import com.heitouyang.promise.util.Logger;public class CustomRelativeLayout extends RelativeLayout { public AppBarLayout appBarLayout; public RecyclerView recyclerView; float x1; float y1; float x2; float y2; boolean collapsed; public CustomRelativeLayout(Context context) { super(context); } public CustomRelativeLayout(Context context, AttributeSet attrs) { super(context, attrs); } public CustomRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public CustomRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } public void setAppBarLayout(AppBarLayout appBarLayout) { this.appBarLayout = appBarLayout; this.appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (i == 0) { Logger.d("set collase false in onOffsetChanged"); collapsed = false;// } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { } else if (Math.abs(i) >= 0) { Logger.d("set collase true in onOffsetChanged"); collapsed = true; } else { } } }); } @Override public boolean onInterceptTouchEvent(MotionEvent event) { Logger.d("on touch event"); //继承了Activity的onTouchEvent方法，直接监听点击事件 if (event.getAction() == MotionEvent.ACTION_DOWN) { //当手指按下的时候 x1 = event.getX(); y1 = event.getY(); } if (event.getAction() == MotionEvent.ACTION_MOVE) { //当手指移动的时候 x2 = event.getX(); y2 = event.getY(); if (y1 - y2 > 5) { Logger.d("collapsed:" + collapsed); if (!collapsed) { collapsed = true; Logger.d("collapsed: set true on touch"); appBarLayout.setExpanded(false, true); return true; } return false;// Toast.makeText(MyServiceTestActivity.this, "向上滑", Toast.LENGTH_SHORT).show(); } else if (y2 - y1 > 5) { if (!recyclerView.canScrollVertically(-1)) { collapsed = false; Logger.d("collapsed: set false on touch"); appBarLayout.setExpanded(true, true); }// Toast.makeText(MyServiceTestActivity.this, "向下滑", Toast.LENGTH_SHORT).show(); } else if (x1 - x2 > 50) {// Toast.makeText(MyServiceTestActivity.this, "向左滑", Toast.LENGTH_SHORT).show(); } else if (x2 - x1 > 50) {// Toast.makeText(MyServiceTestActivity.this, "向右滑", Toast.LENGTH_SHORT).show(); } } if (event.getAction() == MotionEvent.ACTION_UP) {// Log.i("Lgq","sssssssll离开了lllll=="); } return false; }}

QQ.1933772028, 欢迎交流。有时间可以干到github上。按照我上面的布局，里面的每个ViewHolder高度不用计算正好是屏幕剩下的距离。

最后编辑于：2019.07.12 11:34:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,222评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,455评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,720评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,568评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,696评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,879评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,028评论 3赞 409
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,773评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,220评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,550评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,697评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,360评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,002评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,782评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,010评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,433评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,587评论 2赞 350

AppBarLayout + ViewPager + ReccyclerView +PagerSnapHelper

推荐阅读更多精彩内容