UIScrollView的无限左滑轮播一点也不难

UIScrollView的轮播在如今的app中用得十分广泛,最初实现的时候方式比较拙劣,滚动到最后一个视图时再返回到第一个看起来非常的不连贯。

今天查询UIScrollView轮播资料,总结两种比较喜欢也易于理解的方法:

1、UIScrollView显示的子视图左右各放一个多出来的子视图,如本来有A/B/C三张图片,在A前面放一个ImageView显示C,在C后天放一个ImageView显示A,即C/A/B/C/A。

初始化ScrollView的时候,contentoffset 从A开始,然后setContentOffset:offSetanimated:YES 依次轮播,当播放到C之后,跳转到A后,在

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 中替换其contentoffset为第一个A的contentoffset。

代码如下:

- (void)viewDidLoad  

{  

[super viewDidLoad];  


_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 0, 300, 300)];  

_scrollView.frame = CGRectMake(10, 0, 300, 300);  

_scrollView.contentSize = CGSizeMake(300*5, 300);  

_scrollView.contentOffset = CGPointMake(300, 0);  

_scrollView.delegate = self;  


[self.view addSubview:_scrollView];  


UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];  

imageView1.image = [UIImage imageNamed:@"3.jpg"];  

[_scrollView addSubview:imageView1];  


UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(300, 0, 300, 300)];  

imageView2.image = [UIImage imageNamed:@"1.jpg"];  

[_scrollView addSubview:imageView2];  


UIImageView *imageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(300*2, 0, 300, 300)];  

imageView3.image = [UIImage imageNamed:@"2.jpg"];  

[_scrollView addSubview:imageView3];  


UIImageView *imageView4 = [[UIImageView alloc] initWithFrame:CGRectMake(300*3, 0, 300, 300)];  

imageView4.image = [UIImage imageNamed:@"3.jpg"];  

[_scrollView addSubview:imageView4];  


UIImageView *imageView5 = [[UIImageView alloc] initWithFrame:CGRectMake(300*4, 0, 300, 300)];  

imageView5.image = [UIImage imageNamed:@"1.jpg"];  

[_scrollView addSubview:imageView5];  


//  设置时钟动画 定时器  

NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];  

//  将定时器添加到主线程  

[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];  

}  

- (void)update:(NSTimer *)timer{  

CGPoint offSet =self.scrollView.contentOffset;  

offSet.x += 300;  

[self.scrollView setContentOffset:offSet animated:YES];  

}  


- (void)scrollViewDidScroll:(UIScrollView *)scrollView  

{  

CGFloat X =self.scrollView.contentOffset.x;  

if (X == 0) {  

self.scrollView.contentOffset = CGPointMake(300*3, 0);  

    }  

if (X == 300*4) {  

self.scrollView.contentOffset = CGPointMake(300, 0);  

    }  

}  

2、方法二是用固定的三个UIImageView控件,然后替换其图片来实现。

具体思路:先初始化三个图片控件,然后第一个控件放最后一张图,第二个图片放第一张图,第三个控件放第2张图。如轮播A/B/三个图片时,显示顺序是C/A/B。

后面的思路与上面类似,只不过要进行image替换。直接上代码:

- (void)viewDidLoad {  

[super viewDidLoad];  

// Do any additional setup after loading the view, typically from a nib.  

UIScrollView *scrollView =[[UIScrollView alloc] init];  

scrollView.frame = CGRectMake(0, 0, width, height);  

[self.view addSubview:scrollView];  

self.scrollView = scrollView;  

[self.scrollView setContentSize:CGSizeMake(width * 3, height)];  

//  设置隐藏横向条  

self.scrollView.showsHorizontalScrollIndicator = NO;  

//  设置自动分页  

self.scrollView.pagingEnabled = YES;  

//  设置代理  

self.scrollView.delegate = self;  

//  设置当前点  

self.scrollView.contentOffset = CGPointMake(width, 0);  

//  设置是否有边界  

self.scrollView.bounces = NO;  



//  初始化当前视图  

UIImageView *currentImageView =[[UIImageView alloc] init];  

currentImageView.image = [UIImage imageNamed:@"1.jpg"];  

[self.scrollView addSubview:currentImageView];  

self.currentImageView = currentImageView;  

self.currentImageView.frame = CGRectMake(width, 0, width, height);  

self.currentImageView.contentMode = UIViewContentModeScaleAspectFill;  

//  初始化下一个视图  

UIImageView *nextImageView = [[UIImageView alloc] init];  

nextImageView.image = [UIImage imageNamed:@"2.jpg"];  

[self.scrollView addSubview:nextImageView];  

self.nextImageView = nextImageView;  

self.nextImageView.frame = CGRectMake(width * 2, 0, width, height);  

self.nextImageView.contentMode = UIViewContentModeScaleAspectFill;  

//  初始化上一个视图  

UIImageView *preImageView =[[UIImageView alloc] init];  

preImageView.image = [UIImage imageNamed:@"3.jpg"];  

preImageView.frame = CGRectMake(0, 0, width, height);  

[self.scrollView addSubview:preImageView];  

self.preImageView = preImageView;  

self.preImageView.contentMode =UIViewContentModeScaleAspectFill;  


//  设置时钟动画 定时器  

self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];  

//  将定时器添加到主线程  

[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];  


}

- (void)update:(NSTimer *)timer{  

//定时移动  

if (_isDragging == YES) {  

return ;  

    }  

CGPoint offSet =self.scrollView.contentOffset;  

offSet.x +=offSet.x;  

[self.scrollView setContentOffset:offSet animated:YES];  


}  

// 开始拖动  

- (void) scrollViewDidScroll:(UIScrollView *)scrollView{  

static int i =1; //   当前展示的是第几张图片  

float offset = self.scrollView.contentOffset.x;  

if (self.nextImageView.image == nil || self.preImageView.image == nil) {  

//  加载下一个视图  

NSString *imageName1 = [NSString stringWithFormat:@"%d.jpg",i == KOUNT ? 1:i +1];  

_nextImageView.image = [UIImage imageNamed:imageName1];  

// 加载上一个视图  

NSString *imageName2 = [NSString stringWithFormat:@"%d.jpg",i==1 ? KOUNT :i-1];  

_preImageView.image = [UIImage imageNamed:imageName2];  

    }  

if(offset ==0){  

_currentImageView.image = _preImageView.image;  

scrollView.contentOffset = CGPointMake(width, 0);  

_preImageView.image = nil;  

if (i == 1) {  

            i =KOUNT;  

}else{  

i-=1;  

        }  

    }  

if (offset == width * 2) {  

_currentImageView.image = _nextImageView.image;  

scrollView.contentOffset = CGPointMake(width, 0);  

_nextImageView.image = nil;  

if (i == KOUNT) {  

i  =1 ;  

}else{  

i +=1 ;  

        }  

    }  


}  

主要思路都是在滑动的动画执行完毕后,在用非动画方法移动的相同区域。


IOS之UIScrollView分页无限循环滚动框架

IOS UIScrollView 翻页,并且露出左边视图和右边视图的边缘效果。 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容