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

 

HeaderLayout

---

网易云音乐App给用户的体验效果一直都非常好，尤其是流畅的动画和滑动的联动效果，都给人一种如丝滑般的感受，这一点在其歌手详情页面体现得尤为突出。那么我们就来实现这样的效果，但是我们不能只局限在实现当中，否则当需求变化就需要改动大量的代码，同时也不能保证它的复用性，放到其他界面则需要写许多重复代码。因此我们需要跳出实现的限制，将其中的元素抽取出来，制作成一个通用的库，并且保证其可拓展性和充分的用户自定义性。经过研究，最终实现了此控件，并取名为HeaderLayout，那么我们先来看看实现效果以便直观的感受一下。

如何使用

---

效果图中所有的头部控件滑动联动效果都只需要在xml中配置几行代码即可完成，由于HeaderLayout是根据CoordinatorLayout的机制来实现的，所以HeaderLayout需要包裹在CoordinatorLayout中才会有效果。

• 引入依赖

implementation "com.imurluck:headerlayout:$lastVersion"

• 编写布局
     ​ 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"