仿网易云播放 UI

1,723 阅读2分钟

先放一下效果:


image

这是整体实现的效果,当然这只是一个比较简单的效果,如果需要符合业务上的要求还需要其他的调整,其中更多的应该考虑各种屏幕的适配效果,在这里就不考虑了,(其实是懒)。同样,与我写的所有文章一样,我是不会去详细的写如何实现的过程的。
这一点,我明白基本是没什么人有心情看一篇都是代码的文章(当然除了真正的大神的),更多的是下代码自己去看和理解。(请各位看官原谅本人的代码规范和一下不太准确的英文,有问题请发私信或评论,谢谢)

首先,在卫星菜单就已经提到过Android的硬件加速有可能是不支持某些api 的,所以如果在实现过程中没有效果,可以关闭硬件加速

setLayerType

这个方法是可以关闭的。在动画中,animator 比animation更加强大。animation 并不能改变view的位置,也就是说如果你调用了animation去移动view ,但view的onclick()是不会在你移动后的位置响应的。而animator是直接改变view属性的,view的onclick是跟着移动的。animator更加灵活一些。

animation的停止时

ClearAnimation()

调用view的该方法就行,但要明白这个方法一旦调用,view会回到最开始的位置,而不是动画停止的位置。
animator 的停止,参照了网上的方法

animatorx.start();animatorx.setCurrentPlayTime(CurrentTime);stop的时候调用CurrentTime=animatorx.getCurrentPlayTime();

animatorx.cancel();

那么就会实现停下来的时候view是动画结束的姿态。

图片是从网上随便copy了地址,(若有不妥,请私信我)然后用glide 获取的图片

Glide .with(cloudmusicActivity.this) // could be an issue! .load(imageUrl).asBitmap() //强制转换Bitmap

.into(target);}

target是glide 的一个类的实现 SimpleTarget

在ondraw方法中,最为艰难的就是画中间的那个图。这个我参考了网上教程,用

mpaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

这个属性去画,这个我在使用时并不是特别熟练。用这个函数要注意不能直接画在ondraw函数的canvas中,具体原因


f3756216-bc69-348f-9f4f-55428a78a287.png

更多的可以下代码看一看其中背景的高斯模糊图片是用了github 的一个类 已注明作者

github