admin管理员组

文章数量:1318802

仿网易云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

本文标签: 仿网易云android界面Android