iOS ScrollView自动循环滑动

最新推荐文章于 2025-10-20 00:16:10 发布

原创最新推荐文章于 2025-10-20 00:16:10 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #objective-c

IOS学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Swift在iOS应用中创建一个自动滑动的广告轮播视图，通过UIScrollView和多个UIImageView实现312和231的切换顺序，配合定时器和PageControl完成交互。

有些时候我们项目会在首页显示一些自动滑动的广告，需要用到scrollview来编写，

具体思路是，

1.需要在scrollview上面添加三个imageview，下面以显示三张图片为例子，

我们需要把要默认显示的第一张image放在中间，那左边就需要放第三张图片，右边放第二张图片

例如展示顺序默认是第三张，第一张，第二张（312）, 向右滑动一次就是第二张，第三张，第一张（231），，，依次顺序类推，

向左滑动默认是是312，向左滑动一次展示顺序是123，

ViewController.h

#import "ViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface ViewController ()<UIScrollViewDelegate>

{

NSInteger _currentIndex;

NSTimeInterval _sliderTime; //滑动间隔时间

}

@property(nonatomic,strong)UIScrollView *scrollerView;

@property(nonatomic,strong)NSTimer *timer; //定时器

@property (strong, nonatomic)UIPageControl *pageControl; //底部滑动点

@property(nonatomic,strong)NSMutableArray <UIImageView *> *mutView;

@property (nonatomic, strong) NSMutableArray *imageData; //存储Image

@end

ViewController.m

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.



self.view.backgroundColor = [UIColor whiteColor];



[self initScrollView];

[self initImgView];

[self initPageControl];



//设置自动滑动间隔时间

_sliderTime = 2.0f;

//设置可滑动区域

_scrollerView.contentSize = CGSizeMake(_scrollerView.frame.size.width * _mutView.count, 0);

//默认在中间位置

_scrollerView.contentOffset = CGPointMake(_scrollerView.frame.size.width, 0);



//开启定时器

_timer = [NSTimer scheduledTimerWithTimeInterval:_sliderTime target:self selector:@selector(scrollerChange) userInfo:nil repeats:YES];

}

加载图片，初始化滑动页面滑动条，

/**

加载图片

*/

-(NSMutableArray *)imageData{

if (!_imageData) {

_imageData = [NSMutableArray array];

for (int i = 1; i < 4; i++) {

[_imageData addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d.png",i]]];

}

}

return _imageData;

}

/**

初始化滑动view

*/

-(void)initScrollView{

if(!_scrollerView){

_scrollerView = [[UIScrollView alloc] initWithFrame:CGRectMake(20, 98 + 40, kScreenWidth - 20 *2, 100)];

_scrollerView.pagingEnabled = YES;

_scrollerView.delegate = self;

_scrollerView.layer.cornerRadius = 20.0f;

_scrollerView.layer.masksToBounds = YES;

_scrollerView.showsVerticalScrollIndicator = NO;

_scrollerView.showsHorizontalScrollIndicator = NO;

[self.view addSubview:_scrollerView];

}

}

/**

初始化滑动条

*/

-(void)initPageControl{

if(!_pageControl){

_pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(CGRectGetMidX(_scrollerView.frame) - 50, CGRectGetMaxY(_scrollerView.frame) - 20, 100, 20)];

CGSize size= [_pageControl sizeForNumberOfPages:_mutView.count];

_pageControl.bounds=CGRectMake(0, 0, size.width, size.height);

_pageControl.pageIndicatorTintColor=[UIColor colorWithRed:193/255.0 green:219/255.0 blue:249/255.0 alpha:1];

//设置当前页颜色

_pageControl.currentPageIndicatorTintColor=[UIColor colorWithRed:0 green:150/255.0 blue:1 alpha:1];

_pageControl.numberOfPages = _mutView.count;

_pageControl.currentPage = 0;

[self.view addSubview:_pageControl];

}

}

/**

初始化滑动页面

*/

-(void)initImgView{

if(!_mutView){

_mutView = [NSMutableArray new];

for (NSInteger i=0; i<3; i++) {

UIImageView *imgView = [UIImageView new];

imgView.frame = CGRectMake(i*_scrollerView.frame.size.width, 0, _scrollerView.frame.size.width, 100);

imgView.contentMode=UIViewContentModeScaleToFill;

[_scrollerView addSubview:imgView];

[_mutView addObject:imgView];

}

//加载左边位置图片

_mutView[0].image = self.imageData.lastObject;

//加载中间位置图片

_mutView[1].image = self.imageData.firstObject;

//加载右边位置图片

_mutView[2].image = self.imageData[1];

}

}

-(void)scrollerChange{

NSInteger leftIndex,rightIndex;



//向右滑动

_currentIndex = (_currentIndex + 1)%_mutView.count;



//重新设置中间图片

_mutView[1].image = self.imageData[_currentIndex];



//重新设置左右图片

leftIndex = (_currentIndex + _mutView.count - 1) % _mutView.count;

rightIndex = (_currentIndex + 1) % _mutView.count;



_mutView[0].image = self.imageData[leftIndex];

_mutView[2].image = self.imageData[rightIndex];



//向右滑动动画

__weak typeof(self) weakSelf = self;

[UIView animateWithDuration:0.5 animations:^{

weakSelf.scrollerView.contentOffset = CGPointMake(weakSelf.scrollerView.frame.size.width * 2, 0);

} completion:^(BOOL finished) {



}];



//重置当前位置

_scrollerView.contentOffset = CGPointMake(_scrollerView.frame.size.width, 0);

_pageControl.currentPage = _currentIndex;

}

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

[_timer invalidate];

_timer = nil;

}

/*

更新图片

*/

-(void)updateImage{

NSInteger leftIndex,rightIndex;



CGPoint offset = _scrollerView.contentOffset;

CGSize scrollerViewSize = _scrollerView.frame.size;



if(offset.x > scrollerViewSize.width){ //向左滑动

_currentIndex = (_currentIndex + 1)%_mutView.count;

}else if(offset.x < scrollerViewSize.width){ // 向右滑动

_currentIndex = (_mutView.count -1 + _currentIndex)%_mutView.count;

}



//重新设置中间图片

_mutView[1].image = self.imageData[_currentIndex];



//重新设置左右图片

leftIndex = (_currentIndex + _mutView.count - 1) % _mutView.count;

rightIndex = (_currentIndex + 1) % _mutView.count;



_mutView[0].image = self.imageData[leftIndex];

_mutView[2].image = self.imageData[rightIndex];

}

滑动结束之后更新图片

/**

滑动结束

*/

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



//更新图片

[self updateImage];



//重置当前页面位置

_scrollerView.contentOffset = CGPointMake(scrollView.frame.size.width, 0);



//更新底部滑动条

_pageControl.currentPage = _currentIndex;



//滑动结束开启自动滑动定时

if(!_timer){

_timer = [NSTimer scheduledTimerWithTimeInterval:_sliderTime target:self selector:@selector(scrollerChange) userInfo:nil repeats:YES];

}

}