使用CoordinatorLayout實現自定義交互效果

Android中的CoordinatorLayout是一種非常實用的布局，它可以幫助我們實現複雜的交互效果。在這篇文章中，我們將會通過多個方面的角度來講解如何使用CoordinatorLayout實現自定義交互效果。

一、基本概念

在開始學習如何使用CoordinatorLayout之前，我們需要先了解一些基本概念。

1. 嵌套滑動

嵌套滑動是指一個ViewGroup中的子View能夠響應它們自己的滑動事件，而這些事件又能夠影響到父ViewGroup中其他的子View的滑動事件。這種嵌套關係被Android稱為嵌套滑動。

2. CoordinatorLayout

CoordinatorLayout是一種特殊的FrameLayout，它支持嵌套滑動和拖拽操作，並且可以通過Behavior來控制與CoordinatorLayout關聯的View的行為。

3. Behavior

Behavior是CoordinatorLayout的一個重要概念，它可以改變與CoordinatorLayout關聯的View的布局和行為，並且可以響應與之關聯的View的滑動事件和拖拽事件。

二、使用方式

1. 布局文件

使用CoordinatorLayout實現自定義交互效果的第一步是在布局文件中使用CoordinatorLayout作為根布局。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!-- 子View -->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意：CoordinatorLayout需要設置fitsSystemWindows屬性為true，以便正確處理狀態欄變化的情況。

2. 設置Behavior

使用CoordinatorLayout實現自定義交互效果的第二步是設置Behavior。我們可以為各個子View設置不同的Behavior，以實現不同的交互效果。下面是一個簡單的實例：

首先需要在代碼中定義一個Behavior：

public class CustomBehavior extends CoordinatorLayout.Behavior<View> {
    public CustomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

然後在布局文件中為子View設置這個Behavior：

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btn_test"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test"
    app:layout_behavior=".CustomBehavior" /> 

這樣就可以為這個Button設置一個自定義的Behavior了。

三、實踐案例

1. 自定義Behavior實現懸浮效果

這個案例是用自定義Behavior來實現一個ListView的懸浮效果。

首先，我們需要在ListView上面疊加一個View（這裡用TextView代替），並設置它的屬性為app:layout_behavior=”.CustomBehavior”，然後定義CustomBehavior：

public class CustomBehavior extends CoordinatorLayout.Behavior<TextView> {
    public CustomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        return dependency instanceof ListView;
    }

    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        int top = dependency.getTop();
        child.setY(top - child.getHeight());
        return true;
    }
}

這個Behavior實現了當ListView向上滾動時，TextView向上移動，直到懸浮在ListView的頂部。

2. 自定義Behavior實現CollapsingToolbarLayout效果

這個案例是用自定義Behavior來實現CollapsingToolbarLayout效果。

我們可以定義一個NestedScrollView，並且設置app:layout_behavior=”.CustomBehavior”，然後定義CustomBehavior：

public class CustomBehavior extends AppBarLayout.ScrollingViewBehavior {
    private int mViewHeight;

    public CustomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        boolean handled = super.onLayoutChild(parent, child, layoutDirection);
        if (mViewHeight == 0) {
            mViewHeight = child.getHeight();
        }
        return handled;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        if (dependency instanceof AppBarLayout) {
            int offset = ((AppBarLayout) dependency).getTotalScrollRange() + ((AppBarLayout) dependency).getTop();
            float percent = (float) Math.abs(offset) / (float) ((AppBarLayout) dependency).getTotalScrollRange();
            child.setY(dependency.getHeight() - mViewHeight * percent);
        }
        return super.onDependentViewChanged(parent, child, dependency);
    }
}

這個Behavior實現了當AppBarLayout向上滾動時，NestedScrollView向上移動，最終收縮到頂部。

結論

通過這篇文章的學習，我們了解了CoordinatorLayout的基本概念和使用方式，並且通過實踐案例演示了如何使用自定義Behavior來實現各種交互效果。

如果您想要嘗試更多的交互效果，可以通過查看CoordinatorLayout的源碼以及各種開源項目的實例代碼來學習。