今天為大家分享一波輪播圖,本人不才,希望此分享對大家有用。今天為什么寫這個呢,之前寫過項目用scrollView封裝寫過輪播圖,但是感覺不是很好,而且傳值也很不好寫,所以今天用collectionView寫的輪播圖,傳值也很是好寫的。

5517BA7A-0DE8-43B6-8C97-7BACA687416D.png
<1>先定一些我們需要的屬性
@property (nonatomic, retain) UICollectionView *collection;
@property (nonatomic, retain) NSMutableArray *marr;// 存圖片的數(shù)組
@property (nonatomic, retain) UIPageControl *page;
@property (nonatomic, retain) NSTimer *timer;
// 調(diào)用的一些方法
- (void)viewDidLoad {
[super viewDidLoad];
[self createCollectionView];
[self createPhone];
[self createPage];
[self addTimer];
// Do any additional setup after loading the view, typically from a nib.
}
<2>//先做一些事前工作,把collectionView鋪好
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(WIDTH, 300);
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumLineSpacing = 0;
self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, 300) collectionViewLayout:layout];
[self.view addSubview:self.collection];
self.collection.backgroundColor = [UIColor whiteColor];
self.collection.pagingEnabled = YES;//開啟翻頁效果
self.collection.delegate = self;
self.collection.dataSource = self;
self.collection.showsHorizontalScrollIndicator = NO;//滑條不出現(xiàn)
[self.collection registerClass:[CellOfFirst class] forCellWithReuseIdentifier:@"pool"];
<3>collectionView 的協(xié)議方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.marr.count;// 返回圖片的個數(shù)
}
// 說一下為什么返回100個分區(qū)
// 我們可以將第50個分區(qū)的一組圖片作為用戶看到的第一組圖片,這樣就實現(xiàn)輪播的效果了。(100分區(qū)足夠了,除非腦殘劃100次)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 100;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// 自定義的Cell類
CellOfFirst *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pool" forIndexPath:indexPath];
cell.pic.image = self.marr[indexPath.row];
return cell;
}
// 本地的圖片
- (void)createPhone {
self.marr = [NSMutableArray array];
for (int i = 1; i < 12; i++) {
NSString *name = [NSString stringWithFormat:@"123_%d.jpg",i];
UIImage *image = [UIImage imageNamed:name];
[self.marr addObject:image];
}
//設置起始位置
[self.collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}
// 獲取pageControoler
// 別忘記調(diào)用呦
- (void)createPage {
self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 250, WIDTH, 50)];
[self.view addSubview:self.page];
self.page.numberOfPages = self.marr.count;
}
// 當圖片劃得時候已經(jīng)減速時
// collectionView繼承于scrollview 所以我們可用此方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 計算page算法
int page = (int) (scrollView.contentOffset.x / WIDTH + 0.5) % self.marr.count;
self.page.currentPage = page;
}
// 我們可以添加定時器了 (一樣別忘記獲取完圖片調(diào)用)
- (void)addTimer {
self.timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
- (void)nextImage {
//設置當前 indePath
NSIndexPath *currrentIndexPath = [[self.collection indexPathsForVisibleItems]lastObject];
NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currrentIndexPath.item inSection:50];
[self.collection scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
// 設置下一個滾動的item
NSInteger nextItem = currentIndexPathReset.item +1;
NSInteger nextSection = currentIndexPathReset.section;
if (nextItem==self.marr.count) {
// 當item等于輪播圖的總個數(shù)的時候
// item等于0, 分區(qū)加1
// 未達到的時候永遠在50分區(qū)中
nextItem=0;
nextSection++;
}
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
[self.collection scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}
// 當用戶自己劃圖片時 當然我們也需要定時器被移除 (時機很重要)
- (void)removeTimer{
[self.timer invalidate];
self.timer = nil;
}
// 當圖片即將開始被拖拽時 我們將定時器移除
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self removeTimer];
}
// 當圖片已經(jīng)完成被拖拽時 我們還需加上定時器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
[self addTimer];
}
這些做完我們基本就完成輪播圖自動輪播了,大家有興趣的可以嘗試下。

5.gif