Android：手把手教你实现在 XML 中配置网易云歌手详情滑动效果
网易云音乐 App 给用户的体验效果一直都非常好，尤其是流畅的动画和滑动的联动效果，都给人一种如丝滑般的感受，这一点在其歌手详情页面体现得尤为突出。那么我们就来实现这样的效果，但是我们不能只局限在实现当中，否则当需求变化就需要改动大量的代码，同时也不能保证它的复用性，放到其他界面则需要写许多重复代码。因此我们需要跳出实现的限制，将其中的元素抽取出来，制作成一个通用的库，并且保证其可拓展性和充分的用户自定义性。经过研究，最终实现了此控件，并取名为 HeaderLayout，那么我们先来看看实现效果以便直观的感受一下。
如何使用
效果图中所有的头部控件滑动联动效果都只需要在 xml 中配置几行代码即可完成，由于 HeaderLayout 是根据 CoordinatorLayout 的机制来实现的，所以 HeaderLayout 需要包裹在 CoordinatorLayout 中才会有效果。
引入依赖
implementation "com.imurluck:headerlayout:$lastVersion"
编写布局
? HeaderLayout 继承自 FrameLayout,且并没有改写 FrameLayout 的测量和布局逻辑，所以子控件的布局方式和 F
rameLayout 相同即可，我们只需要关注 HeaderLayout 新增的几个属性。这里以效果图为例。
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<com.zzx.headerlayout_kotlin.HeaderLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
//新增属性
app:extend_height="30%">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/singer"
android:scaleType="centerCrop"
//新增属性
app:transformation="scroll|extend_scale"
/>
...
</com.zzx.headerlayout_kotlin.HeaderLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
//配置依赖布局的 layout_behavior
app:layout_behavior="@string/header_layout_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
如上所示，HeaderLayout 工作在 CoordinatorLayout 中并且是其直接子 View。ViewPager 由于需要根据 HeaderLayout 的滑动做出界面的调整，所以需要配置 layout_behavior，并且其值为 @string/header_layout_scrolling_view_behavior，这里和 AppBarLayout 的使用方式一致。
我们的工作重点是头部控件的联动效果，因此咱们聚焦于 HeaderLayout 和其子 View。我们看 AppCompatImageView，它用来展示效果图中的歌手。仔细分析效果图中 AppCompatImageView 的变换方式，可以发现它是根据父控件 HeaderLayout 的滑动而做出的相应的变化效果，HeaderLayout 向上滑动，其跟随向上，HeaderLayout 向下滑动，则跟着向下。并且，在 HeaderLayout 滑动到底部继续向下拓展时，AppCompatImageView 做了一个收缩的变换。
这一切的一切都需要归功于 app:transformation 属性，可以在代码中看见其值为"scroll|extend_scale"，那么其含义是什么呢？对此，我们引出了一个概念----Transformation，它是一个接口，其意在为根据 HeaderLayout 的滑动及状态而做出相应的变化行为。在介绍 Transformation 之前，有必要介绍一下 HeaderLayout 滑动中的几种状态。
HeaderLayout 的滑动实际上是 HeaderLayout 高度的动态变化，所以需要了解图中三种高度的含义。maxHeight 是 HeaderLayout 第一次加载测量后的高度，minHeight 是设置了 app:sticky_until_exit="true"属性的子 View 的高度之和，此属性表示子 View 不随着 HeaderLayout 而滑出屏幕，形成一种粘连在屏幕顶部的效果，且子 View 是按照顺序排列的。extendHeight 则是拓展的高度，展示在效果图中就是图片收缩 scale 时下滑的高度，extendHeight 可以在 xml 中为 HeaderLayout 设置，其值可以为 dimension，百分数，或者 float 比例，百分数和 float 比例是按照 maxHeight 而计算的。
? 而图中五种状态用来表示 HeaderLayout 高度变化过程中的滑动状态，Transformation 就是根据这五种状态而生，Transformation 作用于 HeaderLayout 的直接子 View 或者间接子 View(间接子 View 需要自己进行处理，可以参考[CommonToolbarTransformation](
)),一个子 View 可以同时拥有多个 Transformation，HeaderLayout 在其状态变化时，则会遍历子 View 的所有 Transformation，通知其做出改变。
? XML 中作用于 AppCompatImageView 的 app:transformation="scroll|extend_scale"属性,scroll 和 extend_scale 则是内置的两种 Transformation，如下表所示。
transformation 表示内置的几中 Transformation，但是想要自定义 Transformation 应该如何做呢？
自定义 Transformation
custom_transformation 属性则是专为自定义 Transformation 而服务，其值为自己实现的 Transformation 类的全路径。
自定义 Transformation 有两种方式，其一是实现 Transformation 接口，另一种方式是继承 TransformationAdapter 类，TransformationAdapter 是 Transformation 是 Transformation 接口的空实现，继承于此则不需要实现所有的方法。
interface Transformation<in V: View> {
/**
@see [HeaderLayout.scrollState]为 STATE_MIN_HEIGHT, 这个方法回调表示[HeaderLayout]的 Bottom 已经收缩到了最小高度
@param child 当前需要做变换的 view
@param parent [HeaderLayout]
@param unConsumedDy 由其他状态到此状态未消耗完的 dy
*/
fun onStateMinHeight(child: V, parent: HeaderLayout, unConsumedDy: Int)
/**
@see [HeaderLayout.scrollState]为 STATE_NORMAL_PROCESS, 在 STATE_MIN_HEIGHT 和 STATE_MAX_HEIGHT 之间
这个方法回调表示[HeaderLayout]的 Bottom 正在最小高度与最大高度之间
@param child 当前需要做变换的 view
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论