美文网首页UIKotlin开发经验Android深入
CoordinatorLayout与AppBarLayout。置

CoordinatorLayout与AppBarLayout。置

作者: _xiangpan | 来源:发表于2021-10-13 15:34 被阅读0次

    类似京东、淘宝等二级悬停。
    参考+实践


    一、惯例先上效果图

    效果图

    二、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的味道。如下图
    
    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;
        }
    }
    
    

    以上就是全部内容,待完善,以后会更新。如有建议和意见,请及时沟通。

    相关文章

      网友评论

        本文标题:CoordinatorLayout与AppBarLayout。置

        本文链接:https://www.haomeiwen.com/subject/gpbsoltx.html