CoordinatorLayout与AppBarLayout。置顶悬停，二级悬停，类似京东、淘宝等二级悬停。

_xiangpan
5,180 阅读3分钟

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

一、惯例先上效果图

效果图

二、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;
    }
}

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

avatar
文章
阅读
粉丝
相关推荐
Android自定义view实现进度条动画、按钮渐变及录制状态控制
1.5k阅读
 · 
3点赞
Android常用控件-BannerView(无限轮播图控件)
3.9k阅读
 · 
2点赞
android中的Transition动画的使用
6.3k阅读
 · 
11点赞
Android三方框架banner实现轮播图
582阅读
 · 
2点赞
Android 自定义 View 合集
16k阅读
 · 
706点赞