關于輪播圖的實現, 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粘上去了, 注釋上面都清楚, 請各位大蝦指教...
