前言

在不少的项目中,都会用到图片轮播这个功能,现在网上关于图片轮播的轮子也层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里给大家介绍笔者的主要思路以及大概步骤。

轮播实现步骤

层级结构

最底层是一个UIView,上面有一个UIScrollView和UIPageControl,scrollView上有两个UIImageView,imageView的宽高=scrollView的宽高=view的宽高

轮播原理

假设轮播控件的宽为x,高为y,我们设置scrollView的contentSize的宽度为3x,并且让scrollView在x方向偏移量为x,即显示中间内容

	scrollView.contentSize = CGSizeMake(3x, y);
scrollView.contentOffset = CGPointMake(x, 0);

接下来使用代理方法scrollViewDidScroll来监听scrollView的滚动,定义一个枚举来记录滚动的方向

	typedef NS_ENUM(NSInteger, Direction) {
DirectionNone = 1 << 0,
DirectionLeft = 1 << 1,
DirectionRight = 1 << 2
};
// 滚动方向
@property (nonatomic, assign) Direction direction;
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat offX = scrollView.contentOffset.x;
self.direction = offX > self.width ? DirectionLeft : offX < self.width ? DirectionRight : DirectionNone;
}

重写direction的setter方法,根据滚动方向来设置下一张图片的显示,如果是往左边滚动,那么下一张图片的位置应该在右边,如果是往右滚动,那么下一张图片的位置应该在左边。(ps:此处应该注意滚动到第一张和最后一张的边界情况)

	#pragma mark - 设置滚动方向
- (void)setDirection:(Direction)direction {
if (_direction == direction) return;
_direction = direction;
if (_direction == DirectionNone) return;
if (_direction == DirectionRight) { // 如果是向右滚动
self.nextImageView.frame = CGRectMake(0, 0, self.width, self.height);
self.nextIndex = self.currentIndex - 1;
if (self.nextIndex < 0) self.nextIndex = _images.count - 1;
}else if (_direction == DirectionLeft){ // 如果是向左边滚动
self.nextImageView.frame = CGRectMake(CGRectGetMaxX(_currentImageView.frame), 0, self.width, self.height);
self.nextIndex = (self.currentIndex + 1) % _images.count;
}
self.nextImageView.image = self.images[self.nextIndex];
}

通过代理方法scrollViewDidEndDecelerating来监听滚动结束,结束后,会变成以下两种情况:

  • 左滚之后

  • 右滚之后

此时,scrollView的偏移量为0或者2x两种情况,我们通过代码再次将scrollView的偏移量设置为x,并且将nextImageView的图片修改为赋值给currentImageView的图片

	- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
[self pauseScroll];
}
- (void)pauseScroll {
// 等于1表示没有滚动
if (self.scrollView.contentOffset.x / self.width == 1) return;
self.currentIndex = self.nextIndex;
self.pageControl.currentPage = self.currentIndex;
self.currentImageView.frame = CGRectMake(self.width, 0, self.width, self.height);
self.descLabel.text = self.describeArray[self.currentIndex];
self.currentImageView.image = self.nextImageView.image;
self.scrollView.contentOffset = CGPointMake(self.width, 0);
}

这样之后,我们看到的还是currentImageView,只是图片显示的是下一张的图片或者上一张的图片,又回到了最初的样子。

自动滚动

轮播的功能实现了,接下来就是添加定时器让它自动滚动了。

	// 开启定时器
- (void)startTimer {
// 如果只有一张,直接放回,不需要开启定时器
if (_images.count <= 1) return;
// 如果定时器已经开启,则先停止再开启
if (self.timer) [self stopTimer];
self.timer = [NSTimer timerWithTimeInterval:_time < 1 ? DEFAULTTIME : _time target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
// 下一页
- (void)nextPage {
[self.scrollView setContentOffset:CGPointMake(self.width * 2, 0) animated:YES];
}

注意

setContentOffset:animated:方法执行完毕后不会调用scrollview的scrollViewDidEndDecelerating方法,但是会调用scrollViewDidEndScrollingAnimation方法,因此我们要在该方法中调用pauseScroll

	- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
[self pauseScroll];
}

拖拽时停止定时器

当我们手动拖拽的时候,需要停止自动滚动,此时我们只需要关闭定时器就行了,当我们拖拽结束的时候,重新启动定时器

	- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self stopTimer];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
[self startTimer];
}

加载图片

在实际开发中,我们很少自动轮播本地的图片,大部分都是服务器获取的图片url,也有可能既有本地图片,又有网络图片,那么该如何加载呢?

  1. 定义一个imageArr用来接收外界传进来的数组(可以是图片,也可以是网络图片路径,可以图片和路径混合)
  2. 定义一个images用来存储图片(只装图片).判断外界传进来的数组,如果是图片,直接添加到images,如果是连接,先添加一张默认的占位图
  3. 定义一个imageDic用来缓存图片的字典,key为图片URL
  4. 定义一个operationDic用来保存下载操作的字典,key为图片URL

图片缓存策略(SDWebImage的思路)

下载图片,先从缓存中取,如果有,则替换之前的占位图片,如果没有,去沙盒中取,如果有,替换占位图片,并添加到缓存中,如果没有,开启异步线程下载

监听图片点击

在实际开发中,通常轮播图都有点击图片跳转到对应的内容的操作,因此需要监听图片的点击,提供两种思路:

  • 通过block:

    1. 定义一个block给外界
    2. 打开currentImageView的用户交互
    3. 给currentImageView添加一个点击手势
    4. 在点击手势响应方法里面调用block,并传入图片所在的索引
  • 通过代理:

    1. 定义一个协议方法,设置一个代理属性
    2. 打开currentImageView的用户交互
    3. 给currentImageView添加一个点击手势
    4. 在点击手势响应方法里面用代理调用协议方法,

结束语

上面是笔者实现轮播图的思路以及部分代码,需要源码的请戳这里,如果在使用中发现有bug,欢迎提出!如果觉得好用,记得献上你的star哦!

两个imageView实现图片轮播的更多相关文章

  1. 高效图片轮播,两个imageView实现

    本文是投稿文章,作者:codingZero 导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里 ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. iOS之两个ImageView实现图片滚动

    原创作者:codingZero 导语 在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主 ...

  4. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  5. iOS开发UI篇—UIScrollView控件实现图片轮播

    iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: #import "YYV ...

  6. Android学习笔记之图片轮播...

    PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...

  7. IOS第六天(3:scrollView 图片轮播器)

    IOS第六天(3:scrollView 图片轮播器) #import "HMViewController.h" #define kImageCount 5 @interface H ...

  8. Swift 使用CollectionView 实现图片轮播封装就是这样简单

    前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...

  9. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

随机推荐

  1. Oracle 遇到的问题:IMP-00041: 警告: 创建的对象带有编译警告解决办法

    出现IMP-00041: 警告: 创建的对象带有编译警告:以后再做数据迁移的时候需要额外注意,尤其用户中有视图或者触发器对象的时候.用户的环境是这样的,在库里有三个oracle的用户,其中一个用户中有 ...

  2. [部署开发环境]部署django的生成环境nginx+uwsgi+django

    #教程 # ubuntu部署django项目 # 部署准备 - ubuntu操作系统 -- vagrant虚拟 - Nginx服务器 -- 安装在ubuntu的web服务器 - uWSGI应用协议服务 ...

  3. typescript语言

    百度百科:2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript 0.9

  4. 重复造轮子系列--字符串处理(C语言)

    这些字符代码是以前写的,源于很久很久以前的一个VC++项目,在当时的部门编程比赛里因为用了项目代码的xsplit函数,万万没想到,那个做了几年的项目里面居然有坑..xsplit函数居然不能split连 ...

  5. C#读取xml文件写入到TreeView中

    开发过程中我们会遇到一些读取xml文件的时候,下面是我学习的整理. 用XmlDocument读取加载 XmlDocument doc = new XmlDocument(); doc.Load(&qu ...

  6. Thread sleep()休眠

    Thread sleep()休眠就是让线程进入休眠状态TIMED_WAITING,sleep("毫秒数"),当休眠时间到了之后继续线程.当然也可以用中断线程interrupt()来 ...

  7. 第十一篇:MySQL基础

    本篇内容 MySQL概述 MySQL安装 MySQL库增.删.改.查 MySQL表增.删.改.查 MySQL表记录增.删.改.查 一. MySQL概述 MySQL是一个关系型数据库管理系统,由瑞典 M ...

  8. P2857 [USACO06FEB]稳定奶牛分配Steady Cow Assignment

    题目描述 Farmer John's N (1 <= N <= 1000) cows each reside in one of B (1 <= B <= 20) barns ...

  9. 【计算机网络基础】用 telnet 检查 VPS 的某个端口是否处于监听状态

    命令 telnet x.x.x.x p 其中 x.x.x.x 代表 VPS 的 IP 地址,p 代表要检查的端口号. 起因是我的 ss 不好使了.IP 没被封,查了一下,可能是 ssserver 的端 ...

  10. [poj] 3347 Kadj Square || 计算几何的“线段覆盖”

    原题 多组数据,给出n个正方形的边长,使他们以45度角倾斜的情况下最靠左(在第一象限内),如图.求从上看能看到哪几个完整的正方形. 借鉴于https://www.cnblogs.com/Ritchie ...