内容简介:ViewPager系列之-仿掌上英雄联盟皮肤浏览效果
封面图:希维儿皮肤
能有一个双休的周末,对于 程序员 来说,也算是一件幸福的事情吧。苦逼的加了一周的班,终于可以休息放松放松了。作为一个LOL爱好者,周末最开心的事当然就是约上几个小伙伴一起开黑了。一起超神、一起连跪,也算是周末的一大乐事。
这几天英雄联盟搞活动,抽到一个安妮限定皮肤,可把我乐坏了,于是马上就登陆掌盟客户端查看皮肤。进入皮肤浏览界面之后,觉得这个皮肤浏览的效果还真不错,如下图:
作为一个程序员,当然第一时间就是思考它是怎么实现的?我能用什么方法来实现类似的效果?于是花了半天的时间,做了一个类似的效果。因此本篇文章就分享一下如何实现这一效果。最后实现的效果如下:
由于微信限制图片的大小为2M,上面的gif压缩后看起来真是AV画质啊(无奈…),原效果还是不错的,请在文末点击 查看原文 看原效果。
思路与分析
在开始写代码之前,我们还是来分析一下界面元素,和该用什么技术来实现各个部分。
1,首先是整个界面的滑动,我们肯定一眼就能看出来,用ViewPager 实现。
2,ViewPager 滑动时有放大缩小的动画,用ViewPager.Transfoemer 轻松搞定。
3,ViewPager 显示多页(展示前后页面的部分)。
4,界面图片的形状,旋转90度的等腰梯形。这个只能用自定义View来实现了。
5,整个界面的背景为当前显示图片的高斯模糊图。
代码实现
上面分析了界面的构成元素,那么现在我们就来看一下具体的实现。
1, ViewPager 展示多页
这个问题在我们前一篇文章已经讲过,这里不再重复,就是用ViewGroup 的 clipChildren 属性,值为false。也就是在整个布局的跟节点添加下面一行代码:
android:clipChildren="false"
然后,ViewPager需要设置左右Margin,也就是前后页显示的位置
从上面的效果图可以看到,当前页和前后页的部分是有间距的,我们只需要在Item布局中左右添加margin属性:
android:layout_marginLeft="30dp" android:layout_marginRight="30dp"
好了,这样ViewPager就能显示多页,并且当前页和前后页之间还有一定的间距。
2, ViewPager 切换时的动画
ViewPager 切换时的自定义动画用 ViewPager.PageTransformer
, 这个在上一篇文章也讲过,没看过的倒回去看一下。这里不细讲了,直接上代码:
3, 自定义多边形ImageView
多边形ImageView,我们通过自定义的方式实现,继承ImageView, 然后重写onDraw()方法。 这里实现这种不规则的多边形View有两种方法。
第一:使用PorterDuffXfermode,这种方法需要你给一个蒙板图片,在onDraw 方法中,先绘制蒙板图片,然后设置Paint的 setXfermode
为 PorterDuff.Mode.SRC_IN
,再绘制要显示的图片,这样就能把显示的图片裁剪成蒙板的形状。
第二: 使用canvas的 clipPath()
方法,我们用Path 来绘制多边形,然后 clipPath()
将画布裁剪成绘制的形状,然后在绘制要显示的图片。
关于PorterDuffXfermode 的更多用法,有兴趣的可以去google 一下,网上有很多相关的文章。这里我用的是两种方法的结合,先用clipPath得到一个需要形状的bitmap,然后使用PorterDuffXfermode。自定义View代码如下:
建议:这里使用clipPath方法的时候,会出现很多锯齿,即使Paint 设置了抗锯齿也没啥用,所以建议使用PorterDuffXfermode 方法。要实现类似的效果,最好是找设计师要一张蒙板形状图。在用PorterDuffXfermode实现,简单效果好。
通过上面的3步,其实整个 界面的效果差不多已经出来了,最后我们需要做的就是高斯模糊背景图。
4, 背景图高斯模糊
背景的高斯模糊就很简单了,前面我也有写过关于几种高斯模糊方法的对比(Android 图片高斯模糊解决方案),最后封装了一个方便的库(https://github.com/pinguo-zhouwei/EasyBlur)
只需要简单几行代码就行。我们在ViewPager的onPageSelect方法中,获取显示的图片,进行高斯模糊处理。
最后,给出完整的布局文件和Activity代码:
1, activity布局文件:
2, Activity代码:
ViewPager的每一个页面用Fragment 来展示的,Fragment代码如下:
说明:在Fragment中对PolygonView做了一个旋转的动画,是因为PolygonView 是一个竖着的等腰梯形,但是看效果图,其实不是,还有一个小幅度的旋转.
如果将这个旋转放在PolygonView 里面做的话,发现每次ViewPager 切换的时候,都有一个旋转动画,效果不好,因此将动画放在这里。应该还有其他更优雅一点的方法,有兴趣的可以去试一下。
最后
本篇文章是ViewPager 系列的第三篇文章,也是这个系列的最后一篇文章,这三篇文章总结了ViewPager 的一些常用方法,如Banner 、切换动画等等。还讲了如何封装一个扩展性强,比较通用的ViewPager。
这也是对自己以前用过的这些知识点的一个总结和沉淀。喜欢的话可以关注我的简书和掘金账号,会不定期的更新Android相关的优质文章。如果有什么问题的话也欢迎指出交流。
ViewPager系列文章:
1 , ViewPager系列之 打造一个通用的ViewPager:http://www.jianshu.com/p/fb24e3343a2e
2 , ViewPager系列之 仿魅族应用的广告BannerView:http://www.jianshu.com/p/653680cfe877
Android技术杂货铺
长按二维码关注我们吧!
以上所述就是小编给大家介绍的《ViewPager系列之-仿掌上英雄联盟皮肤浏览效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
美团机器学习实践
美团算法团队 / 人民邮电出版社 / 2018-8-1 / 79.00元
人工智能技术正以一种超快的速度深刻地改变着我们的生活,引导了第四次工业革命。美团作为国内O2O领域领 先的服务平台,结合自身的业务场景和数据,积极进行了人工智能领域的应用探索。在美团的搜索、推荐、计算广告、风控、图像处理等领域,相关的人工智能技术得到广泛的应用。本书包括通用流程、数据挖掘、搜索和推荐、计算广告、深度学习以及算法工程6大部分内容,全面介绍了美团在多个重要方面对机器学习的应用。 ......一起来看看 《美团机器学习实践》 这本书的介绍吧!