内容简介：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系列之－仿掌上英雄联盟皮肤浏览效果》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
在你身边，为你设计
腾讯公司用户研究与体验设计部 / 电子工业出版社 / 2013-1 / 69.00元
设计属于所有人，也意在为所有人使用，这既是设计的价值，也是设计的责任。本书内容包括：设计理念、设计方法、用户研究、体验设计、设计流程和工具，以及团队成长与管理等方面的知识与经验分享。一起来看看 《在你身边，为你设计》 这本书的介绍吧!
