前言
在不少的项目中,都会用到图片轮播这个功能,现在网上关于图片轮播的轮子也层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里给大家介绍笔者的主要思路以及大概步骤。
轮播实现步骤
层级结构
最底层是一个UIView,上面有一个UIScrollView和UIPageControl,scrollView上有两个UIImageView,imageView的宽高=scrollView的宽高=view的宽高
轮播原理
假设轮播控件的宽为x,高为y,我们设置scrollView的contentSize的宽度为3x,并且让scrollView在x方向偏移量为x,即显示中间内容
1 | scrollView.contentSize = CGSizeMake(3x, y); |
接下来使用代理方法scrollViewDidScroll来监听scrollView的滚动,定义一个枚举来记录滚动的方向
1 | typedef NS_ENUM(NSInteger, Direction) { |
重写direction的setter方法,根据滚动方向来设置下一张图片的显示,如果是往左边滚动,那么下一张图片的位置应该在右边,如果是往右滚动,那么下一张图片的位置应该在左边。(ps:此处应该注意滚动到第一张和最后一张的边界情况)
1 |
|
通过代理方法scrollViewDidEndDecelerating来监听滚动结束,结束后,会变成以下两种情况:
- 左滚之后
- 右滚之后
此时,scrollView的偏移量为0或者2x两种情况,我们通过代码再次将scrollView的偏移量设置为x,并且将nextImageView的图片修改为赋值给currentImageView的图片
1 | - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { |
这样之后,我们看到的还是currentImageView,只是图片显示的是下一张的图片或者上一张的图片,又回到了最初的样子。
自动滚动
轮播的功能实现了,接下来就是添加定时器让它自动滚动了。
1 | // 开启定时器 |
注意
setContentOffset:animated:方法执行完毕后不会调用scrollview的scrollViewDidEndDecelerating方法,但是会调用scrollViewDidEndScrollingAnimation方法,因此我们要在该方法中调用pauseScroll
1 | - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { |
拖拽时停止定时器
当我们手动拖拽的时候,需要停止自动滚动,此时我们只需要关闭定时器就行了,当我们拖拽结束的时候,重新启动定时器
1 | - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { |
加载图片
在实际开发中,我们很少自动轮播本地的图片,大部分都是服务器获取的图片url,也有可能既有本地图片,又有网络图片,那么该如何加载呢?
- 定义一个imageArr用来接收外界传进来的数组(可以是图片,也可以是网络图片路径,可以图片和路径混合)
- 定义一个images用来存储图片(只装图片).判断外界传进来的数组,如果是图片,直接添加到images,如果是连接,先添加一张默认的占位图
- 定义一个imageDic用来缓存图片的字典,key为图片URL
- 定义一个operationDic用来保存下载操作的字典,key为图片URL
图片缓存策略(SDWebImage的思路)
下载图片,先从缓存中取,如果有,则替换之前的占位图片,如果没有,去沙盒中取,如果有,替换占位图片,并添加到缓存中,如果没有,开启异步线程下载
监听图片点击
在实际开发中,通常轮播图都有点击图片跳转到对应的内容的操作,因此需要监听图片的点击,提供两种思路:
通过block:
- 定义一个block给外界
- 打开currentImageView的用户交互
- 给currentImageView添加一个点击手势
- 在点击手势响应方法里面调用block,并传入图片所在的索引
通过代理:
- 定义一个协议方法,设置一个代理属性
- 打开currentImageView的用户交互
- 给currentImageView添加一个点击手势
- 在点击手势响应方法里面用代理调用协议方法,
结束语
上面是笔者实现轮播图的思路以及部分代码,需要源码的请戳这里,如果在使用中发现有bug,欢迎提出!如果觉得好用,记得献上你的star哦!
最后更新: 2023年12月02日 18:27:22
本文链接: http://example.com/post/6645abe0.html
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!