无限轮播图片

现在基本上每个应用的头部,都会是一个无限滚动显示图片的scrollview,然后点击图片可以跳转到不同的页面。今天我们来学习下如何封装一个这样的控件。

需求

  • 三个imageview控件实现多张image的无限滚动
  • 点击图片,可以拿到图片的信息给调用者使用

无限滚动效果图

image

点击图片事件

图片对应的信息一般由服务器返回,被封装到model,再传递给我们封装的无限滚动控件。当调用者通过代理方法实现回调,点击每张图片,我们会返回被点击图片对应的信息,这样调用者就可以拿到这些信息去做一些事情。
如下所示,返回了被点击图片的name和url

277755-27dc12fa3831ace8
image


无限滚动scrollview封装

我们具体来看看如何封装一个无限滚动的uiscrollview,并实现点击事件。
下面给出了具体的实现代码,并且做了很详细的描述。
但是有两个方法比较难理解,我会单独用例子来讲解。

难点1、如何找出屏幕占比多的图片

在InfiniteRollScrollView.m类文件中有如下方法。该方法的作用是判断当用户拖拽图片时,两张图片同时显示在屏幕上,如果用户此时松开手,那么应该完全显示哪张图片。此时我们需要判断哪张图片占据的屏幕比例较多,就显示该张图片。

该情况如下所示:

277755-4e848eaf6ea8a647

image

实现方法

我们只研究横向滚动时的情况,如何找出最小distance对应的imageview

假设三个imageview 的frame的x值如下:

image1-x: 0
image2-x: 100
image3-x: 200

PS:

移动scrollview的时候,不会改变image view的frame,只会不断改变scrollview的bounds,造成scrollview上面的子控件image view的位置也跟着不断变化,从而产生了image view在不断移动的感觉。

scrollview的contentoffset和imageview的x值的差值的绝对值有如下几种情况

情况1:

offset : 20

ABS(offset-image1-x): ABS(20-0) = 20

ABS(offset-image2-x): ABS(20-100) = 80

ABS(offset-image3-x): ABS(20-200)= 180

image3的差值大于100,故超出屏幕。最小差值为image1的20,此时image1占屏幕80,image2占屏幕20,image1占多,松开手应该显示image1。

示例图如下:

277755-900556ab3c26c8fb

image

情况2:

offset : 50

ABS(offset-image1-x): 50

ABS(offset-image2-x): 50

ABS(offset-image3-x): 150

此时为临界点,image1和image2各占屏幕一半,image3超出屏幕

示例图如下:

277755-9c00e6dd00cdb588

image

情况3:

offset : 60

ABS(offset-image1-x): 60

ABS(offset-image2-x): 40

ABS(offset-image3-x): 140

Image3超出屏幕,最小差值为为image2的40,此时image1占屏幕40,image2占屏幕60,image2占多,松开手应该显示image2

示例图如下:
277755-72c7c15758ef5afb

image

情况4:

offset : 150

ABS(offset-image1-x): 150

ABS(offset-image2-x): 50

ABS(offset-image3-x): 50

image1超出屏幕。此时为临界点,image2和image3各占屏幕一半

示例图如下:

277755-2a872557b60af9f1

image


情况5:

offset : 160

ABS(offset-image1-x): 160

ABS(offset-image2-x): 60

ABS(offset-image3-x): 40

image1超出屏幕。最小差值为40,此时image3占屏幕40,image1占屏幕60,image3占多,松开手应该显示image3

示例图如下:

277755-9c9588b505fd649e

image

通过上面五种情况的分析,可以看出使用上面的方法可以找出在屏幕上占比更多的imageview。


难点2、如何使用三个imageview实现无限滚动

从刚开始的示例图中可以看到有五张图片,但是只使用了三个imageview来实现循环利用。

实现代码

先看示意图,假设我们有四张图片,要用三个imageview循环显示(更多的图片情况类似)
277755-4c25febcba507d88

image

277755-b0aa94182615fe04

image

277755-9c58870132130c48

image

277755-4235b2c3e4999ed0

image

如此循环往复,就可以实现三个imageview显示无限张图片了。

结合上面的代码和示例图应该不难理解。


如何使用

假设我们在viewcontroller类中使用InfiniteRollScrollView类。示例代码如下:


总结:

其实上面的封装还不够完美,因为需要调用者传入需要显示的图片和图片对应的model,这需要调用者自己下载好了图片,然后传入。其实我们可以让调用者仅仅传入所有需要显示的image的model,我们帮他下载好了直接显示。

demo地址:https://github.com/XiMuYouZi/InfiniteRoll

1 9 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部