高仿模仿网易云音乐

前段时间模仿网易云音乐UI使用DataBinding做了一个App：CloudReader，今天把其中的类似歌单详情页单独拿出来说一下，我觉得其中还是有些干货的，关联到的知识点还比较有价值，而且也有很多需要注意的地方。

 

效果图对比：

 

网易云音乐App原图：

 

 

 

网易云音乐App原图.gif

 

模仿的效果图：

 

 

 

模仿的效果图.gif

 

建议大家直接看CloudReader项目应用里的效果，里面的内容部分有加载中的loading图，效果更逼真。

 

基本布局：

 

FrameLayout

 

----- MyNestedScrollView // 为了Api23下的滑动兼容

 

---- LinearLayout // 内容部分

 

----- RelativeLayout

 

---- ImageView // Toolbar后面的背景图

 

---- Toolbar // 标题栏

 

由于篇幅原因，不能做详细的介绍，这里就简单介绍实现这种效果的思路：

 

实现思路：

 

1、Activity设置自定义Shared Element切换动画

 

2、透明状态栏(透明Toolbar,使背景图上移)

 

3、Toolbar底部增加和背景一样的高斯模糊图，并上移图片(为了使背景图的底部作为Toolbar的背景)

 

4、上下滑动，通过NestedScrollView拿到移动的高度，同时调整Toolbar的背景图透明度

 

1、Activity设置自定义元素共享切换动画

 

大家可以发现页面跳转时图片移动的是一个曲线路径，我们可以定制View的过渡切换效果，这是Material Design中比较常见的用法，Api21以上才有效。需要在开启页面时使用ActivityOptions.makeSceneTransitionAnimation()，其中定义共享的view和transitionName。然后在对应的Activity里创建ArcMotion对象。ArcMotion是PathMotion子类，是个曲线路径，对应代码片：

 

// Activity设置自定义 Shared Element切换动画

 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

 

//定义ArcMotion

 

ArcMotion arcMotion = ne