CoordinatorLayout与AppBarLayout。置顶悬停,二级悬停,类似京东、淘宝等二级悬停。
类似京东、淘宝等二级悬停。 参考+实践
一、惯例先上效果图
二、GitHub
代码地址,欢迎指正https://github.com/MNXP/SlideTop
三、XML布局主要用到的控件
1、PullRefreshLayout (借用这位大神的https://github.com/genius158/PullRefreshLayout) 2、CoordinatorLayout 3、AppBarLayout复制代码
四、实现
1、布局的实现
需要注意的几点: 1)AppBarLayout 设置 behavior 需要自己定义,为以后拦截事件用 app:layout_behavior=".weight.MyBehavior" 2)AppBarLayout 第一个子view,就是需要滑动消失的布局,设置 app:layout_scrollFlags="scroll|exitUntilCollapsed" scroll 滚动,exitUntilCollapsed 可以在置顶后有阴影效果 3)最外层RecyclerView(也可以是各种带滑动的view,也可以是ViewPager实现分页) 设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 复制代码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#ffffff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="置顶滑动" android:textColor="@color/black" android:textSize="20sp" /> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignParentBottom="true" android:background="#dddddd"/> </RelativeLayout> <com.xp.slide.weight.refreshlayout.PullRefreshLayout android:id="@+id/swipe_refresh_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:prl_pullDownMaxDistance="300dp" app:prl_twinkEnable="true"> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/home_top_view" android:orientation="vertical"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffff" app:layout_behavior=".weight.MyBehavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="150dp" android:src="@mipmap/home_c"/> <androidx.recyclerview.widget.RecyclerView android:id="@+id/top_img_rv" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> <RelativeLayout android:id="@+id/home_tab_container_layout" android:layout_width="match_parent" android:layout_height="55dp" android:gravity="center" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:layout_marginLeft="20dp" android:textSize="15sp" android:textColor="#222222" android:text="悬停标题"/> <ImageView android:id="@+id/filter_layout" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentEnd="true" android:layout_centerVertical="true" android:layout_marginEnd="20dp" android:scaleType="fitXY" android:src="@mipmap/home_icon" /> </RelativeLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/bottom_img_rv" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> </com.xp.slide.weight.refreshlayout.PullRefreshLayout> </LinearLayout>复制代码
2、首先解决PullRefreshLayout 与 CoordinatorLayout(依靠AppBarLayout来处理)滑动冲突
通过AppBarLayout监听addOnOffsetChangedListener获取CoordinatorLayout是否滑动到顶部, 设置PullRefreshLayout是否可以上拉刷新复制代码
// 记录AppBar滚动距离 appBarLayout.addOnOffsetChangedListener(View::setTag); homeRefreshLayout.setOnTargetScrollCheckListener(new PullRefreshLayout.OnTargetScrollCheckListener() { @Override public boolean onScrollUpAbleCheck() { // 根据AppBar滚动的距离来设置RefreshLayout是否可以下拉刷新 int appbarOffset = ((appBarLayout.getTag() instanceof Integer)) ? (int) appBarLayout.getTag() : 0; return appbarOffset != 0; } @Override public boolean onScrollDownAbleCheck() { return true; } });复制代码
3、启用AppBarLayout滑动(不设置也可以,但有的时候会滑动有问题)
注意????:要在数据加载之后设置,不然不起作用复制代码
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); MyBehavior behavior = (MyBehavior) params.getBehavior(); try { if (behavior!=null){ behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() { @Override public boolean canDrag(@NonNull AppBarLayout appBarLayout) { isFirstData = true; //为了启用折叠工具栏的滚动 return true; } }); } } catch (Exception e) { }复制代码
4、自以为很完美了┭┮﹏┭┮,但是遇到一个小问题
问题? 滑动置顶之后,滑动下面的recyclerview,使得recyclerview不是显示第一个item,松开手, 然后向下滑动“悬停标题”,发现可以向下滑动,????,是bug的味道。如下图复制代码
下面就开始解决
解决思路就是根据下面的RecyclerView滑动,设置AppBarLayout是否可以滑动, (1) 设置监听RecyclerView第一个完整item (2) 根据Position来设置behavior.setCanMove(position<1); (3) MyBehavior实现是否可以滑动 上代码复制代码
// (1)设置监听RecyclerView第一个完整item bottomRv.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); if (newState == SCROLL_STATE_IDLE) { if (bottomRv != null && bottomRv.getLayoutManager() instanceof LinearLayoutManager) { LinearLayoutManager layoutManager = (LinearLayoutManager) bottomRv.getLayoutManager(); if (layoutManager != null) { // 根据滑动item设置置顶是否可以滑动 int firstCompletelyVisible = layoutManager.findFirstCompletelyVisibleItemPosition(); initAppbar(firstCompletelyVisible); } } } } }); //根据Position来设置behavior.setCanMove(position<1); private boolean isFirstData; private int oldPosition = -2; public void initAppbar(int position) { if (oldPosition == position){ return; } oldPosition = position; CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); MyBehavior behavior = (MyBehavior) params.getBehavior(); try { if (behavior!=null){ if (position == -1){ behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() { @Override public boolean canDrag(@NonNull AppBarLayout appBarLayout) { isFirstData = true; //为了启用折叠工具栏的滚动 return true; } }); }else { // 置顶后,如果recyclerview不是第一个item,禁止工具栏滑动 behavior.setCanMove(position<1); } } } catch (Exception e) { } } // (3) MyBehavior实现是否可以滑动 @Override public boolean onInterceptTouchEvent(@NonNull CoordinatorLayout parent, @NonNull AppBarLayout child, @NonNull MotionEvent ev) { if (!canMove && ev.getAction() == MotionEvent.ACTION_DOWN){ return false; } return super.onInterceptTouchEvent(parent, child, ev); } public void setCanMove(boolean canMove){ this.canMove = canMove; }复制代码
5、完整代码
Activity代码复制代码
public class MainActivity extends AppCompatActivity { private RecyclerView topRv; private RecyclerView bottomRv; private AppBarLayout appBarLayout; private PullRefreshLayout homeRefreshLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); appBarLayout = findViewById(R.id.app_bar_layout); homeRefreshLayout = findViewById(R.id.swipe_refresh_layout); topRv = findViewById(R.id.top_img_rv); bottomRv = findViewById(R.id.bottom_img_rv); topRv.setLayoutManager(new LinearLayoutManager(this)); bottomRv.setLayoutManager(new LinearLayoutManager(this)); initView(); initData(); } private void initView() { StoreHouseHeader header = new StoreHouseHeader(this); header.setPadding(0, 20, 0, 20); header.initWithString("XIANGPAN"); header.setTextColor(0xFF222222); homeRefreshLayout.setHeaderView(header); homeRefreshLayout.setOnRefreshListener(new PullRefreshLayout.OnRefreshListenerAdapter() { @Override public void onRefresh() { initData(); checkHandler.sendEmptyMessageDelayed(0,2000); } }); // 记录AppBar滚动距离 appBarLayout.addOnOffsetChangedListener(View::setTag); homeRefreshLayout.setOnTargetScrollCheckListener(new PullRefreshLayout.OnTargetScrollCheckListener() { @Override public boolean onScrollUpAbleCheck() { // 根据AppBar滚动的距离来设置RefreshLayout是否可以下拉刷新 int appbarOffset = ((appBarLayout.getTag() instanceof Integer)) ? (int) appBarLayout.getTag() : 0; return appbarOffset != 0; } @Override public boolean onScrollDownAbleCheck() { return true; } }); } private void initData() { initTop(); initBottom(); if (!isFirstData) { initAppbar(-1); } appBarLayout.setExpanded(true, false); } private void initBottom() { PhotoAdapter bottomAdapter = new PhotoAdapter(); bottomRv.setAdapter(bottomAdapter); bottomAdapter.setDataList(10); bottomRv.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); if (newState == SCROLL_STATE_IDLE) { if (bottomRv != null && bottomRv.getLayoutManager() instanceof LinearLayoutManager) { LinearLayoutManager layoutManager = (LinearLayoutManager) bottomRv.getLayoutManager(); if (layoutManager != null) { // 根据滑动item设置置顶是否可以滑动 int firstCompletelyVisible = layoutManager.findFirstCompletelyVisibleItemPosition(); initAppbar(firstCompletelyVisible); } } } } }); } private void initTop() { PhotoAdapter topAdapter = new PhotoAdapter(); topRv.setAdapter(topAdapter); topAdapter.setDataList(4); } private boolean isFirstData; private int oldPosition = -2; public void initAppbar(int position) { if (oldPosition == position){ return; } oldPosition = position; CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); MyBehavior behavior = (MyBehavior) params.getBehavior(); try { if (behavior!=null){ if (position == -1){ behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() { @Override public boolean canDrag(@NonNull AppBarLayout appBarLayout) { isFirstData = true; //为了启用折叠工具栏的滚动 return true; } }); }else { // 置顶后,如果recyclerview不是第一个item,禁止工具栏滑动 behavior.setCanMove(position<1); } } } catch (Exception e) { } } public Handler checkHandler = new Handler(Looper.getMainLooper()) { @Override public void handleMessage(@NonNull Message msg) { super.handleMessage(msg); //模拟网络请求结束,去除刷新效果 if (homeRefreshLayout != null) { homeRefreshLayout.refreshComplete(); } } }; }复制代码
MyBehavior代码复制代码
public class MyBehavior extends AppBarLayout.Behavior { private boolean canMove = true; public MyBehavior() { } public MyBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onInterceptTouchEvent(@NonNull CoordinatorLayout parent, @NonNull AppBarLayout child, @NonNull MotionEvent ev) { if (!canMove && ev.getAction() == MotionEvent.ACTION_DOWN){ return false; } return super.onInterceptTouchEvent(parent, child, ev); } public void setCanMove(boolean canMove){ this.canMove = canMove; } public boolean isCanMove() { return canMove; } }复制代码
以上就是全部内容,待完善,以后会更新。如有建议和意见,请及时沟通。
作者:_xiangpan
链接:https://juejin.cn/post/7018453099794825252