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

程序执行的效果图