AppBarLayout CoordinatorLayout Room

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"?>

  xmlns:app="http://schemas.android.com/apk/res-auto"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:orientation="vertical">


      android:layout_width="match_parent"

      android:layout_height="60dp"

      android:background="#ffffff"

      android:orientation="vertical">


          android:layout_width="match_parent"

          android:layout_height="match_parent"

          android:gravity="center"

          android:text="置顶滑动"

          android:textColor="@color/black"

          android:textSize="20sp" />

          android:layout_width="match_parent"

          android:layout_height="1dp"

          android:layout_alignParentBottom="true"

          android:background="#dddddd"/>



      android:id="@+id/swipe_refresh_layout"

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      app:prl_pullDownMaxDistance="300dp"

      app:prl_twinkEnable="true">


          android:layout_width="match_parent"

          android:layout_height="match_parent"

          android:layout_below="@+id/home_top_view"

          android:orientation="vertical">


              android:id="@+id/app_bar_layout"

              android:layout_width="match_parent"

              android:layout_height="wrap_content"

              android:background="#ffffff"

              app:layout_behavior=".weight.MyBehavior">


                  android:layout_width="match_parent"

                  android:layout_height="wrap_content"

                  android:orientation="vertical"

                  app:layout_scrollFlags="scroll|exitUntilCollapsed">

                      android:layout_width="match_parent"

                      android:layout_height="150dp"

                      android:src="@mipmap/home_c"/>

                      android:id="@+id/top_img_rv"

                      android:layout_width="match_parent"

                      android:layout_height="wrap_content"/>



                  android:id="@+id/home_tab_container_layout"

                  android:layout_width="match_parent"

                  android:layout_height="55dp"

                  android:gravity="center"

                  android:orientation="horizontal">

                      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="悬停标题"/>


                      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" />





              android:id="@+id/bottom_img_rv"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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;

    }

}

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

作者：_xiangpan
链接：https://juejin.cn/post/7018453099794825252
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

0

2021-11-29

0 个评论

要回复文章请先登录或注册