【移动应用开发技术】Android高级图片滚动控件实现3D版图片轮播器

【移动应用开发技术】Android高级图片滚动控件实现3D版图片轮播器

大家好，好久不见了，最近由于工作特别繁忙，已经有一个多月的时间没写博客了，我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章，当然要带来更加给力点的内容了，那么话不多说，赶快进入到今天的正题吧。说到图片轮播器，很多的Android应用中都会带有这个功能，比如说网易新闻、淘宝等。最新我们公司的一款应用也加入了这个功能，并且在图片轮播的基础上还增加了三维立体的效果，但比较遗憾的是，整体效果并不理想，用户体验性比较糟糕。因此，我就花了点时间去编写了一个效果更好的3D图片轮播器，自我感觉还是比较满意的，这里果断写一篇博客来分享给大家。首先来介绍一下实现原理吧，传统的图片轮播器在一个界面上只会显示一张图片，要用手指进行左右滑动才能看到其它的图片。这里我们将思维发散一下，允许在一个界面上同时显示三张图片，再通过Camera的方式对左右的两张图进行3D旋转，这样就能制作出一种立体的图片轮播器了，原理示意图如下所示：对图片进行立体操作还是要使用到Camera技术，如果你对这个技术还不太熟悉，可以到网上搜一些相关资料，或者参考我前面的一篇文章：Android实现中轴旋转特效Android制作别样的图片浏览器。那么我们现在就开始动手吧，首先新建一个Android项目，起名叫做ImageSwitchViewTest。然后新建一个Image3DView继承自ImageView，它会继承ImageView的所有属性，并且加入3D旋转的功能，代码如下所示：这段代码比较长，也比较复杂的，我们慢慢来分析。在Image3DView的构造函数中初始化了一个Camera和Matrix对象，用于在后面对图片进行3D操作。然后在initImageViewBitmap()方法中初始化了一些必要的信息，比如对当前图片进行截图，以用于后续的立体操作，得到当前图片的宽度等。然后还提供了一个setRotateData()方法，用于设置当前图片的下标和滚动距离，有了这两样数据就可以通过computeRotateData()方法来计算旋转角度的一些数据，以及通过isImageVisible()方法来判断出当前图片是否可见了，具体详细的算法逻辑你可以阅读代码来慢慢分析。接下来当图片需要绘制到屏幕上的时候就会调用onDraw()方法，在onDraw()方法中会进行判断，如果当前图片可见就调用computeRotateData()方法来计算旋转时所需要的各种数据，之后再通过Camera和Matrix来执行旋转操作就可以了。接着新建一个Image3DSwitchView继承自ViewGroup，代码如下所示：

这段代码也比较长，我们来一点点进行分析。在onLayout()方法首先要判断子视图个数是不是大于等于5，如果不足5个则图片轮播器无法正常显示，直接return掉。如果大于等于5个，就会通过一个for循环来为每个子视图分配显示的位置，而每个子视图都是一个Image3DView，在for循环中又会调用Image3DView的initImageViewBitmap()方法来为每个控件执行初始化操作，之后会调用refreshImageShowing()方法来刷新图片的显示状态。接着当手指在Image3DSwitchView控件上滑动的时候就会进入到onTouchEvent()方法中，当手指按下时会记录按下时的横坐标，然后当手指滑动时会计算出滑动的距离，并调用scrollBy()方法来进行滚动，当手指离开屏幕时会距离当前滑动的距离和速度来决定，是滚动到下一张图片，还是滚动到上一张图片，还是滚动回原图片。分别调用的方法是scrollToNext()、scrollToPrevious()和scrollBack()。在scrollToNext()方法中会先计算一下还需滚动的距离，然后进行一下边界检查，防止当前图片的下标超出合理范围，接着会调用beginScroll()方法来进行滚动。在beginScroll()方法中其实就是调用了Scroller的startScroll()方法来执行滚动操作的，当滚动结束后还会调用requestLayout()方法来要求重新布局，之后onLayout()方法就会重新执行，每个图片的位置也就会跟着改变了。至于scrollToPrevious()和scrollBack()方法的原理也是一样的，这里就不再重复分析了。那么在onLayout()方法的最后调用的refreshImageShowing()方法到底执行了什么操作呢？其实就是遍历了一下每个Image3DView控件，然后调用它的setRotateData()方法，并把图片的下标和滚动距离传进去，这样每张图片就知道应该如何进行旋转了。另外一些其它的细节就不在这里讲解了，注释写的还是比较详细的，你可以慢慢地去分析和理解。那么下面我们来看下如何使用Image3DSwitchView这个控件吧，打开或新建activity_main.xml作为程序的主布局文件，代码如下所示：可以看到，这里我们引入了一个Image3DSwitchView控件，然后在这个控件下面又添加了7个Image3DView控件，每个Image3DView其实就是一个ImageView，因此我们可以通过android:src属于给它指定一张图片。注意前面也说过了，Image3DSwitchView控件下的子控件必须大于等于5个，不然将无法正常显示。代码到这里就写得差不多了，现在运行一下程序就可以看到一个3D版的图片轮播器，使用手指进行滑动可以查看更多的图片，如下图所示：怎么样？效果还是非常不错的吧！除此之外，Image3DSwitchView中还提供了setCurrentImage()方法和setOnImageSwitchListener()方法，分别可用于设置当前显示哪张图片