前段时间模仿网易云音乐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
9387
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
