iOS如何实现无限循环图片轮播器的封装
来源：爱站网时间：2020-11-03编辑：网友分享
无限循环图片轮播器的封装这个需求在我们的很多项目中都有出现，那么你知道iOS如何实现无限循环图片轮播器的封装吗？今天就让爱站小编为大家详细介绍吧。
无限循环图片轮播器的封装这个需求在我们的很多项目中都有出现，那么你知道iOS如何实现无限循环图片轮播器的封装吗？今天就让爱站小编为大家详细介绍吧。
首先，说说我实现循环轮转图片的思想，在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 1)
{
//这里只使用3个ImgView轮转多张图片，数量2,3,4,5,6...
for(int i = 0; i
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
以上为实现代码，现在看看怎么用，例如：
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如何实现无限循环图片轮播器的封装的内容，如果图片没有封装的话就会拷贝到几乎一样的代码，因此掌握这个方法是很重要的。
