UIScorllView和UIPageControl的使用实现图片轮播器

首先我们要先建一个project，选择iOS下的第一个Application 中的Single View Application

开始工作已经准备完毕现在我们进入到Main.storyboard拖控件

需要用到的控件有

  • UIScrollView也就是滚动的那个
  • UIPageControl也就是图片下面那几个小点
  • NSTimer就是定时器让其自动换页的

第一步：拖控件连线

  • 在Main.storyboard拖一个UIScrollView放在屏幕上，在UIScrollView下面放一个UIPageControl（注意是下面而不是在UIscrollView上放，如果放到UIScrollView上将看不到UIPageControl）
  • 进行连线，将其连到ViewController.m中的@interface ViewController () 和@end中间
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@end

第二步：下面我们要在ViewDidLod中把一个UIImageView加到scrollView中。同时我们要将5张图片放到Images.xcassets中，代码如下

// 广告图片总数
    int count = 5;
    CGSize size = self.scrollView.frame.size;
    for (int i = 0; i < count; i++) {
        NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *iconView = [[UIImageView alloc] initWithImage:image];
        [self.scrollView addSubview:iconView];
        // 设置frame
        CGFloat x = i * size.width;
        iconView.frame = CGRectMake(x, 0, size.width, size.height);
    }

这里要注意的就是5个UIimageView的尺寸，宽和高都一样，唯独不一样的就是他的X，需要1张1张图片往后排

第三步：设置scrollView的滚动范围以及设置分页，代码如下

    // 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(count * size.width, 0);
    // 滚动条不显示
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    // 设置分页
    self.scrollView.pagingEnabled = YES;
    // 设置pagecontrol
    self.pageControl.numberOfPages = count;

上面代码中滚动条不显示那两行代码是因为UIScrollView默认是有横竖滚动条的，那两行代码分别让水平的和竖直的的滚动条不显示，一定要让scrollView设置分页否则那个分页器不会跟着走，最后设置pageControl的页数

第四步：设置scorllView的代理，代理大家都应该熟悉了把，首先要在@interface ViewController ()后面遵循代理 代码如下
@interface ViewController () <UIScrollViewDelegate>
然后在ViewDidLod中设置谁遵循这个代理 那当然是ViewController了 代码如下

    // 设置代理
    self.scrollView.delegate = self;

好了下面开始实现UIScrollView的代理方法了
我们需要用的代理的方法有3个分别是

  1. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  2. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
  3. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

第一个是scrollView滚动时调用的方法，第二个是开始拖拽时调用的方法， 第三个是结束拖拽时调用的方法

首先我们先想scrollView滚动时是不是拖拽到一半以上松手就能到下一张图片，答案肯定是的。那么就来写这个方法，代码如下

// 正在滚动时
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2) / scrollView.frame.size.width;
    self.pageControl.currentPage = page;
}

这里计算page页数用到了我们非常熟悉的把一个数 / 多少得到的数  比如112 / 10 等于多少 很明显是 11 这样就能很好通过尺寸把该显示的页面算出来，对了忘了说contentOffset是什么意思了，这个就可以理解为是拖拽的距离

第五步：现在要实现定时器功能了，让其自动翻页，首先要在@interface ViewController () @end中定义一个定时器timer 代码如下

@property (nonatomic, strong) NSTimer *timer;

有人会问为什么要定义这个，因为后面不止一方法需要用到这个timer

定义一个定时器方法，代码如下

- (void)addTimer
{
    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    self.timer = timer;
    // 消息循环
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];
}

这是一个定时器的方法，里面创建了定时器，并加入了消息循环中，这里面要设置定时器2s之后应该执行哪个方法，很显然要让它2s之后进行翻页啊，那么我们就来写下这个方法nextImage，代码如下

- (void)nextImage
{
    // 当前页码
    NSInteger page = self.pageControl.currentPage;
    if (page == self.pageControl.numberOfPages - 1) {
        page = 0;
    } else {
        page++;
    }

    CGFloat offsetX = page * self.scrollView.frame.size.width;
    [UIView animateWithDuration:1.0 animations:^{
        self.scrollView.contentOffset = CGPointMake(offsetX, 0);
    }];

}

这个方法中首先先定义一个page来保存当前的page，然后进行判断如果是最后一张要将页面换成0（这个并不完美会直接从最后一张往回到第一张，但我学习视频的那个老师没有给出解决方法）其他的进行page加1 设置完page数那么我们需要让其自动滚动啊，那我们就来设置scrollView的offset，定义offsetX 等于page数乘以scrollView的宽度，这样正好能移动到下一个视图，同时给移动加一个动画

之后在ViewDidLod中调用此方法，代码如下

[self addTimer];

第六步：下面来到UIScrollView的代理方法中，其中还有两个代理方法我们没有实现，就是开始拖拽和结束拖拽的方法，代码如下

// 开始拖拽的时候调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止定时器
    [self.timer invalidate];
}
// 结束拖拽的时候调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self addTimer];
}

这里的开始拖拽是要把定时器停止，不然你拖拽不动也会翻页，所有要把定时器停止，把定时器停止了，那我们要向让其在动起来，那么就要让其在开启，要在结束拖拽时开始定时器。

如果你到这一步了，那么恭喜你的图片轮播器就做好了！

完整代码如下

#import "ViewController.h"

@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];
    // 广告图片总数
    int count = 5;
    CGSize size = self.scrollView.frame.size;
    for (int i = 0; i < count; i++) {
        NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *iconView = [[UIImageView alloc] initWithImage:image];
        [self.scrollView addSubview:iconView];
        // 设置frame
        CGFloat x = i * size.width;
        iconView.frame = CGRectMake(x, 0, size.width, size.height);
    }

    // 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(count * size.width, 0);
    // 滚动条不显示
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    // 设置分页
    self.scrollView.pagingEnabled = YES;
    // 设置pagecontrol
    self.pageControl.numberOfPages = count;

    // 设置代理
    self.scrollView.delegate = self;

    [self addTimer];
}

- (void)addTimer
{
    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    self.timer = timer;
    // 消息循环
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];
}

- (void)nextImage
{
    // 当前页码
    NSInteger page = self.pageControl.currentPage;
    if (page == self.pageControl.numberOfPages - 1) {
        page = 0;
    } else {
        page++;
    }

    CGFloat offsetX = page * self.scrollView.frame.size.width;
    [UIView animateWithDuration:1.0 animations:^{
        self.scrollView.contentOffset = CGPointMake(offsetX, 0);
    }];

}

#pragma mark - scrollView代理方法
// 正在滚动时
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2) / scrollView.frame.size.width;
    self.pageControl.currentPage = page;
}
// 开始拖拽的时候调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止定时器
    [self.timer invalidate];
}
// 结束拖拽的时候调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self addTimer];
}

@end
时间： 2024-10-23 10:16:53

UIScorllView和UIPageControl的使用实现图片轮播器的相关文章

iOS开发 - UIPageControl实现分页图片轮播器

分页相关属性 只要将UIScrollView的pageEnabled属性设置为YES,UIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示 一般会配合UIPageControl增强分页效果,UIPageControl常用属性如下 一共有多少页 @property(nonatomic) NSInteger numberOfPages; 当前显示的页码 @property(nonatomic) NSInteger currentPage; 只有一页时,是否需要隐藏页码指示器 @

UISCrollView —— 图片轮播器封装实现（三）——（第三讲）

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

UISCrollView —— 图片轮播器实现（三）——（第二讲）

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

ios开发图片轮播器以及定时器小问题

一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: 1 #import "ViewController.h" 2 static CGFloat const imageCount = 5; 3 @interface ViewController ()<UIScrollViewDelegate> 4 /*scrollView*/ 5 @property (nonatomic,weak)UIScrollView *scroll; 6 /*

图片轮播器

? 1 SB里只需要两个控件: UIScrollView UIPageControl ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 7

IOS 05 UIScrollView介绍 图片轮播器

移动设备的屏幕?大?小是极其有限的,因此直接展?示在?用户眼前的内容也相当有限 当展?示的内容较多,超出?一个屏幕时,?用户可通过滚动?手势来查看屏幕以外的内容 普通的UIView不具备滚动功能,不能显?示过多的内容 UIScrollView是?一个能够滚动的视图控件,可以?用来展?示?大量的内容,并且可以通过滚 动查看所有的内容 在IOS中UIScrollView这个控件还是比较常用和重要的. 很多时候,我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停?止滚动 时做?一些

Android高级图片滚动控件，编写3D版的图片轮播器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说 到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上 还增加了三维立体

Swift版本的图片轮播器框架

由于在开发中,总是要写图片轮播器之类的东东,写的烦了,忍不住就用Swift写了一个非常方便的图片轮播器的框架https://github.com/SarielTang/CycleView 大家在使用的时候,只需要像这样: import CycleView class className : PictureCycleController{ //override loadView function //重写loadViewe方法 override func loadView() { super.lo