IOS-UIScrollView滚动图片的简单实现

iOS开发UI篇—UIScrollView控件的基本使用

一、知识点简单介绍

1.UIScrollView控件是什么？

（1）移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限

（2）当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容

（3）普通的UIView不具备滚动功能,不能显⽰示过多的内容

（4）UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容

 (5)  举例:手机上的“设置”、其他⽰示例程序 

2.UIScrollView的简单使用

（1）将需要展⽰的内容添加到UIScrollView中 

（2）设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺⼨寸,也就是告诉 它滚动的范围(能滚多远,滚到哪⾥里是尽头) 

3.属性

（1）常用属性：

1）@property(nonatomic)CGPointcontentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置

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

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

（2）其他属性：

1）@property(nonatomic) BOOL bounces;  设置UIScrollView是否需要弹簧效果 

2）@property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled; 设置UIScrollView是否能滚动 

3）@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条 

4）@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显⽰示垂直滚动条

二、代码实现

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutletUIScrollView *scrollView;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

/**

 *  定义属性来记录当前NSTimer对象

 */

@property (nonatomic,strong) NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

   

//  1.向scrollView中添加图片

//  取出scrollView的size

   CGSize scrollSize = self.scrollView.frame.size;

  

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

       UIImageView *imageView = [[UIImageViewalloc] init];

       CGFloat scrollWidth = scrollSize.width;

       CGFloat imageX = scrollWidth * i;

       CGFloat imageY = 0;

       CGFloat imageW = scrollWidth;

       CGFloat imageH = scrollSize.height;

        imageView.frame =CGRectMake(imageX, imageY, imageW, imageH);

        

       NSString *imageName = [NSStringstringWithFormat:@"img_%02d",i+1];

        

        imageView.image = [UIImageimageNamed:imageName];

    

        [self.scrollViewaddSubview:imageView];

    }

//  2.设置contentSize

//  不支持竖直滚动就高度设置为0

   self.scrollView.contentSize =CGSizeMake(scrollSize.width *5, 0);

 

//  出现分页效果,YES表示有分页效果,NO没有分页效果,默认NO

    self.scrollView.pagingEnabled =YES;

//  去掉水平滚动条

    self.scrollView.showsHorizontalScrollIndicator =NO;

    

// 让控制器成为scrollView的代理

//  设置scrollView的代理为self

   self.scrollView.delegate =self;

    

#pragma mark - 自动轮播代码开始

/*

//  创建定时器

//  NSTimeInterval 时间间隔 单位s

//  调用target这对象的selector方法

//  userInfo 数据,如果不需要就设置为nil

//  repeats 是否重复执行这个方法,YES表示重复执行

    NSTimer *timer = [NSTimer timerWithTimeInterval:3 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

//  添加到运行循环中

//  NSRunLoopCommonModes 与处理用户事件处于同一个级别

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

    

    

//  1.创建NSTimer对象

//  2.把这个NSTimer添加主运行循环中以NSDefaultRunLoopMode的模式

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

*/

    

    [selfstartTimer];

}

- (void) startTimer

{

 //此处必须要判断不然会使图片滚动得速度加快无法控制

 if (self.timer !=nil) {

           return;

        }

   self.timer = [NSTimertimerWithTimeInterval:3target:selfselector:@selector(nextPage)userInfo:nilrepeats:YES];

    //  添加到运行循环中

    //  NSRunLoopCommonModes 与处理用户事件处于同一个级别

    [[NSRunLoop mainRunLoop] addTimer:self.timerforMode:NSRunLoopCommonModes];

}

- (void) nextPage

{

  

//  获取当前页

   NSInteger currentPage = self.pageControl.currentPage;

//  计算下一页

   NSInteger nextPage = -1;

   if (currentPage == self.pageControl.numberOfPages -1) {

        nextPage =0;

    }else{

        nextPage = currentPage+1;

    }

//  计算contentOffsetX的值

   CGFloat contextOffsetX  = nextPage * self.scrollView.frame.size.width;

    

   [UIViewanimateWithDuration:1animations:^{

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

   }];

    

}

#pragma mark scrollView的代理方法

// 当用户拽住scrollView中内容时候会执行这个方法

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

//  invalidate 让定时器失效

//  如果调用这个方法,就能再次使用了

    [self.timerinvalidate];

 self.timer =nil;

}

// 当用户已经停止拖拽了(当用户手从界面抬起的时候)

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

{

//  创建一个新NSTimer的对象

    //  1.创建NSTimer对象

    //  2.把这个NSTimer添加主运行循环中以NSDefaultRunLoopMode的模式

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

    

    

    [selfstartTimer];

}

// 监听scrollView的滚动过程

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

// 获取滚动位置的x坐标

  CGFloat offsetX = scrollView.contentOffset.x;

// 计算当前是第几页

// round(double) 四舍五入

  CGFloat page = round(offsetX / scrollView.frame.size.width);

//    NSLog(@"%lf",page);

    

  if (page != self.pageControl.currentPage) {

        //  current 当前的

       self.pageControl.currentPage = page;

    

    }

//    self.pageControl.numberOfPages  用于设置一共有多少页的

   

}

@end

程序执行的效果图