Android CoordinatorLayout进阶教程-自定义Behavior实例-标题抽屉效果-标题透明度渐变效果

司码帝

已于 2022-12-21 23:08:11 修改

阅读量636

点赞数

文章标签： android 动画 ui

于 2022-12-21 21:33:13 首次发布

本文链接：https://blog.csdn.net/aaaym/article/details/128391034

版权

什么是Behavior

Behavior名为行为控制，当我们需要在CoordinatorLayout中我们要实现与子视图中复杂的手势交互时，这个时候我们可能需要自定义Behavior行为控制，在自定义的Behavior我们可以通过对应的回调去处理相应的业务逻辑

实例演示以及说明

示例一：标题栏抽屉效果
话不多说，简单的实现一个如下UI效果，看看我们应该如何自定义Behavior
请添加图片描述
如图我们要实现这样的一个效果，应该怎么处理了，在没有使用CoordinatorLayout前，我们可以通过监听组件的滑动事件来动态的移动顶部的View，这是没有问题的，但是我们有了CoordinatorLayout之后，能更加简单的处理这个效果，因为CoordinatorLayout本身就是协调子视图的各种行为控制，实现这个效果我们只需要自定义一个Behavior即可

public class CaseTwoBehavior extends CoordinatorLayout.Behavior<View> {
    private float deltaY;
    public CaseTwoBehavior() {
    }

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

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

    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) {
        if(deltaY == 0){
            deltaY = dependency.getY();
        }
        float dy = dependency.getY() - deltaY;
        float y =dy==0?-child.getHeight():(dy>=-child.getHeight()?(-child.getHeight()-dy):0 );
        child.setTranslationY(y);
        return true;
    }
}

看到这里惊不惊喜，是的，就是这么几句简单的代码就可以实现上面动画显示的行为控制
在这里解释一下两个方法

layoutDependsOn(CoordinatorLayout parent, View child, View dependency)
确定Behavior需要依赖的组件，这里的child视图指的指的是需要监听dependency视图的那些个组件，dependency组件表示当前设置Behavior的视图需要依赖的组件，上面示例中我们判断依赖组件是否是NestedScrollView，如果是则返回true,onDependentViewChanged方法才会有回调，如果返回false则不会回调

onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency)
从方法名上我看可以看出这表示依赖组件滑动时回调的方法，这里的child表示设置Behavior的视图组件也就是我们的TextView，在这里我们可以处理我们自己的业务逻辑，上面的示例中依赖的组件是NestedScrollView，根据NestedScrollView滑动的坐标从而设置TextView的滑动距离
布局文件代码如下

<?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">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collsping_Toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            app:contentScrim="@color/green"
            app:title="测试"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ghsy" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
<!--        <TextView-->
<!--            android:layout_width="match_parent"-->
<!--            android:layout_height="100dp"-->
<!--            android:background="@color/gray"-->
<!--            android:gravity="center"-->
<!--            android:text="滑动隐藏区域"-->
<!--            android:textColor="@android:color/white"-->
<!--            android:textSize="30sp" />-->

<!--        <TextView-->
<!--            android:layout_width="match_parent"-->
<!--            android:layout_height="50dp"-->
<!--            android:background="@color/green"-->
<!--            android:gravity="center"-->
<!--            android:text="滑动固定区域"-->
<!--            android:textColor="@android:color/white"-->
<!--            android:textSize="20sp" />-->
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="30dp"
            android:background="#fff"
            android:text="我在测试\n
           红红火火恍恍惚惚或或或或或或\n
           或或或或或或或或或或或或或或或\n或或或或或或或或或或或或或或或或或或或或"
            android:textSize="20sp" />
    </androidx.core.widget.NestedScrollView>

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff0000"
        android:gravity="center"
        android:text="Hello World"
        android:textColor="#ffffff"
        android:textSize="18sp"
        app:layout_behavior="@string/behavior_case_two" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

在string文件中制动behavior类的路径

 <string name="behavior_case_two">com.sudio.demotest.behavior.CaseTwoBehavior</string>

示例二：标题栏透明度渐变效果
我们要实现的效果如下
请添加图片描述
这是一个滑动渐变标题栏透明度的示例，这里我们自定义一个Behavior

public class CaseThreeBehavior extends CoordinatorLayout.Behavior<TextView> {
    public CaseThreeBehavior() {
    }

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

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

    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull TextView child, @NonNull View dependency) {
        float topValue = Math.abs(dependency.getTop());
        topValue=topValue>=child.getHeight()?child.getHeight():topValue;
        /*根据滑动间距与title的比例设置透明度*/
        float alpha=topValue/child.getHeight();
        child.setAlpha(alpha);
        return true;
    }
}

这里我们给顶部标题栏设置CaseThreeBehavior，依赖的视图组件为AppBarLayout，根据AppBarLayout的滑动距离结合标题栏TextView的视图高度，我们根据比例结算出需要设置的透明度值，从而达到TextView透明度渐变的效果

布局文件代码入下

<?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">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collsping_Toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="测试"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ghsy" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:background="#fff"
            android:text="@string/geci"
            android:textSize="20sp" />
    </androidx.core.widget.NestedScrollView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/green"
        android:gravity="center"
        android:text="标题栏"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_behavior="@string/behavior_case_three"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

在string文件中制动behavior类的路径

 <string name="behavior_case_three">com.sudio.demotest.behavior.CaseThreeBehavior</string>

Behavior其他方法说明

onStartNestedScroll
当coordinatorLayout 的子View试图开始嵌套滑动的时候被调用。当返回值为true的时候表明coordinatorLayout 充当nested scroll parent 处理这次滑动，需要注意的是只有当返回值为true的时候，Behavior 才能收到后面的一些nested scroll 事件回调（如：onNestedPreScroll、onNestedScroll等）这个方法有个重要的参数nestedScrollAxes，表明处理的滑动的方向。

onNestedPreScroll
嵌套滚动发生之前被调用在nested scroll child 消费掉自己的滚动距离之前，嵌套滚动每次被nested scroll child 更新都会调用onNestedPreScroll。注意有个重要的参数consumed，可以修改这个数组表示你消费了多少距离。假设用户滑动了100px,child 做了90px 的位移，你需要把 consumed［1］的值改成90，这样coordinatorLayout就能知道只处理剩下的10px的滚动。

onNestedScroll
进行嵌套滚动时被调用

onStopNestedScrol
嵌套滚动结束时被调用，这是一个清除滚动状态等的好时机

onNestedScrollAccepted
onStartNestedScroll返回true才会触发这个方法，接受滚动处理后回调，可以在这个方法里做一些准备工作，如一些状态的重置等。

onNestedPreFling
用户松开手指并且会发生惯性动作之前调用，参数提供了速度信息，可以根据这些速度信息决定最终状态，比如滚动Header，是让Header处于展开状态还是折叠状态。返回true 表示消费了fling.

最后附上项目Demo
[点击获取项目源码

司码帝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android CoordinatorLayout进阶教程-自定义Behavior实例-标题抽屉效果-标题透明度渐变效果

Behavior名为行为控制，当我们需要在CoordinatorLayout中我们要实现与子视图中复杂的手势交互时，这个时候我们可能需要自定义Behavior行为控制，在自定义的Behavior我们可以通过对应的回调去处理相应的业务逻辑。
复制链接

扫一扫