IOS圖片無(wú)限輪播器的實(shí)現(xiàn)原理
首先實(shí)現(xiàn)思路:整個(gè)collectionView中只有2個(gè)cell.中間始終顯示第二個(gè)cell.
滾動(dòng):向前滾動(dòng)當(dāng)前cell的腳標(biāo)為0,向后滾動(dòng)當(dāng)前的cell腳標(biāo)為2.利用當(dāng)前cell的腳標(biāo)減去1,得到+1,或者-1,來(lái)讓圖片的索引加1或者減1,實(shí)現(xiàn)圖片的切換.
聲明一個(gè)全局變量index來(lái)保存圖片的索引,用來(lái)切換顯示在當(dāng)前cell的圖片.
在滾動(dòng)前先讓顯示的cell的腳標(biāo)變?yōu)?.代碼viewDidLoad中設(shè)置
完成一次滾動(dòng)結(jié)束后,代碼再設(shè)置當(dāng)前的cell為第二個(gè)cell(本質(zhì)上就是讓當(dāng)前顯示的cell的腳標(biāo)為1)
最后一個(gè)有一個(gè)線程問(wèn)題就是:當(dāng)你連續(xù)滾動(dòng)的時(shí)候,最后停止,當(dāng)前顯示的圖片會(huì)閃動(dòng),因?yàn)槭钱惒讲l(fā)執(zhí)行的,線程不安全導(dǎo)致.解決辦法:讓滾動(dòng)完成后設(shè)置cell的代碼加入主隊(duì)列執(zhí)行即可.
準(zhǔn)備工作,創(chuàng)建collectionViewController,storyboard,進(jìn)行類綁定,cell綁定,cell可重用標(biāo)識(shí)綁定.
創(chuàng)建的cell.h文件
// // PBCollectionCell.h // 無(wú)限滾動(dòng) // // 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 // 無(wú)限滾動(dòng) // // 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 //重寫(xiě)img的set方法來(lái)個(gè)cell進(jìn)行賦值.(當(dāng)調(diào)用cell.img = img的時(shí)候回調(diào)用set ..img的方法) -(void)setImg:(UIImage *)img{ _img = img; self.imgView.image = img; } @end
控制器的代碼詳解
// // ViewController.m // 無(wú)限滾動(dòng) // // Created by 裴波波 on 16/3/30. // Copyright © 2016年 裴波波. All rights reserved. // #import "ViewController.h" #import "PBCollectionCell.h" //定義宏圖片的個(gè)數(shù) #define kPictureCount 3 @interface ViewController () @property (strong, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout; /** * 圖片的索引 */ @property(nonatomic,assign) NSInteger index; @end •聲明全局變量index為了拼接滾動(dòng)過(guò)程中切換的圖片的索引 @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的腳標(biāo)是1,滾動(dòng)后腳標(biāo)是2或者0,湊成next值為+1或者-1(讓圖片索引+1或者-1來(lái)完成切換圖片),則 NSInteger next = indexPath.item - 1; //為了不讓next越界,進(jìn)行取余運(yùn)算 ---------+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è)置了當(dāng)前顯示圖片的cell是第二個(gè)cell,當(dāng)cell向前滾動(dòng)腳標(biāo)-1(cell的indexPath.item的值為0),向后滾動(dòng)腳標(biāo)+1(cell的indexPath.item的值為2)
•如何拼接圖片?---通過(guò)全局變量self.index: •cell向前滾動(dòng)圖片的索引self.index -1 此時(shí)cell的indexPath.item為0;然而此時(shí)圖片的索引需要減1
•cell向后滾動(dòng)圖片的索引self.index+1 此時(shí)cell的indexPath.item為2;圖片的索引需要加1
•綜上可以得出通過(guò)對(duì)cell的indexPath.item-1 再加上self.index就可以得出,要在下個(gè)圖片中顯示的圖片的索引
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ //計(jì)算偏移的整數(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來(lái)切換圖片,使用取余讓圖片索引不至于越界 //異步主隊(duì)列執(zhí)行,為了不讓連續(xù)滾動(dòng)停止后,圖片有閃動(dòng). dispatch_async(dispatch_get_main_queue(), ^{ [self scrollToSecondCell]; }); }
•cell停止?jié)L動(dòng)后將圖片的索引self.index值計(jì)算出來(lái),保存在全局變量.為了在數(shù)據(jù)源第三個(gè)方法---返回cell的時(shí)候通過(guò)cell的indexPath.item的+1或者-1以及圖片的索引self.index來(lái)正確切換要顯示的圖片.
•滾動(dòng)停止后將操作放入主隊(duì)列異步執(zhí)行,此操作是為了將中間顯示的cell的腳標(biāo)變?yōu)?,也就是將當(dāng)前顯示的圖片的cell變?yōu)榈诙€(gè)cell.放在主隊(duì)列異步執(zhí)行(不堵塞主線程,主隊(duì)列的任務(wù)順序執(zhí)行,當(dāng)主線程任務(wù)完成后再執(zhí)行切換cell為第二個(gè)cell)不會(huì)出現(xiàn)連續(xù)滾動(dòng)后閃動(dòng)圖片的bug.(此句看不懂可以略過(guò)).
//封裝設(shè)置當(dāng)前顯示的cell為第二個(gè)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滑動(dòng)前或者每次滑動(dòng)結(jié)束后都用代碼設(shè)置當(dāng)前顯示的cell為第二個(gè)cell,在數(shù)據(jù)源第三個(gè)方法也就是返回cell的方法中實(shí)現(xiàn)圖片的切換用的是cell的indexPath.item-1 = -1或者 +1 再加上圖片本身的索引值self.index就會(huì)得出即將滾出的cell要顯示的是上一張圖片還是下一張圖片.
2. cell滾動(dòng)結(jié)束后要計(jì)算當(dāng)前cell顯示圖片的索引.是通過(guò)scrollview的偏移量contentoffset.x除以scrollview的寬度,計(jì)算出當(dāng)前cell的圖片的索引保存.之后再滑動(dòng)cell的時(shí)候,會(huì)調(diào)用數(shù)據(jù)源第三個(gè)方法,就會(huì)使用保存下來(lái)的self.index以及加上cell的indexPath.item-1來(lái)計(jì)算要顯示的圖片的索引.
以上內(nèi)容是小編給大家介紹的IOS圖片無(wú)限輪播器的實(shí)現(xiàn)原理,希望對(duì)大家有所幫助!
- iOS實(shí)現(xiàn)圖片輪播器
- 兩行IOS代碼實(shí)現(xiàn)輪播圖
- IOS使用UICollectionView實(shí)現(xiàn)無(wú)限輪播效果
- iOS開(kāi)發(fā)中使用UIScrollView實(shí)現(xiàn)圖片輪播和點(diǎn)擊加載
- IOS實(shí)現(xiàn)圖片輪播無(wú)限循環(huán)效果
- iOS實(shí)現(xiàn)帶有縮放效果的自動(dòng)輪播圖
- iOS實(shí)現(xiàn)圖片輪播效果
- iOS實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- iOS實(shí)現(xiàn)輪播圖banner示例
- iOS實(shí)現(xiàn)3D卡片式輪播效果
相關(guān)文章
iOS實(shí)現(xiàn)換膚功能的簡(jiǎn)單處理框架(附源碼)
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)換膚功能的簡(jiǎn)單處理框架,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02iOS實(shí)現(xiàn)毛玻璃效果(無(wú)需要第三方)
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)毛玻璃效果,無(wú)需要第三方,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05淺談iphone X的簡(jiǎn)單適配問(wèn)題(推薦)
這篇文章主要介紹了淺談iphone X的簡(jiǎn)單適配(推薦),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11iOS開(kāi)發(fā)之TableView實(shí)現(xiàn)完整的分割線詳解
在iOS開(kāi)發(fā)中, tableView是我們最常用的UI控件之一。所以這篇文章主要給大家詳細(xì)介紹了關(guān)于iOS中的TableView分割線,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-12-12iOS實(shí)現(xiàn)抖音點(diǎn)贊動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)抖音點(diǎn)贊動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01iOS優(yōu)化UITableViewCell高度計(jì)算的一些事兒
這iOS開(kāi)發(fā)中對(duì)于UITableViewCell高度自適應(yīng)的文章已經(jīng)很多很多,但都不是自己所需要的,下面篇文章主要給大家介紹了關(guān)于iOS優(yōu)化UITableViewCell高度計(jì)算的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-11-11iOS10 權(quán)限崩潰問(wèn)題詳解及解決方案
這篇文章主要介紹了iOS10 權(quán)限崩潰問(wèn)題詳解及解決方案的相關(guān)資料,需要的朋友可以參考下2016-11-11