項目中許多時刻會碰著這個需求,完成多張圖片的無窮輪回輪轉,之前做過,項目中幾個處所的都用到了,其時沒有封裝,幾個處所都拷貝簡直一樣的代碼,代碼復用性欠好,明天沒事封裝了一下,應用起來比擬簡略。
起首,說說我完成輪回輪轉圖片的思惟,在UIScrollView中添加了3個UIImageView,並排分列,我們看到的永久只是第二個UIImageView,如許的話,你一向可以向左,向右滑動,當你向左滑動是,這是你滑動到了最初一個UIImageView不克不及在向右邊滑動了,這時候,我在前面靜靜的將第二個UIImageView圖片設置為以後要顯示的圖片,調劑UIScrollView的contentOffset屬性,如:
[_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO](應用者基本感到不出來這類變更)所以,此時,你看到的又是第二個UIImageView,所以此時你又可以向左滑動,當你向左邊滑動時刻處置相似,招致成果你可以向右邊,左邊無線輪回輪轉圖片。
JGCirculateSwitchImgView.h頭文件
@interface JGCirculateSwitchImgView : UIView @property(nonatomic,strong)NSArray *imgUrlArr; @end
頭文件中只要一個須要設置的成員變量imgUrlArr數組,就是你要顯示圖片途徑的數組,將經由過程這個數組拜訪圖片。
JGCirculateSwitchImgView.m文件
typedef NS_ENUM(NSInteger, SwitchDirection) { //未勝利扭轉 SwitchDirectionNone = -1, //向右扭轉圖片 SwitchDirectionRight = 0, //向左訓轉圖片 SwitchDirectionLeft = 1, };
界說了SwitchDirection列舉,表現圖片向左,向右輪轉,或許甚麼也不做。
//默許5秒訓轉圖片一次,可以依據須要轉變 #define WiatForSwitchImgMaxTime 5 #import "JGCirculateSwitchImgView.h" #import "UIImageView+WebCache.h" @interface JGCirculateSwitchImgView () //底部UIScrollView @property(nonatomic,weak)UIScrollView *contentScrollView; //顯示頁碼的UIPageControl控件 @property(nonatomic,weak)UIPageControl *pageControlView; //用保留以後UIPageControl控件顯示確當前地位 @property(nonatomic,assign)NSInteger currentPage; //用於保留以後顯示圖片在圖片urlArr數組中的索引 @property(nonatomic,assign)NSInteger currentImgIndex; //UIScrollView上的三個UIImgaView這裡經由過程3個UIImageView完成無窮輪回圖片輪轉 @property(nonatomic,weak)UIImageView *imgView1; @property(nonatomic,weak)UIImageView *imgView2; @property(nonatomic,weak)UIImageView *imgView3; @property(nonatomic,assign)BOOL isDragImgView; //SwitchDirection類型,用於保留滑動的偏向 @property(nonatomic,assign)SwitchDirection swDirection; @end
-(id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self createContentScrollView]; [self createPageControlView]; //默許第一頁 _currentPage = 0; //默許顯示第一張圖片 _currentImgIndex = 0; _isDragImgView = NO; _swDirection = SwitchDirectionNone; } return self; }
創立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; }
創立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對Count取模,並包管為正值 //這裡很主要,是完成無窮輪回的主要的一步,好比如今顯示的是第一張圖片,_currentImgIndex=0,向左滑動後就顯示_currentImgIndex+1張圖片,可是_currentImgIndex+1能夠回年夜於_imgUrlArr的數組count,這裡取模,其次還要包管為負數,好比,假如向左邊滑動是就顯示_currentImgIndex-1張圖片,_currentImgIndex-1取模也能夠為正數,此時加上count包管為負數 -(NSInteger)switchToMValue:(NSInteger)value Count:(NSInteger)count { NSInteger result = value % count; return result >=0 ? result : result + count; }
重寫imgUrlArr的set辦法
-(void)setImgUrlArr:(NSArray *)imgUrlArr { _imgUrlArr = [imgUrlArr copy]; NSInteger count = imgUrlArr.count; if (count <= 0 ) { return; } //假如只顯示一張圖片,那就沒有扭轉情形 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個ImgView輪轉多張圖片,數目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), ^{ //輪回輪轉圖片 [self switchImg]; }); } }
5秒扭轉圖片
-(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]; }); } }
當手動扭轉圖片
-(void)switchImgByDirection:(SwitchDirection)direction { if (direction == SwitchDirectionNone) { return; } [self reSetImgUrlWithDirection:direction]; [_contentScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO]; }
扭轉圖片後從新調劑3個UIImageView顯示的內容,照實現思惟所述
-(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]; } }
完成UIScrollVie3個署理辦法
#pragma mark -------------Delegate--------------- //記住滑動的偏向 - (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 { //向左扭轉 if (_swDirection == SwitchDirectionLeft) { _currentPage = [self switchToValue:_currentPage + 1 Count:_imgUrlArr.count]; }//向右扭轉 else if (_swDirection == SwitchDirectionRight) { _currentPage = [self switchToValue:_currentPage - 1 Count:_imgUrlArr.count]; } _pageControlView.currentPage = _currentPage; if (_swDirection != SwitchDirectionNone) { [self switchImgByDirection:_swDirection]; } _isDragImgView = NO; }
以上為完成代碼,如今看看怎樣用,例如:
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];
可以看到封裝以後,代碼的重用性很高,應用起來很簡略,就這麼4句代碼便可以完成圖片的無窮輪回輪轉。
以上就是本文的全體內容,願望對年夜家的進修有所贊助。
【iOS完成無窮輪回圖片輪播器的封裝】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!