Android滑動佈局ConsecutiveScrollerLayout實現佈局吸頂功能

前段時間我在GitHub上開源了一個Android滑動佈局ConsecutiveScrollerLayout，主要是爲了解決佈局嵌套滑動和滑動衝突的問題。另外還寫了兩篇文章用於介紹ConsecutiveScrollerLayout的實現原理和使用。這篇文章是對講解ConsecutiveScrollerLayout實現原理的補充，主要是講解ConsecutiveScrollerLayout實現佈局吸頂的原理。沒有看過我前面那兩篇文章的朋友能夠去看一下。

Android可持續滑動佈局：ConsecutiveScrollerLayout

Android持續滑動佈局ConsecutiveScrollerLayout的使用

雖然我寫ConsecutiveScrollerLayout是爲了解決複雜佈局的滑動問題，不過佈局滑動吸頂的需求在日常的開發中也很常見，既然我已經實現了一個滑動佈局，因此就乾脆給它加上吸頂的功能了。

之前咱們實現佈局滑動吸頂的功能，最經常使用的方法就是在FrameLayout裏嵌套一個隱藏的、放在頂部的佈局，和一個ScrollView，ScrollView裏再放一個跟隱藏的頂部佈局一摸同樣的佈局，而後監聽ScrollView的滑動，若是ScrollView裏須要吸頂的佈局滑出屏蔽，就把頂部隱藏的佈局顯示出來。這種方法實現起來既麻煩也不優雅。ConsecutiveScrollerLayout經過計算滑動位置和給須要吸頂的view設置y軸偏移量，讓須要吸頂的佈局在滑出屏幕時懸浮在佈局的頂部。只要給佈局設置一個屬性，就能夠實現吸頂的功能。

ConsecutiveScrollerLayout吸頂懸浮功能的主要實現是在resetSticky()方法。當佈局滑動或者發生變化的時候會調用這個方法。

private void resetSticky() {
      // 吸頂功能使用了Android 5.0才支持的API，因此Android 5.0才能吸頂
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
          // 獲取須要吸頂的子view，ConsecutiveScrollerLayout支持設置多個吸頂的view。
            List<View> children = getStickyChildren();
            if (!children.isEmpty()) {
                int count = children.size();

                // 重置吸頂佈局時，先讓全部的View恢復原來的狀態
                for (int i = 0; i < count; i++) {
                    View child = children.get(i);
                    child.setTranslationY(0);
                    child.setTranslationZ(0);
                }

                // 須要吸頂的View
                View stickyView = null;
                // 下一個須要吸頂的View
                View nextStickyView = null;

                // 找到須要吸頂的View
                for (int i = count - 1; i >= 0; i--) {
                    View child = children.get(i);
                    if (child.getTop() <= getScrollY()) {
                        stickyView = child;
                        if (i != count - 1) {
                            nextStickyView = children.get(i + 1);
                        }
                        break;
                    }
                }

                if (stickyView != null) {
                    int offset = 0;
                    if (nextStickyView != null) {
                      // 若是nextStickyView不爲空，計算佈局吸頂時須要設置的偏移量。
                      // 由於下一個吸頂的view頂到了當前吸頂的view，須要把當前的view頂出屏幕
                        offset = Math.max(0, stickyView.getHeight() - (nextStickyView.getTop() - getScrollY()));
                    }
                    stickyChild(stickyView, offset);
                }
            }
        }
    }

    private void stickyChild(View child, int offset) {
      // 設置吸頂view的y軸偏移量，讓它懸浮在頂部
        child.setY(getScrollY() - offset);
      // 設置吸頂view的translationZ爲1
        child.setTranslationZ(1);
    }

    /** * 返回全部的吸頂子View(非GONE) */
    private List<View> getStickyChildren() {
        List<View> children = new ArrayList<>();
        int count = getChildCount();
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() != GONE && isStickyChild(child)) {
                children.add(child);
            }
        }
        return children;
    }

		/** * 是不是須要吸頂的View */
    private boolean isStickyChild(View child) {
        ViewGroup.LayoutParams lp = child.getLayoutParams();
        if (lp instanceof LayoutParams) {
          // 是否須要吸頂
            return ((LayoutParams) lp).isSticky;
        }
        return false;
    }
複製代碼

這裏使用了一個isSticky的自定義LayoutParams屬性，這個屬性用於表示子view是否須要吸頂，若是ConsecutiveScrollerLayout的子view設置了app:layout_isSticky="true"，表示這個view須要吸頂。

吸頂的原理是經過ConsecutiveScrollerLayout的scrollY找到須要吸頂的view和下一個須要吸頂的view，之因此要找到下一個吸頂的view，是由於佈局繼續向上滑動時，下一個吸頂的view須要把當前吸頂的view頂出屏幕，因此要計算它們之間的偏移量。吸頂的view經過setY()設置y軸偏移量，讓它停留在頂部。最後我給吸頂的view設置了translationZ爲1，這是因爲Android佈局的顯示層級，兩個view重疊時，後添加的會將先添加的覆蓋。爲了讓吸頂的view不被後面的view覆蓋掉，因此須要給它設置一下z軸，z越大的view，顯示的層級越高。view的z等於translationZ+elevation。除了一些特殊的控件，Android幾乎全部的view的這兩個值都是0。

下面是吸頂功能的使用和效果。

<?xml version="1.0" encoding="utf-8"?>
<com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/scrollerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical">

  <!-- 設置app:layout_isSticky="true"就能夠使View吸頂 -->
    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:padding="10dp" android:text="吸頂View - 1" android:textColor="@android:color/black" android:textSize="18sp" app:layout_isSticky="true" />

    <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" />

    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:orientation="vertical" app:layout_isSticky="true">

        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="吸頂View - 2 我是個LinearLayout" android:textColor="@android:color/black" android:textSize="18sp" />

    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView1" android:layout_width="match_parent" android:layout_height="wrap_content" />

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:padding="10dp" android:text="吸頂View - 3" android:textColor="@android:color/black" android:textSize="18sp" app:layout_isSticky="true" />

    <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent">

    </androidx.core.widget.NestedScrollView>

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:padding="10dp" android:text="吸頂View - 4" android:textColor="@android:color/black" android:textSize="18sp" app:layout_isSticky="true" />

    <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView2" android:layout_width="match_parent" android:layout_height="wrap_content" />

</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>
複製代碼

項目地址： ConsecutiveScroller