關(guān)于輪播圖的實現(xiàn), zz所了解到的有三種:
- 利用scrollView根據(jù)輪播圖片的多少來創(chuàng)建imageview 然后添加到scrollview, 設(shè)置scrollview滑動大小, 注意的是最后一張圖片的后面要再加一張我們要輪播的第一張圖片, 同理第一張前面也要加我們要輪播的最后一張圖片
2.同樣也是利用scrollView, 這里要先說的就是上面的那種方法的缺陷, 如果要有一百張圖片要輪播呢(zz也沒有遇到過輪播那多的)道理就是上面的方法不是特別的合理, 我們可以利用scrollview創(chuàng)建三張imageview 一次添加到scrollview上, 我們始終讓scrollview顯示中間的一張, 當(dāng)向右滑動的時候, 我們把中間的圖片換成右邊的, 右邊的那張化成右邊當(dāng)前的下一張, 然后我們還是顯示中間的哪一張, 同理向左邊滑動也是(只不過是改變左邊跟中間的圖片), 這樣我們就實現(xiàn)了復(fù)用(這次主要是說的這個)
3.利用collection view設(shè)置他橫向滑動...(zz并沒有利用這個實現(xiàn)過, 等以后有功夫了學(xué)習(xí)一下再)
經(jīng)過上次一個朋友的建議學(xué)了下代碼框的使用...markdown也比較好用吧... (zz只是知道了代碼框這個東西..兩個頓號隔開寫代碼)(好羨慕那些老司機寫出來的東西條理清晰, 并且看著舒服的簡書, 畢竟我潛水簡書已經(jīng)快兩年了, 但是我真的沒寫過幾次簡書)廢話不說上代碼....
第一種方式的代碼估計大家都會, 我直接上第二種的吧,
...經(jīng)過上次大神的指點終于會用代碼框了
新建一個類, 名字隨便吧, 反正我可恥的用了我自己的名字叫ZZCycle
我在ZZCycle.h中這樣寫
@interface ZZCyCle : UIView
//點擊圖片觸發(fā)的回調(diào)
@property (nonatomic, copy) void(^myblock)(NSInteger tap);
//重寫初始化方法, 注意下就是數(shù)組是網(wǎng)絡(luò)請求圖片的url數(shù)組
- (id)initWithImageUrl:(NSMutableArray *)imageUrlImage imageChangeTime:(NSTimeInterval)timeInterval Frame:(CGRect)frame;
- (void)removeTimer;
@end
ZZCycle.m中是這樣 先看屬性設(shè)置,
#import "ZZCyCle.h"
//用的afn請求圖片
#import <UIImageView+AFNetworking.h>
@interface ZZCyCle ()<UIScrollViewDelegate>
// 圖片的接口地址數(shù)組
@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在數(shù)組中對應(yīng)url下標(biāo)
@property (nonatomic, assign) NSInteger leftIndex;
//中間的imageView在數(shù)組中對應(yīng)url下標(biāo)
@property (nonatomic, assign) NSInteger currentIndex;
//右邊的imageView在數(shù)組中對應(yīng)url下標(biāo)
@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) { // 兩個屬性賦值, 方便下面調(diào)用 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轉(zhuǎn)化成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)];
// 三張圖片在數(shù)組中的位置 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]]]; // 當(dāng)前的圖片 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發(fā)生變化
- (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發(fā)生變化對應(yīng)圖片的處理的方法
- (void)imageChange {
// 根據(jù)index找到對應(yīng)的圖片 之前先判斷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粘上去了, 注釋上面都清楚, 請各位大蝦指教...
