IOS圖片無限輪播器的實現(xiàn)原理
首先實現(xiàn)思路:整個collectionView中只有2個cell.中間始終顯示第二個cell.
滾動:向前滾動當前cell的腳標為0,向后滾動當前的cell腳標為2.利用當前cell的腳標減去1,得到+1,或者-1,來讓圖片的索引加1或者減1,實現(xiàn)圖片的切換.
聲明一個全局變量index來保存圖片的索引,用來切換顯示在當前cell的圖片.
在滾動前先讓顯示的cell的腳標變?yōu)?.代碼viewDidLoad中設(shè)置
完成一次滾動結(jié)束后,代碼再設(shè)置當前的cell為第二個cell(本質(zhì)上就是讓當前顯示的cell的腳標為1)
最后一個有一個線程問題就是:當你連續(xù)滾動的時候,最后停止,當前顯示的圖片會閃動,因為是異步并發(fā)執(zhí)行的,線程不安全導致.解決辦法:讓滾動完成后設(shè)置cell的代碼加入主隊列執(zhí)行即可.
準備工作,創(chuàng)建collectionViewController,storyboard,進行類綁定,cell綁定,cell可重用標識綁定.
創(chuàng)建的cell.h文件
//
// PBCollectionCell.h
// 無限滾動
//
// Created by 裴波波 on 16/3/30.
// Copyright © 2016年 裴波波. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface PBCollectionCell : UICollectionViewCell
@property(nonatomic,strong)UIImage * img;
@end
•cell.m文件
//
// PBCollectionCell.m
// 無限滾動
//
// Created by 裴波波 on 16/3/30.
// Copyright © 2016年 裴波波. All rights reserved.
//
#import "PBCollectionCell.h"
@interface PBCollectionCell ()
//不要忘記給collectionView的cell上設(shè)置圖片框,并拖線到cell分類中
@property (strong, nonatomic) IBOutlet UIImageView *imgView;
@end
@implementation PBCollectionCell
//重寫img的set方法來個cell進行賦值.(當調(diào)用cell.img = img的時候回調(diào)用set ..img的方法)
-(void)setImg:(UIImage *)img{
_img = img;
self.imgView.image = img;
}
@end
控制器的代碼詳解
//
// ViewController.m
// 無限滾動
//
// Created by 裴波波 on 16/3/30.
// Copyright © 2016年 裴波波. All rights reserved.
//
#import "ViewController.h"
#import "PBCollectionCell.h"
//定義宏圖片的個數(shù)
#define kPictureCount 3
@interface ViewController ()
@property (strong, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;
/**
* 圖片的索引
*/
@property(nonatomic,assign) NSInteger index;
@end
•聲明全局變量index為了拼接滾動過程中切換的圖片的索引
@implementation ViewController
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return kPictureCount;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString * ID = @"cell";
PBCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
//圖片索引只有下一站或者上一張,即+1,或者-1,為了切換圖片
//中間的cell的腳標是1,滾動后腳標是2或者0,湊成next值為+1或者-1(讓圖片索引+1或者-1來完成切換圖片),則
NSInteger next = indexPath.item - 1;
//為了不讓next越界,進行取余運算 ---------+next為了切換圖片
next = (self.index + kPictureCount + next) % kPictureCount;
NSString * imgName = [NSString stringWithFormat:@"%02ld",next + 1];
UIImage * img = [UIImage imageNamed:imgName];
cell.img = img;
return cell;
}
•在viewDidLoad設(shè)置了當前顯示圖片的cell是第二個cell,當cell向前滾動腳標-1(cell的indexPath.item的值為0),向后滾動腳標+1(cell的indexPath.item的值為2)
•如何拼接圖片?---通過全局變量self.index: •cell向前滾動圖片的索引self.index -1 此時cell的indexPath.item為0;然而此時圖片的索引需要減1
•cell向后滾動圖片的索引self.index+1 此時cell的indexPath.item為2;圖片的索引需要加1
•綜上可以得出通過對cell的indexPath.item-1 再加上self.index就可以得出,要在下個圖片中顯示的圖片的索引
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//計算偏移的整數(shù)倍,偏移了0或者是2, -1是讓self.index圖片索引+1 或者 -1以切換圖片;
NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width - 1;
self.index = (offset + self.index + kPictureCount) % kPictureCount;
//本質(zhì)就是改變cell的索引,再根據(jù)self.index來切換圖片,使用取余讓圖片索引不至于越界
//異步主隊列執(zhí)行,為了不讓連續(xù)滾動停止后,圖片有閃動.
dispatch_async(dispatch_get_main_queue(), ^{
[self scrollToSecondCell];
});
}
•cell停止?jié)L動后將圖片的索引self.index值計算出來,保存在全局變量.為了在數(shù)據(jù)源第三個方法---返回cell的時候通過cell的indexPath.item的+1或者-1以及圖片的索引self.index來正確切換要顯示的圖片.
•滾動停止后將操作放入主隊列異步執(zhí)行,此操作是為了將中間顯示的cell的腳標變?yōu)?,也就是將當前顯示的圖片的cell變?yōu)榈诙€cell.放在主隊列異步執(zhí)行(不堵塞主線程,主隊列的任務(wù)順序執(zhí)行,當主線程任務(wù)完成后再執(zhí)行切換cell為第二個cell)不會出現(xiàn)連續(xù)滾動后閃動圖片的bug.(此句看不懂可以略過).
//封裝設(shè)置當前顯示的cell為第二個cell的方法.
-(void)scrollToSecondCell{
NSIndexPath * idxPath = [NSIndexPath indexPathForItem:1 inSection:0];
[self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}
- (void)viewDidLoad {
[super viewDidLoad];
self.flowLayout.itemSize = self.collectionView.bounds.size;
self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.flowLayout.minimumLineSpacing = 0;
self.collectionView.backgroundColor = [UIColor whiteColor];
self.collectionView.pagingEnabled = YES;
self.collectionView.bounces = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
[self scrollToSecondCell];
}
@end
1. cell滑動前或者每次滑動結(jié)束后都用代碼設(shè)置當前顯示的cell為第二個cell,在數(shù)據(jù)源第三個方法也就是返回cell的方法中實現(xiàn)圖片的切換用的是cell的indexPath.item-1 = -1或者 +1 再加上圖片本身的索引值self.index就會得出即將滾出的cell要顯示的是上一張圖片還是下一張圖片.
2. cell滾動結(jié)束后要計算當前cell顯示圖片的索引.是通過scrollview的偏移量contentoffset.x除以scrollview的寬度,計算出當前cell的圖片的索引保存.之后再滑動cell的時候,會調(diào)用數(shù)據(jù)源第三個方法,就會使用保存下來的self.index以及加上cell的indexPath.item-1來計算要顯示的圖片的索引.
以上內(nèi)容是小編給大家介紹的IOS圖片無限輪播器的實現(xiàn)原理,希望對大家有所幫助!
相關(guān)文章
iOS 頁面滑動與標題切換顏色漸變的聯(lián)動效果實例
本篇文章主要介紹了iOS 頁面滑動與標題切換顏色漸變的聯(lián)動效果實例,具有一定的參考價值,有興趣的可以了解一下。2017-04-04
針對iOS開發(fā)的一些Xcode使用技巧小結(jié)
這篇文章主要介紹了針對iOS開發(fā)的一些Xcode使用技巧小結(jié),Xcode是Mac上編寫iOS應(yīng)用的開發(fā)環(huán)境,需要的朋友可以參考下2015-12-12
iOS開發(fā)狀態(tài)欄及設(shè)置功能全面詳解
這篇文章主要為大家介紹了iOS開發(fā)狀態(tài)欄及設(shè)置功能全面詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06

