仿网易云android界面,Android - 仿网易云音乐歌单详情页

前段时间模仿网易云音乐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里创建ArcM