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