你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS圖片無窮輪播器的完成道理

IOS圖片無窮輪播器的完成道理

編輯:IOS開發綜合

起首完成思緒:全部collectionView中只要2個cell.中央一直顯示第二個cell.

轉動:向前轉動以後cell的腳標為0,向後轉動以後的cell腳標為2.應用以後cell的腳標減去1,獲得+1,或許-1,來讓圖片的索引加1或許減1,完成圖片的切換.

聲明一個全局變量index來保留圖片的索引,用來切換顯示在以後cell的圖片.

在轉動前先讓顯示的cell的腳標變成1.代碼viewDidLoad中設置

完成一次轉動停止後,代碼再設置以後的cell為第二個cell(實質上就是讓以後顯示的cell的腳標為1)

最初一個有一個線程成績就是:當你持續轉動的時刻,最初停滯,以後顯示的圖片會明滅,由於是異步並發履行的,線程不平安招致.處理方法:讓轉動完成後設置cell的代碼參加客隊列履行便可.

預備任務,創立collectionViewController,storyboard,停止類綁定,cell綁定,cell可重用標識綁定.

創立的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上設置圖片框,並拖線到cell分類中
@property (strong, nonatomic) IBOutlet UIImageView *imgView;
@end
@implementation PBCollectionCell
//重寫img的set辦法來個cell停止賦值.(當挪用cell.img = img的時刻回挪用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"
//界說雄圖片的個數
#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設置了以後顯示圖片的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{
//盤算偏移的整數倍,偏移了0或許是2, -1是讓self.index圖片索引+1 或許 -1以切換圖片;
NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width - 1;
self.index = (offset + self.index + kPictureCount) % kPictureCount;
//實質就是轉變cell的索引,再依據self.index來切換圖片,應用取余讓圖片索引不至於越界
//異步客隊列履行,為了不讓持續轉動停滯後,圖片有明滅.
dispatch_async(dispatch_get_main_queue(), ^{
[self scrollToSecondCell];
});
}

•cell停滯轉動後將圖片的索引self.index值盤算出來,保留在全局變量.為了在數據源第三個辦法---前往cell的時刻經由過程cell的indexPath.item的+1或許-1和圖片的索引self.index來准確切換要顯示的圖片.

•轉動停滯後將操作放入客隊列異步履行,此操作是為了將中央顯示的cell的腳標變成1,也就是將以後顯示的圖片的cell變成第二個cell.放在客隊列異步履行(不梗塞主線程,客隊列的義務次序履行,當主線程義務完成後再履行切換cell為第二個cell)不會湧現持續轉動後明滅圖片的bug.(此句看不懂可以略過).

//封裝設置以後顯示的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滑動前或許每次滑動停止後都用代碼設置以後顯示的cell為第二個cell,在數據源第三個辦法也就是前往cell的辦法中完成圖片的切換用的是cell的indexPath.item-1 = -1或許 +1 再加上圖片自己的索引值self.index就會得出行將滾出的cell要顯示的是上一張圖片照樣下一張圖片.

2. cell轉動停止後要盤算以後cell顯示圖片的索引.是經由過程scrollview的偏移量contentoffset.x除以scrollview的寬度,盤算出以後cell的圖片的索引保留.以後再滑動cell的時刻,會挪用數據源第三個辦法,就會應用保留上去的self.index和加上cell的indexPath.item-1來盤算要顯示的圖片的索引.

以上內容是小編給年夜家引見的IOS圖片無窮輪播器的完成道理,願望對年夜家有所贊助!

【IOS圖片無窮輪播器的完成道理】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved