2. 实现思路

看到吸顶的效果，首先想到使用CoordinatorLayout和AppBarLayout来实现。界面主要分为2个部分：

「底部的可滑动区域，可以用ScrollView或者RecyclerView实现。」
「顶部的吸顶区域用AppBarLayout实现。」

我们把顶部的吸顶区域拆分一下，可以分为以下4个部分：

「品牌区域，当往下滑的时候，RecyclerView显示第一个Item的时候，该区域才开始往下滑。」

「品类图片区域，当下滑的时候，该区域会跟随往下滑动，当该区域到达顶部时会一直吸顶，直到RecyclerView第一个Item出现的时候，才往下滑动。」

「品类标题区域，当上滑的时候，该区域会先跟随往上滑动，当该区域到达顶部时会一直吸顶」

「排序和筛选区域，当下滑的时候，无论RecyclerView当前的位置在哪里，该区域会首先跟随向下滑出」

「在本文中，我把向上滑动区域3吸顶，向下滑动区域4吸顶做了一个定义叫二次吸顶。二次吸顶的功能会有一个矛盾点，我们想让区域3在上滑的时候吸顶，那么势必造成区域4无法作为AppBarLayout的一部分(熟悉AppBarLayout的scroll标志的同学应该能理解，如果不能理解，本文后半部分原理篇会讲解到)，那么区域4只能做为RecyclerView的头部，作为头部，只有当RecyclerView下滑到顶，区域4才会向下跟随滑出，无法满足上面区域4的要求。」

「当分析出这样一个矛盾点的时候。我的第一反应是，使用AppBarLayout无法满足现有的要求，我必须得自己重写一个Behavior来实现该功能，而且该Behavior必须满足下面3个条件：」

Behavior本身需要处理滑动事件，在吸顶区域滑动时，RecyclerView需要联动
Behavior需要处理RecylerView和吸顶区域之间的嵌套滑动，在RecyclerView区域滑动时，吸顶区域需要联动
上滑时区域3要吸顶，下滑时区域4要吸顶

一想到只需要满足这么三个条件便能实现效果，迫不及待地跃跃欲试，但是冷静了几秒钟会发现，「但是处理滑动事件，不仅需要考虑各种事件类型的处理，嵌套滑动的处理，以及CoordiatorLayout复杂的事件分发逻辑，还有Fling等操作的处理，突然感觉是一个超大的工程量，真的有必要自己手工写一个Behavior吗？」难道Google爸爸的AppBarLayout真的就那么肤浅，只能实现一个单一的吸顶功能吗？在手写Behavior之前看来很有必要，看看AppBarLayout内部的实现原理呀，所谓知己知彼方能百战百胜嘛，又所谓知其然，知其所以然。如果AppBarLayout不能实现二次吸顶功能，我们要知道其中的原因，如果能实现二次吸顶的功能，那么我们应该怎么做呢？

经过了三天三夜，不断对AppBarLayout源码的深入研究以及不断的Demo验证，终于发现，原来Google爸爸心思缜密，二次吸顶的功能，早给我们想好了，就等待着我们去发掘。终于在无需手写一行自定义Behavior、无需手写嵌套滑动逻辑的情况下，不辱使命，完成了二次吸顶效果的开发。效果图如下：

代码如下

布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".coordinatorlayout.CollapsingToolbarLayoutActivity">
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/long_hate_song"></TextView>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/pic1"
            android:contentDescription="吸顶区域一"
            android:gravity="center"
            android:scaleType="fitXY"
            app:layout_scrollFlags="scroll" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/pic2"
            android:contentDescription="吸顶区域二"
            android:gravity="center"
            app:layout_scrollFlags="enterAlways|scroll"></ImageView>
        <com.peter.viewgrouptutorial.coordinatorlayout.FloatLinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_scrollFlags="enterAlways|scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/text.view3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/pic3"
                android:contentDescription="吸顶区域三"
                android:gravity="center"
                android:text="HEAD3"
                app:layout_pin="true" />
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/pic4"
                android:contentDescription="吸顶区域四"
                android:gravity="center"
                app:layout_pin="false" />
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/pic5"
                android:contentDescription="吸顶区域四"
                app:layout_pin="false" />
        </com.peter.viewgrouptutorial.coordinatorlayout.FloatLinearLayout>
        >
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

自定义FloatLinearLayout

public class FloatLinearLayout extends LinearLayout {
    int currentOffset;
    private AppBarLayout.OnOffsetChangedListener onOffsetChangedListener;
    public FloatLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setChildrenDrawingOrderEnabled(true);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            if (((LayoutParams) child.getLayoutParams()).pin) {
                setMinimumHeight(child.getMeasuredHeight());
                break;
            }
        }
    }
    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        // Add an OnOffsetChangedListener if possible
        final ViewParent parent = getParent();
        if (parent instanceof AppBarLayout) {
            // Copy over from the ABL whether we should fit system windows
            ViewCompat.setFitsSystemWindows(this, ViewCompat.getFitsSystemWindows((View) parent));
            if (onOffsetChangedListener == null) {
                onOffsetChangedListener = new FloatLinearLayout.OffsetUpdateListener();
            }
            ((AppBarLayout) parent).addOnOffsetChangedListener(onOffsetChangedListener);
            // We're attached, so lets request an inset dispatch
            ViewCompat.requestApplyInsets(this);
        }
    }
    @Override
    protected void onDetachedFromWindow() {
        // Remove our OnOffsetChangedListener if possible and it exists
        final ViewParent parent = getParent();
        if (onOffsetChangedListener != null && parent instanceof AppBarLayout) {
            ((AppBarLayout) parent).removeOnOffsetChangedListener(onOffsetChangedListener);
        }
        super.onDetachedFromWindow();
    }
    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        return childCount - i - 1;
    }
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof LayoutParams;
    }
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    }
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(), attrs);
    }
    @Override
    protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return new LayoutParams(p);
    }
    public static class LayoutParams extends LinearLayout.LayoutParams {
        boolean pin = false;
        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.FloatLinearLayout_Layout);
            pin =
                    a.getBoolean(
                            R.styleable.FloatLinearLayout_Layout_layout_pin, false);
            a.recycle();
        }
        public LayoutParams(int width, int height) {
            super(width, height);
        }
        public LayoutParams(int width, int height, float weight) {
            super(width, height, weight);
        }
        public LayoutParams(ViewGroup.LayoutParams p) {
            super(p);
        }
        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }
        public LayoutParams(LinearLayout.LayoutParams source) {
            super(source);
        }
    }
    private class OffsetUpdateListener implements com.google.android.material.appbar.AppBarLayout.OnOffsetChangedListener {
        OffsetUpdateListener() {
        }
        @Override
        public void onOffsetChanged(AppBarLayout layout, int verticalOffset) {
            currentOffset = verticalOffset;
            for (int i = 0, z = getChildCount(); i < z; i++) {
                final View child = getChildAt(i);
                final FloatLinearLayout.LayoutParams lp = (FloatLinearLayout.LayoutParams) child.getLayoutParams();
                final ViewOffsetHelper offsetHelper = getViewOffsetHelper(child);
                if (lp.pin) {
                    int offset = -currentOffset - getTop();
                    offsetHelper.setTopAndBottomOffset(MathUtils.clamp(offset, 0, offset));
                }
            }
        }
    }
    @NonNull
    static ViewOffsetHelper getViewOffsetHelper(@NonNull View view) {
        ViewOffsetHelper offsetHelper = (ViewOffsetHelper) view.getTag(com.google.android.material.R.id.view_offset_helper);
        if (offsetHelper == null) {
            offsetHelper = new ViewOffsetHelper(view);
            view.setTag(com.google.android.material.R.id.view_offset_helper, offsetHelper);
        }
        return offsetHelper;
    }
}

实现二次吸顶效果

2. 实现思路

热门文章

最新文章

相关电子书