Android：手把手教你实现在XML中配置网易云歌手详情滑动效果

最新推荐文章于 2024-09-16 19:09:48 发布

fghis

最新推荐文章于 2024-09-16 19:09:48 发布

阅读量598

点赞数 9

分类专栏：程序员文章标签： android xml 前端

本文链接：https://blog.csdn.net/fghis/article/details/137386987

版权

本文介绍了如何在Android XML中配置HeaderLayout，实现类似网易云音乐歌手详情的滑动效果。通过自定义Transformation接口，结合CoordinatorLayout和ViewPager，实现了头部图片随着滑动的缩放和平移效果。详细解析了HeaderLayout的属性如extend_height和transformation，以及不同滑动状态下的逻辑处理。

摘要由CSDN通过智能技术生成

HeaderLayout继承自FrameLayout,且并没有改写FrameLayout的测量和布局逻辑，所以子控件的布局方式和FrameLayout相同即可，我们只需要关注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做了一个收缩的变换。