iOS實(shí)現(xiàn)無(wú)限循環(huán)圖片輪播器的封裝
更新時(shí)間：2016年03月22日 14:44:34 作者：jiangamh
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)無(wú)限循環(huán)圖片輪播器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
項(xiàng)目中很多時(shí)候會(huì)碰到這個(gè)需求，實(shí)現(xiàn)多張圖片的無(wú)限循環(huán)輪轉(zhuǎn)，以前做過(guò)，項(xiàng)目中幾個(gè)地方的都用到了，當(dāng)時(shí)沒(méi)有封裝，幾個(gè)地方都拷貝幾乎一樣的代碼，代碼復(fù)用性不好，今天沒(méi)事封裝了一下，使用起來(lái)比較簡(jiǎn)單。
首先，說(shuō)說(shuō)我實(shí)現(xiàn)循環(huán)輪轉(zhuǎn)圖片的思想，在UIScrollView中添加了3個(gè)UIImageView，并排排列，我們看到的永遠(yuǎn)只是第二個(gè)UIImageView，這樣的話(huà)，你一直可以向左，向右滑動(dòng)，當(dāng)你向左滑動(dòng)是，這是你滑動(dòng)到了最后一個(gè)UIImageView不能在向左邊滑動(dòng)了，這時(shí)，我在后面悄悄的將第二個(gè)UIImageView圖片設(shè)置為當(dāng)前要顯示的圖片，調(diào)整UIScrollView的contentOffset屬性，如：
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]（使用者根本感覺(jué)不出來(lái)這種變化）所以，此時(shí)，你看到的又是第二個(gè)UIImageView，所以此時(shí)你又可以向左滑動(dòng)，當(dāng)你向右邊滑動(dòng)時(shí)候處理類(lèi)似，導(dǎo)致結(jié)果你可以向左邊，右邊無(wú)線(xiàn)循環(huán)輪轉(zhuǎn)圖片。
JGCirculateSwitchImgView.h頭文件
@interface JGCirculateSwitchImgView : UIView @property(nonatomic,strong)NSArray *imgUrlArr; @end
頭文件中只有一個(gè)需要設(shè)置的成員變量imgUrlArr數(shù)組，就是你要顯示圖片路徑的數(shù)組，將通過(guò)這個(gè)數(shù)組訪(fǎng)問(wèn)圖片。
JGCirculateSwitchImgView.m文件
typedef NS_ENUM(NSInteger, SwitchDirection)
{
//未成功旋轉(zhuǎn)
SwitchDirectionNone = -1,
//向右旋轉(zhuǎn)圖片
SwitchDirectionRight = 0,
//向左訓(xùn)轉(zhuǎn)圖片
SwitchDirectionLeft = 1,
};
定義了SwitchDirection枚舉，表示圖片向左，向右輪轉(zhuǎn)，或者什么也不做。
//默認(rèn)5秒訓(xùn)轉(zhuǎn)圖片一次,可以根據(jù)需要改變 #define WiatForSwitchImgMaxTime 5 #import "JGCirculateSwitchImgView.h" #import "UIImageView+WebCache.h" @interface JGCirculateSwitchImgView () //底部UIScrollView @property(nonatomic,weak)UIScrollView *contentScrollView; //顯示頁(yè)碼的UIPageControl控件 @property(nonatomic,weak)UIPageControl *pageControlView; //用保存當(dāng)前UIPageControl控件顯示的當(dāng)前位置 @property(nonatomic,assign)NSInteger currentPage; //用于保存當(dāng)前顯示圖片在圖片urlArr數(shù)組中的索引 @property(nonatomic,assign)NSInteger currentImgIndex; //UIScrollView上的三個(gè)UIImgaView這里通過(guò)3個(gè)UIImageView實(shí)現(xiàn)無(wú)限循環(huán)圖片輪轉(zhuǎn) @property(nonatomic,weak)UIImageView *imgView1; @property(nonatomic,weak)UIImageView *imgView2; @property(nonatomic,weak)UIImageView *imgView3; @property(nonatomic,assign)BOOL isDragImgView; //SwitchDirection類(lèi)型，用于保存滑動(dòng)的方向 @property(nonatomic,assign)SwitchDirection swDirection; @end
-(id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame])
{
[self createContentScrollView];
[self createPageControlView];
//默認(rèn)第一頁(yè)
_currentPage = 0;
//默認(rèn)顯示第一張圖片
_currentImgIndex = 0;
_isDragImgView = NO;
_swDirection = SwitchDirectionNone;
}
return self;
}
創(chuàng)建UIScrollView代碼
-(void)createContentScrollView
{
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
scrollView.delegate = self;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.shouldGroupAccessibilityChildren = NO;
scrollView.pagingEnabled = YES;
[self addSubview:scrollView];
_contentScrollView = scrollView;
}
創(chuàng)建UIPageControl
-(void)createPageControlView
{
UIPageControl *pageControlVw = [[UIPageControl alloc] init];
pageControlVw.frame = CGRectMake(0, 0, 80, 20);
pageControlVw.center = CGPointMake(self.center.x, self.bounds.size.height - 20);
pageControlVw.backgroundColor = [UIColor redColor];
_pageControlView.pageIndicatorTintColor = [UIColor yellowColor];
_pageControlView.currentPageIndicatorTintColor = [UIColor purpleColor];
[self addSubview:pageControlVw];
_pageControlView = pageControlVw;
}
//value對(duì)Count取模,并保證為正值
//這里很重要，是實(shí)現(xiàn)無(wú)限循環(huán)的重要的一步，比如現(xiàn)在顯示的是第一張圖片，_currentImgIndex=0,向左滑動(dòng)后就顯示_currentImgIndex+1張圖片，可是_currentImgIndex+1可能回大于_imgUrlArr的數(shù)組count，這里取模，其次還要保證為正數(shù)，比如，如果向右邊滑動(dòng)是就顯示_currentImgIndex-1張圖片，_currentImgIndex-1取模也可能為負(fù)數(shù)，此時(shí)加上count保證為正數(shù)
-(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count
{
NSInteger result = value % count;
return result >=0 ? result : result + count;
}
重寫(xiě)imgUrlArr的set方法
-(void)setImgUrlArr:(NSArray *)imgUrlArr
{
_imgUrlArr = [imgUrlArr copy];
NSInteger count = imgUrlArr.count;
if (count <= 0 )
{
return;
}
//如果只顯示一張圖片,那就沒(méi)有旋轉(zhuǎn)情況
if (count == 1)
{
UIImageView *imgView = [[UIImageView alloc]init];
imgView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
[_contentScrollView addSubview:imgView];
_pageControlView.numberOfPages = 1;
_pageControlView.currentPage = 0;
_contentScrollView.contentSize = CGSizeMake(self.bounds.size.width, self.bounds.size.height);
NSURL *imgUrl = [NSURL URLWithString:imgUrlArr[0]];
[imgView sd_setImageWithURL:imgUrl placeholderImage:nil];
return;
}
if (count > 1)
{
//這里只使用3個(gè)ImgView輪轉(zhuǎn)多張圖片，數(shù)量2,3,4,5,6...
for(int i = 0; i < 3 ;i++)
{
UIImageView *imgView = [[UIImageView alloc] init];
imgView.frame = CGRectMake(i * self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
imgView.layer.masksToBounds = YES;
NSString *urlStr = urlStr = _imgUrlArr[[self switchToValue:i-1 Count:count]];
NSURL *imgUrl = [NSURL URLWithString:urlStr];
[imgView sd_setImageWithURL:imgUrl placeholderImage:nil];
if (i == 0)
{
_imgView1 = imgView;
}
else if (i == 1)
{
_imgView2 = imgView;
}
else if (i == 2)
{
_imgView3 = imgView;
}
[_contentScrollView addSubview:imgView];
}
_pageControlView.numberOfPages = count;
_pageControlView.currentPage = 0;
_contentScrollView.contentSize = CGSizeMake(self.bounds.size.width * 3, self.bounds.size.height);
_currentImgIndex = 0;
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
//循環(huán)輪轉(zhuǎn)圖片
[self switchImg];
});
}
}
5秒旋轉(zhuǎn)圖片
-(void)switchImg
{
while (1)
{
[NSThread sleepForTimeInterval:WiatForSwitchImgMaxTime];
//如果正在拖拽圖片，此次作廢
if (_isDragImgView) {
continue;
}
_currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];
dispatch_async(dispatch_get_main_queue(), ^{
_pageControlView.currentPage = _currentPage;
_contentScrollView.contentOffset = CGPointMake(2 * self.bounds.size.width, 0);
[self reSetImgUrlWithDirection:SwitchDirectionLeft];
});
}
}
當(dāng)手動(dòng)旋轉(zhuǎn)圖片
-(void)switchImgByDirection:(SwitchDirection)direction
{
if (direction == SwitchDirectionNone) {
return;
}
[self reSetImgUrlWithDirection:direction];
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];
}
旋轉(zhuǎn)圖片后重新調(diào)整3個(gè)UIImageView顯示的內(nèi)容，如實(shí)現(xiàn)思想所述
-(void)reSetImgUrlWithDirection:(SwitchDirection)direction
{
if (direction == SwitchDirectionRight) {
[_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 2 Count:_imgUrlArr.count]]] placeholderImage:nil];
[_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count]]] placeholderImage:nil];
[_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];
_currentImgIndex = [self switchToValue:_currentImgIndex - 1 Count:_imgUrlArr.count];
}
else if(direction == SwitchDirectionLeft)
{
[_imgView1 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex Count:_imgUrlArr.count]]] placeholderImage:nil];
[_imgView2 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count]]] placeholderImage:nil];
[_imgView3 sd_setImageWithURL:[NSURL URLWithString:_imgUrlArr[[self switchToValue:_currentImgIndex + 2 Count:_imgUrlArr.count]]] placeholderImage:nil];
_currentImgIndex = [self switchToValue:_currentImgIndex + 1 Count:_imgUrlArr.count];
}
}
實(shí)現(xiàn)UIScrollVie3個(gè)代理方法
#pragma mark -------------Delegate---------------
//記住滑動(dòng)的方向
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
static float newx = 0;
static float oldx = 0;
newx= scrollView.contentOffset.x ;
if (newx != oldx )
{
if (newx > oldx)
{
_swDirection = SwitchDirectionLeft;
}else if(newx < oldx)
{
_swDirection = SwitchDirectionRight;
}
oldx = newx;
}
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
_isDragImgView = YES;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//向左旋轉(zhuǎn)
if (_swDirection == SwitchDirectionLeft)
{
_currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count];
}//向右旋轉(zhuǎn)
else if (_swDirection == SwitchDirectionRight)
{
_currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count];
}
_pageControlView.currentPage = _currentPage;
if (_swDirection != SwitchDirectionNone) {
[self switchImgByDirection:_swDirection];
}
_isDragImgView = NO;
}
以上為實(shí)現(xiàn)代碼，現(xiàn)在看看怎么用，例如：
JGCirculateSwitchImgView *jView = [[JGCirculateSwitchImgView alloc] initWithFrame:CGRectMake(20,100, 280, 250)]; NSArray *imgUrlArr = @[@"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201119031647109.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201116215754685.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201115524758041.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201114495822068.jpg", @"http://www.blisscake.cn/Upload/Product/Show/Source/ps_1507201107522493367.jpg"]; jView.imgUrlArr = imgUrlArr; [self.view addSubview:jView];
可以看到封裝之后，代碼的重用性很高，使用起來(lái)很簡(jiǎn)單，就這么4句代碼就可以實(shí)現(xiàn)圖片的無(wú)限循環(huán)輪轉(zhuǎn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- IOS開(kāi)發(fā)之UIScrollView實(shí)現(xiàn)圖片輪播器的無(wú)限滾動(dòng)
- 一行iOS代碼實(shí)現(xiàn)圖片無(wú)限輪播器
- IOS圖片無(wú)限輪播器的實(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)圖片輪播器
相關(guān)文章
UILabel顯示定時(shí)器文本跳動(dòng)問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于UILabel顯示定時(shí)器文本跳動(dòng)問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)各位iOS開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了iOS 如何高效使用的多線(xiàn)程，幫助大家提高ios 開(kāi)發(fā)的效率，感興趣的朋友可以了解下2020-09-09
這篇文章主要給大家介紹了關(guān)于iOS開(kāi)發(fā)之在列表上方添加水印的相關(guān)資料，文中給出了詳細(xì)的示例代碼供需要的朋友們參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
簡(jiǎn)單說(shuō)說(shuō)iOS之WKWebView的用法小結(jié)
iOS8.0之后我們使用 WebKit框架中的WKWebView來(lái)加載網(wǎng)頁(yè)。這篇文章主要介紹了簡(jiǎn)單說(shuō)說(shuō)iOS之WKWebView的用法小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
詳解iOS App中UiTabBarController組件的基本用法
UiTabBarController組件即是用來(lái)創(chuàng)建App中的Tab視圖切換選項(xiàng)欄,下面將詳解iOS App中UiTabBarController組件的基本用法,包括左右滑動(dòng)切換標(biāo)簽頁(yè)等基本功能的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
干貨分享!主要為大家詳細(xì)介紹了!iOS10 SiriKit QQ適配,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了IOS 圓球沿著橢圓軌跡做動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了IOS 指紋識(shí)別詳解的相關(guān)資料,并附實(shí)例代碼，需要的朋友可以參考下2016-11-11
iOS 本地視頻和網(wǎng)絡(luò)視頻流播放實(shí)例代碼
本篇文章主要介紹了iOS 本地視頻和網(wǎng)絡(luò)視頻流播放實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
下面小編就為大家?guī)?lái)一篇清除WKWebView cookies的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04