CoordinatorLayout與AppBarLayout。置頂懸停，二級懸停，類似京東、淘寶等二級懸停。

類似京東、淘寶等二級懸停。
參考+實踐

一、慣例先上效果圖

效果圖

二、GitHub

代碼地址，歡迎指正https://github.com/MNXP/SlideTop

三、XML布局主要用到的控件

  1、PullRefreshLayout (借用這位大神的https://github.com/genius158/PullRefreshLayout)
  2、CoordinatorLayout
  3、AppBarLayout

四、實現(xiàn)

1、布局的實現(xiàn)

  需要注意的幾點：
   1）AppBarLayout 設置 behavior 需要自己定義，為以后攔截事件用
      app:layout_behavior=".weight.MyBehavior"
   2）AppBarLayout 第一個子view，就是需要滑動消失的布局，設置
      app:layout_scrollFlags="scroll|exitUntilCollapsed"
      scroll  滾動，exitUntilCollapsed 可以在置頂后有陰影效果
   3）最外層RecyclerView（也可以是各種帶滑動的view，也可以是ViewPager實現(xiàn)分頁） 設置
      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監(jiān)聽addOnOffsetChangedListener獲取CoordinatorLayout是否滑動到頂部，
設置PullRefreshLayout是否可以上拉刷新

   // 記錄AppBar滾動距離
appBarLayout.addOnOffsetChangedListener(View::setTag);
homeRefreshLayout.setOnTargetScrollCheckListener(new PullRefreshLayout.OnTargetScrollCheckListener() {
           @Override
           public boolean onScrollUpAbleCheck() {
               // 根據(jù)AppBar滾動的距離來設置RefreshLayout是否可以下拉刷新
               int appbarOffset = ((appBarLayout.getTag() instanceof Integer)) ? (int) appBarLayout.getTag() : 0;
               return appbarOffset != 0;
           }

           @Override
           public boolean onScrollDownAbleCheck() {
               return true;
           }
       });

3、啟用AppBarLayout滑動（不設置也可以，但有的時候會滑動有問題）

注意??：要在數(shù)據(jù)加載之后設置，不然不起作用

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，松開手，
     然后向下滑動“懸停標題”，發(fā)現(xiàn)可以向下滑動，??，是bug的味道。如下圖
BUG的味道
下面就開始解決
 解決思路就是根據(jù)下面的RecyclerView滑動，設置AppBarLayout是否可以滑動，
  (1) 設置監(jiān)聽RecyclerView第一個完整item
  (2) 根據(jù)Position來設置behavior.setCanMove(position<1);
  (3) MyBehavior實現(xiàn)是否可以滑動
  上代碼

// (1)設置監(jiān)聽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) {
                            // 根據(jù)滑動item設置置頂是否可以滑動
                            int firstCompletelyVisible = layoutManager.findFirstCompletelyVisibleItemPosition();
                            initAppbar(firstCompletelyVisible);
                        }
                    }
                }
            }
        });
    //根據(jù)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實現(xiàn)是否可以滑動
    @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() {
                // 根據(jù)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) {
                            // 根據(jù)滑動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);
            //模擬網(wǎng)絡請求結束，去除刷新效果
            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;
    }
}

以上就是全部內容，待完善，以后會更新。如有建議和意見，請及時溝通。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容