ViewPager系列之－仿掌上英雄联盟皮肤浏览效果

内容简介：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"

从上面的效果图可以看到，当前页和前后页的部分是有间距的，我们只需要在Item布局中左右添加margin属性：

android:layout_marginLeft="30dp"
 android:layout_marginRight="30dp"

好了，这样ViewPager就能显示多页，并且当前页和前后页之间还有一定的间距。

2, ViewPager 切换时的动画

3, 自定义多边形ImageView

多边形ImageView，我们通过自定义的方式实现，继承ImageView, 然后重写onDraw()方法。 这里实现这种不规则的多边形View有两种方法。

第一：使用PorterDuffXfermode，这种方法需要你给一个蒙板图片，在onDraw 方法中，先绘制蒙板图片，然后设置Paint的 setXfermode 为 PorterDuff.Mode.SRC_IN ,再绘制要显示的图片，这样就能把显示的图片裁剪成蒙板的形状。

第二： 使用canvas的 clipPath() 方法，我们用Path 来绘制多边形，然后 clipPath() 将画布裁剪成绘制的形状，然后在绘制要显示的图片。

建议：这里使用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系列之－仿掌上英雄联盟皮肤浏览效果》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 角色皮肤渲染技术
• 皮肤可配置化：变量、样式分离
• OpenCV颜色转换和皮肤检测
• flex自定义按钮皮肤示例附图
• 皮肤开发过程中遇到的3个问题
• Python爬取王者荣耀英雄皮肤高清图片

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。