使用 CoordinatorLayout + 自定义 Behavior 实现卡片堆叠效果

使用 CoordinatorLayout 实现堆叠效果

一、视图之间的滑动关联,使用 Behavior 连接

如官方示例中在布局中增加 AppBarLayout 布局,将需关联变化的 View 通过 标签app:layout_behavior="@string/appbar_scrolling_view_behavior" 建立连接关系,当AppBarLayout 发生变化会通知关联的子 view,子 view 再处理自身的变化完成一个复合型的视图变换,示例效果如下:

官方示例

简单的布局代码,需关联视图添加 Behavior ,AppBarLayout 中需滚动效果的视图添加标签 layout_scrollFlags="scroll|exitUntilCollapsed",完整代码示例:

<android.support.design.widget.CoordinatorLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="6dp">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="20sp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_round_card"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

实际上添加的 layout_behavior 标签,解析后会生成具体的 Behavior 实例,如 appbar_scrolling_view_behavior 生成的是 ScrollingViewBehavior,具体代码在 AppBarLayout 类中。我们没有看到 AppBarLayout 在 xml 文件中指定 behavior,但实际上它在内部有一个默认的 Behavior ,继承自 HeaderBehavior<AppBarLayout>,通过这个 Behavior 实现对外一层布局触摸事件的拦截监听,从而改变自身视图。

二、简单介绍 Behavior

这里指的是 CoordinatorLayout 类中的 Behavior

  • 1.Behavior 能做什么?

    • 可以拦截父布局的触摸事件,实现自己的业务逻辑,不需要通过自定义 View 实现
    • 可以添加需要关联滑动的 view,当依赖(关联)的视图发生变化时,可以及时获取通知并处理,不需通过观察者模式
    • 使用消耗量计算,如滑动是10dp,A消耗了6dp,那么剩余的4dp将给下一个视图使用,若没有消耗则由父布局接收处理,做一个事件的传递
    • 简单说明几个方法:
      • boolean layoutDependsOn 说明使用该 behavior 的视图依赖于哪个类型的 View 而变化,也就是监听指定 view
      • boolean onDependentViewChanged 当依赖的视图发生变化时,会回调这个方法,我们将在这做我们的视图处理
      • boolean onStartNestedScroll 嵌套滑动启动时回调
      • void onStopNestedScroll 嵌套滑动停止回调
      • void onNestedScroll 正在发生滑动回调
      • void onNestedPreScroll 依赖的视图处理滑动前回调
  1. Behavior 如何实现关联?
    在 CoordinatorLayout 源码中我们可以看到,无论在测量布局、摆放布局,还是处理触摸事件,都有如下代码:
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这样的效果,需要自定义一个 Behavior 类。下面是一个简单的示例代码: ``` public class MyBehavior extends CoordinatorLayout.Behavior<View> { private int mTotalScrollRange; public MyBehavior() { super(); } public MyBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) { return dependency instanceof AppBarLayout; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) { if (dependency instanceof AppBarLayout) { mTotalScrollRange = ((AppBarLayout) dependency).getTotalScrollRange(); float ratio = -dependency.getY() / mTotalScrollRange; child.setTranslationY(ratio * child.getHeight()); return true; } return false; } } ``` 在这个 Behavior 类中,我们首先判断依赖的 view 是否是 AppBarLayout,如果是就设置一个 mTotalScrollRange 变量,该变量保存了 AppBarLayout 的总滑动范围。在 onDependentViewChanged 方法中,我们计算出当前的滑动比例 ratio,并根据这个比例来设置子 view 的 Y 轴偏移量,以实现子 view 的折叠和展开。 接下来,在布局文件中将该 Behavior 应用到 RecyclerView 对应的子 view 上即可: ``` <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior=".MyBehavior" /> ``` 注意,这个 Behavior 只是一个简单的示例,实际应用中可能需要根据具体需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值