关于轮播图的实现, zz所了解到的有三种:
- 利用scrollView根据轮播图片的多少来创建imageview 然后添加到scrollview, 设置scrollview滑动大小, 注意的是最后一张图片的后面要再加一张我们要轮播的第一张图片, 同理第一张前面也要加我们要轮播的最后一张图片
2.同样也是利用scrollView, 这里要先说的就是上面的那种方法的缺陷, 如果要有一百张图片要轮播呢(zz也没有遇到过轮播那多的)道理就是上面的方法不是特别的合理, 我们可以利用scrollview创建三张imageview 一次添加到scrollview上, 我们始终让scrollview显示中间的一张, 当向右滑动的时候, 我们把中间的图片换成右边的, 右边的那张化成右边当前的下一张, 然后我们还是显示中间的哪一张, 同理向左边滑动也是(只不过是改变左边跟中间的图片), 这样我们就实现了复用(这次主要是说的这个)
3.利用collection view设置他横向滑动...(zz并没有利用这个实现过, 等以后有功夫了学习一下再)
经过上次一个朋友的建议学了下代码框的使用...markdown也比较好用吧... (zz只是知道了代码框这个东西..两个顿号隔开写代码)(好羡慕那些老司机写出来的东西条理清晰, 并且看着舒服的简书, 毕竟我潜水简书已经快两年了, 但是我真的没写过几次简书)废话不说上代码....
第一种方式的代码估计大家都会, 我直接上第二种的吧,
...经过上次大神的指点终于会用代码框了
新建一个类, 名字随便吧, 反正我可耻的用了我自己的名字叫ZZCycle
我在ZZCycle.h中这样写
@interface ZZCyCle : UIView
//点击图片触发的回调
@property (nonatomic, copy) void(^myblock)(NSInteger tap);
//重写初始化方法, 注意下就是数组是网络请求图片的url数组
- (id)initWithImageUrl:(NSMutableArray *)imageUrlImage imageChangeTime:(NSTimeInterval)timeInterval Frame:(CGRect)frame;
- (void)removeTimer;
@end
ZZCycle.m中是这样 先看属性设置,
#import "ZZCyCle.h"
//用的afn请求图片
#import <UIImageView+AFNetworking.h>
@interface ZZCyCle ()<UIScrollViewDelegate>
// 图片的接口地址数组
@property (nonatomic, strong) NSMutableArray *imageUrlImage;
// 自动轮播图片的时间
@property (nonatomic, assign) NSInteger timerInterval;
//底部的scrollView
@property (nonatomic, strong) UIScrollView *scrollView;
//scrollView上左边的imageView
@property (nonatomic, strong) UIImageView *leftView;
//scrollView上中间的imageView
@property (nonatomic, strong) UIImageView *currentView;
//scrollView上右边的imageView
@property (nonatomic, strong) UIImageView *rightView;
//左边的imageView在数组中对应url下标
@property (nonatomic, assign) NSInteger leftIndex;
//中间的imageView在数组中对应url下标
@property (nonatomic, assign) NSInteger currentIndex;
//右边的imageView在数组中对应url下标
@property (nonatomic, assign) NSInteger rightIndex;
//轮播图上的小圆点
@property (nonatomic, strong) UIPageControl *pageControl;
//自动轮播的定时器
@property (nonatomic, strong) NSTimer *myTimer;
//判断是否拖拽
@property (nonatomic, assign) BOOL isDrag;
@end
- (NSMutableArray *)imageUrlImage { if (_imageUrlImage == nil ) { self.imageUrlImage = [NSMutableArray array]; } return _imageUrlImage; }
- (id)initWithImageUrl:(NSMutableArray *)imageUrlImage imageChangeTime:(NSTimeInterval)timeInterval Frame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // 两个属性赋值, 方便下面调用 self.imageUrlImage = imageUrlImage; self.timerInterval = timeInterval; // scroll的初始化 [self initWithScroll]; // pageControl初始化 [self initWithPageControl]; // 定时器的初始化 [self initWithMytimer]; } return self; }
//初始化定时器
- (void)initWithMytimer { self.myTimer = [NSTimer scheduledTimerWithTimeInterval:self.timerInterval target:self selector:@selector(changeScrollView) userInfo:nil repeats:YES]; }
//初始化scrollView
- (void)changeScrollView { [self imageChange]; [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width * 2, 0) animated:YES]; }
//将view转化成image
- (UIImage*) imageWithUIView:(UIView*) view { UIGraphicsBeginImageContext(view.bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); [view.layer renderInContext:context]; UIImage* tImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return tImage; }
//在轮播的界面移除定时器的方法
- (void)removeTimer { [self.myTimer invalidate]; self.myTimer = nil; }
//初始化pageControl
- (void)initWithPageControl { self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(self.bounds.size.width / 2 - 40, self.bounds.size.height - 100, 80, 30)]; self.pageControl.numberOfPages = self.imageUrlImage.count; [self.pageControl addTarget:self action:@selector(valueChange) forControlEvents:UIControlEventValueChanged]; [self addSubview:self.pageControl]; UIView *currentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 5)]; currentView.backgroundColor = [UIColor blackColor]; UIImage *currentImage = [self imageWithUIView:currentView]; UIView *otherView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 5)]; otherView.backgroundColor = [UIColor redColor]; UIImage *otherImage = [self imageWithUIView:otherView]; [_pageControl setValue:currentImage forKey:@"_currentPageImage"]; [_pageControl setValue:otherImage forKey:@"_pageImage"]; }
- (void)valueChange { [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width * self.pageControl.currentPage, 0) animated:YES]; }
//初始化scrollView及上边的视图
- (void)initWithScroll { self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds]; self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 3, self.scrollView.frame.size.height); [self addSubview:self.scrollView]; self.scrollView.delegate = self; self.scrollView.pagingEnabled = YES; [self addSubview:self.scrollView]; // 让scrollView始终在中间图片 [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0)];
// 三张图片在数组中的位置 self.currentIndex = 0; self.leftIndex = self.imageUrlImage.count - 1; self.rightIndex = 1; // 左边的图片 self.leftView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)]; [self.leftView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:self.imageUrlImage.count - 1]]]; // 当前的图片 self.currentView = [[UIImageView alloc] initWithFrame:CGRectMake(self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)]; [self.currentView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:0]]]; // 右边的图片 self.rightView = [[UIImageView alloc] initWithFrame:CGRectMake(self.scrollView.frame.size.width * 2, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)]; [self.rightView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:1]]]; [self.scrollView addSubview:self.leftView]; [self.scrollView addSubview:self.rightView]; [self.scrollView addSubview:self.currentView]; self.currentView.userInteractionEnabled = YES; self.rightView.userInteractionEnabled = YES; self.leftView.userInteractionEnabled = YES; UITapGestureRecognizer *currenttap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(currenttap)]; [self.currentView addGestureRecognizer:currenttap]; UITapGestureRecognizer *rightTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(rightTap)]; [self.rightView addGestureRecognizer:rightTap]; UITapGestureRecognizer *leftTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(leftTap)]; [self.leftView addGestureRecognizer:leftTap]; }
- (void)leftTap { if (self.myblock) { self.myblock(self.rightIndex); } }
- (void)rightTap { if (self.myblock) { self.myblock(self.rightIndex); } }
- (void)currenttap { if (self.myblock) { self.myblock(self.currentIndex); } }
pragma mark - UIScrollViewDelegate
//scrollView的contentOfSet发生变化
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (self.isDrag) { self.pageControl.currentPage = self.currentIndex; } }
// 在scrollView将要开始拖拽的时候暂时器暂停
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { self.isDrag = YES; // 暂停定时器的方法 [self.myTimer setFireDate:[NSDate distantFuture]]; }
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { [self imageChange]; self.isDrag = NO; // 打开定时器 [self.myTimer setFireDate:[NSDate dateWithTimeIntervalSinceNow:self.timerInterval]]; }
//scrollView的contenofset发生变化对应图片的处理的方法
- (void)imageChange {
// 根据index找到对应的图片 之前先判断index的变化 // 先判断中间的index // 向右滚动
if (self.scrollView.contentOffset.x == self.scrollView.frame.size.width * 2) { if (self.currentIndex == self.imageUrlImage.count - 1) { self.currentIndex = 0; } else { self.currentIndex += 1; } }
// 向左滚动 if (self.scrollView.contentOffset.x == 0 ) { if (self.currentIndex == 0 ) { self.currentIndex = self.imageUrlImage.count - 1; } else { self.currentIndex--; } }
// 在判断右边的index if (self.currentIndex == self.imageUrlImage.count - 1) { self.rightIndex = 0; } else { self.rightIndex = self.currentIndex + 1; }
// 判断左边的index if (self.currentIndex == 0) { self.leftIndex = self.imageUrlImage.count - 1; } else { self.leftIndex = self.currentIndex - 1; }
// 换图片 [self.currentView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:self.currentIndex]]]; [self.rightView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:self.rightIndex]]]; [self.leftView setImageWithURL:[NSURL URLWithString:[self.imageUrlImage objectAtIndex:self.leftIndex]]];
[self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0) animated:NO]; if (!self.isDrag) { if (self.pageControl.currentPage == self.imageUrlImage.count - 1) { self.pageControl.currentPage = 0; } else { self.pageControl.currentPage++; } } }
完工...好像我把整个demo粘上去了, 注释上面都清楚, 请各位大虾指教...
