IOS 05 UIScrollView介绍 图片轮播器

• 当UIScrollView发?生?一系列的滚动操作时, 会?自动通知它的代理(delegate)对象,给

它的代理发送相应的消息,让代理得知它的滚动情况
• 也就是说,要想监听UIScrollView的滚动过程,就必须先给UIScrollView设置?一个代理

对象,然后通过代理得知UIScrollView的滚动过程

// ?用户开始拖拽时调?用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 滚动到某个位置时调?用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
// ?用户结束拖拽时调?用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:
(BOOL)decelerate;

UIScrollView的常?见属性

• @property(nonatomic)CGPointcontentOffset; ? 这个属性?用来表?示UIScrollView滚动的位置

• @property(nonatomic)CGSizecontentSize;
? 这个属性?用来表?示UIScrollView内容的尺?寸,滚动范围(能滚多远)

• @property(nonatomic)UIEdgeInsetscontentInset;
? 这个属性能够在UIScrollView的4周增加额外的滚动区域

2 介绍完UIScrollView的基本属性，下面做一个小的图片轮播器程序：

2.1程序截图如下图。

2.2这个程序上有5个图，当滑动屏幕时，屏幕上的图片也会跟着变化，同时导航按键也会跟着变动，同时如果不滑动屏幕时，每过两秒，屏幕图片也自己变化，程序就是这么个功能，在很多APP中可以常看到，下面讲代码。

2.3 设计视图，视图比较简单，只有一个Scroll View和一个page control,如下：

2.4 视图设计好以后，然后导入图片到项目中，这里我们简单点做就把图片放到项目中Imagees.xcassets中。

2.5 做完这些之后，然后就要写代码实现功能了，第1步，创建Scroll View和page control的属性，如何创建属性不讲了。

//Scroll View属性

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

//pageControl属性

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

2.6 创建完视图上的两个控件的属性后，我们就要开始读取图片保存然后保存到Scroll View中了，代码如下：

 //创建UIImageView在Scrool view中的位置
    //W.H,Y值对是一样的，但每个UIImageView的X值就会不一样了
    CGFloat FloatW=self.ScllView.frame.size.width;
    CGFloat FloatH=self.ScllView.frame.size.height;
    CGFloat FloatY=0;

    //这里5张图片写死了，循环所有图片
    //创建UIimageView,然后设置每个UIimageView的位置，
    for (int i=0; i<imageCont; i++) {

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

        //计算X值，
        CGFloat FloatX=i*FloatW;

        imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH);

        NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1];
        imageView.image=[UIImage imageNamed:imagename];

        //把UIImageView增加到Scroll View中
        [self.ScllView addSubview:imageView];

    }

在这里最主要的就是要计算每个UIiamgeView的X值了，其实X值也简单因为每个图片的W值和Scroll View一样，所以每个UIiamgeView的X值就可以*ScllView.frame.size.width值就可以了。

2.7这样我们就把图片全部加到视图上的Scroll View 中了，然后就要让Scrool View里面的图片可以滑动，要让Scrool View里面的图片可以滑动，我们就要用到代理，用到代理就要导入UIScrollViewDelegate，如下：

@interface ViewController ()<UIScrollViewDelegate>

导入完UIScrollViewDelegate后，然后设置Scrool View相对应的属性：

PagingEnabled这个分页的属性是每一次滑动都是滑动一整个图片，让屏幕只能显示一张完整的图片，

同时设置视图中page control控件的个数，当然这个个数和图片的个数是一样多的。

 //2.滚动视图的内容的大小
    self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0);

    //去掉水平指示器
    self.ScllView.showsHorizontalScrollIndicator=NO;

    //设置分页
    self.ScllView.pagingEnabled=YES;

    //设置pageControl显示的页数
    self.PageControl.numberOfPages=imageCont;

2.8 做完这些，屏幕上的图片就可能自由的滑动了，但有个小问题是屏幕上的page control这个控件不会当屏幕图片变动时也跟着变动，

这个如何实现呢?这个要在代理方法中来做，如下：

//设置代理

self.ScllView.delegate=self;

//代理方法
//代理自带方法，视图正在滚动的时候一直在执行
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat scrolViewW=self.ScllView.frame.size.width;

    CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW;

    self.PageControl.currentPage=pageCount;
}

这样，整个图片播放器就OK了，下面再来做个定时播放功能，当程序起动时，自动播放，多的不说了，直接上所有代码：如下

#import "ViewController.h"

#define imageCont 5

@interface ViewController ()<UIScrollViewDelegate>

//Scroll View属性
@property (weak, nonatomic) IBOutlet UIScrollView *ScllView;
//pageControl属性
@property (weak, nonatomic) IBOutlet UIPageControl *PageControl;

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

@end

@implementation ViewController

//去掉手机最上面的状态显示
-(BOOL)prefersStatusBarHidden
{
    return YES;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    //创建UIImageView在Scrool view中的位置
    //W.H,Y值对是一样的，但每个UIImageView的X值就会不一样了
    CGFloat FloatW=self.ScllView.frame.size.width;
    CGFloat FloatH=self.ScllView.frame.size.height;
    CGFloat FloatY=0;

    //这里5张图片写死了，循环所有图片
    //创建UIimageView,然后设置每个UIimageView的位置，
    for (int i=0; i<imageCont; i++) {

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

        //计算X值，
        CGFloat FloatX=i*FloatW;

        imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH);

        NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1];
        imageView.image=[UIImage imageNamed:imagename];

        //把UIImageView增加到Scroll View中
        [self.ScllView addSubview:imageView];

    }
     //2.滚动视图的内容的大小
    self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0);

    //去掉水平指示器
    self.ScllView.showsHorizontalScrollIndicator=NO;

    //设置分页
    self.ScllView.pagingEnabled=YES;

    //设置pageControl显示的页数
    self.PageControl.numberOfPages=imageCont;

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

    [self addTime];
}

//创建定时器方法
-(void)addTime{

    self.timer=[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES ];

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

}
//移除计时器
-(void)removeTime{
    [self.timer invalidate];
    self.timer = nil;
}
-(void)nextPage{

    int page=0;

    if(self.PageControl.currentPage==imageCont-1)
    {
        page=0;
    }
    else
    {
        page=self.PageControl.currentPage+1;
    }
    CGPoint point=CGPointMake(page *self.ScllView.frame.size.width, 0);

    //设置Scroll View 要显示的图片
    [self.ScllView setContentOffset:point animated:YES];

}
//代理方法
//代理自带方法，视图正在滚动的时候一直在执行
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat scrolViewW=self.ScllView.frame.size.width;

    CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW;

    self.PageControl.currentPage=pageCount;
}
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    //会将计时器永久关掉
    [self removeTime];
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)d{

    [self addTime];
}
@end