iOS焦点图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/cailiangblog/article/details/40452235

iOS开发之焦点图的实现

给大家提供了两个demo供大家参考，直接在命令行输入：git clone https://github.com/papercai/focusImages.git就可以通过git下载到本地

什么是所谓的焦点图？实际上在一些网站上我们经常能够看到，像京东的网站，在首页的位置有几张图片一直在循环播放，并且可以用手指或鼠标滑动，这就是所谓的焦点图，是不是十分有趣？今天来我们就来实现一下这个功能。

应该知道焦点图是在UIScrollView的基础上实现的，废话不多说，直接demo演示。

为了不让主界面太臃肿也降低了代码的耦合性，我们自定义一个FocusView类。

1.在FocusView.m中：

把我们的图片保存到一个可变数组里，为什么要加2呢？这是因为，假如总共有4张图片，如果想实现图片的循环显示播放，当划到最后一张的时候，再划我们必须转到第一张，但是如果直接把scrollView的contentOffset.x设置为0会显的太快了，而且十分不美观，所以我们会在第四张照片后边增加一张和第一张一样的照片，划到第四张后，再划展示的是第一张，并且把scrollView的contentOffset.x设置为0，这样人眼根本不能察觉。同理假如用户直接用手从第一张向左滑动，也仍然需要在最左边加上一张和第四张照片一样的照片。

//初始化图片数组

-(id)initWithFrame:(CGRect)frame Images:(NSArray *)images{
self = [super initWithFrame:frame];
if (self) {
//组合图片
NSMutableArray *mutableArray = [[NSMutableArray alloc] initWithCapacity:images.count +2];
[mutableArray addObject:images.lastObject];
[mutableArray addObjectsFromArray:images];
[mutableArray addObject:images[0]];
self.images = mutableArray;
}
return self;
}

//布局

- (void)layoutSubviews
{
[super layoutSubviews];
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
scrollView.contentSize = CGSizeMake(self.images.count*self.bounds.size.width, self.bounds.size.height);
self.scrollView = scrollView;
self.scrollView.pagingEnabled = YES;
self.scrollView.delegate = self;
for (int i = 0; i<self.images.count; i++) {
UIImageView *imageView = [[UIImageView alloc]initWithImage:self.images[i]];
imageView.frame =CGRectOffset(self.scrollView.frame, i*scrollView.frame.size.width, 0);
[self.scrollView addSubview:imageView];
}
[self addSubview:self.scrollView];
[self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0)];
}

//由于想实现隔一段时间自动滑动，所以需要起一个定时器，在定时器中实现滚动事件

- (void)startTimer
{
if (!self.timer) {
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(timerFire:) userInfo:nil repeats:YES];
}
}

//滚动事件

- (void)timerFire:(NSTimer *)timer
{
//设置scrollview偏移
CGPoint point =CGPointZero;
if (self.scrollView.contentOffset.x >= (self.images.count - 1)*self.frame.size.width) {
point = CGPointMake(self.frame.size.width, 0);
[self.scrollView setContentOffset:point];
}
point = CGPointMake(self.scrollView.contentOffset.x+self.frame.size.width, 0);
[UIView animateWithDuration:.5f animations:^
{
[self.scrollView setContentOffset:point animated:YES];
}];
}

//当用户用手指滑动的时候，需要停掉定时器

- (void)stopTimer
{
[self.timer invalidate];
self.timer = nil;
}

//在UIScrollView的代理事件中监测用户拖拉事件，在即将开始拖动的时候，停掉定时器

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}

//在停止滑动后，重新启动定时器

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
//停止拖拽
[self startTimer];
}

//每时每刻都在调用

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (self.scrollView.contentOffset.x < 0) {
[scrollView setContentOffset:CGPointMake(scrollView.frame.size.width * (self.images.count - 2), 0)];
}
if (self.scrollView.contentOffset.x > (self.images.count - 1) * scrollView.frame.size.width) {
[scrollView setContentOffset:CGPointMake(scrollView.frame.size.width, 0)];
}
}

2.在主viewController 中

//调用FocusView.m中的方法，把图片传进来，并开始定时器

- (void)viewDidLoad
{
[super viewDidLoad];
QYFocusView *view = [[QYFocusView alloc]initWithFrame:CGRectMake(0, 0, 320, 110) Images:@[[UIImage imageNamed:@"0.jpg"],[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"3.jpg"]]];
[self.view addSubview:view];
[view startTimer];
}