AppBarLayout + ViewPager + Reccy

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> <!--<FrameLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="match_parent">--> <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" /> <!-- <ImageButton android:id="@+id/spring_festival_ib" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginEnd="20dp" android:layout_marginBottom="120dp" android:background="@android:color/transparent" /> </FrameLayout>--> </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高度不用计算正好是屏幕剩下的距离。