图片自动无限轮播

最新推荐文章于 2024-08-10 02:56:31 发布

原创最新推荐文章于 2024-08-10 02:56:31 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片无限轮播

本文详细介绍了如何在iOS应用中实现滚动视图的分页显示效果，包括图片布局、滚动行为、页面控制及自动播放时钟的集成。通过代码示例展示了如何在scrollView中添加多张图片，并实现自动轮播功能，同时处理滚动过程中的页面切换和用户交互。

#import "ViewController.h"

#define cnt 5

@interface ViewController () <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

//创建全局的时钟

@property (nonatomic,strong) NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

//设置代理

self.scrollView.delegate=self;

CGFloat iconViewW=self.scrollView.frame.size.width;

CGFloat iconViewh=self.scrollView.frame.size.height;

//在scrollViewW添加5张图片

for (int i=0; i<cnt; i++) {

//创建UIIimageView

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

//设置frame

CGFloat iconViewX=(i+1)*iconViewW;

iconView.frame=CGRectMake(iconViewX, 0, iconViewW, iconViewh);

//设置显示的图片·

NSString *imgName=[NSString stringWithFormat:@"img_0%d",i+1];

iconView.image=[UIImage imageNamed:imgName];

//添加创建好的UIImageView控件到scrollView

[self.scrollView addSubview:iconView];

}

//1.在开头位置添加原来的最后一张图片

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

lastimg.image=[UIImage imageNamed:@"img_05"];

lastimg.frame=CGRectMake(0, 0, iconViewW, iconViewh);

[self.scrollView addSubview:lastimg];

//2.在结尾位置添加原来的第一张图片

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

firstimg.image=[UIImage imageNamed:@"img_01"];

firstimg.frame=CGRectMake((cnt+1)*iconViewW, 0, iconViewW, iconViewh);

[self.scrollView addSubview:firstimg];

//3.一开始设置ScrollView的偏移

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

//scrollView的滚动必须设置contentSIze属性

self.scrollView.contentSize=CGSizeMake((cnt+2)*iconViewW, 0);

//去除水平滚动条

self.scrollView.showsHorizontalScrollIndicator=NO;

//让scrollView一次滚动一张图片，也就意味着它一次应该滚动一个scrollView的宽度的倍数-- 分页显示

self.scrollView.pagingEnabled=YES;

//修改pageCOntrol显示在第0页

self.pageControl.currentPage=0;

//添加时钟

[self createTimer];

}

//创建时钟

- (void) createTimer

{ self.timer=[NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextImg) userInfo:nil repeats:YES];

//解决方案：手动添加到运行环中

//1获取主线程运行环

NSRunLoop *runloop=[NSRunLoop currentRunLoop];

[runloop addTimer:self.timer forMode:NSRunLoopCommonModes];

}

//下一张图片

- (void) nextImg

{

CGFloat width=self.scrollView.frame.size.width;

//1.先获取当前页码--当前是第几页

NSInteger index=self.pageControl.currentPage; //0 1 2 3 4

//2.判断是否是最后一页，如果是最后一题，就从第一张再开始，否则就下一张

if (index==cnt) {

index=1;

}

else

{

index++;

}

//重新设置scrollView的contentOffset

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

//使用动画，不要使用[UIView animationWithDuration]

[self.scrollView setContentOffset:CGPointMake((index+1)*width, 0) animated:YES];

}

//当scrollVIe进行滚动的过程中触发

- (void) scrollViewDidScroll:(UIScrollView *)scrollView

{

CGFloat width=self.scrollView.frame.size.width;

//获取当前scrollVIew的偏移值

CGFloat offset=self.scrollView.contentOffset.x;

//计算当前应该处于第几页:因为当偏移值超过一半就应该认为这一页已经翻过来了

int index=(offset+width*0.5)/width;

//y设置pageControl的CurrentPage属性

self.pageControl.currentPage=(index-1);

}

//当我们拖拽图片的时候，发现无法停止图片的自动播放：原因：你在进行拖拽的时候，时钟并没有停止，还是继续运行，同时也由于你的runloop的模式是NSRunLoopCommonModes，那么我们只能在用户开始拖拽的时候，将时钟停止(IOS里面不能停止，只能销毁)，在用户停止拖拽的时候再创建时钟继续运行

- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

[self.timer invalidate];

self.timer=nil;

}

//当用户松开鼠标(停止拖拽)的时候再次创建新的时钟加入到runloop

- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

{

//添加时钟

[self createTimer];

}

- (void) scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView