阅读 948

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的味道。如下图
复制代码

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

复制代码

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

文章分类
Android
文章标签