ios开发-UI-UIScrollView

　　[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

　　1.什么是UIScrollView

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

　　　 因为移动设备的屏幕大小是有限的,因此直接显示在用户眼前的内容也相当有限.当展示的内容超过屏幕大小时,我们需要通过滚动手机屏幕来查看更多的内容,但是普通的UIView没有支持的滚动功能,不能显示过多的内容,所以有这个UIScrollView,可以展示大量内容.

　　2.UIScrollView的基本使用

　　　　2.1使用步骤:

• • 在storyboard中拖拽一个UIScrollView
  • 把需要滚动的内容放到UIScrollView中
  • 设置UIScrollView的contentSize属性(滚动的范围)

　　　　2.2出现无法滚动的原因分析:

• • 首先检查contentSize是否设置
  • 查看其属性scrollEnabled(为NO即无法拖动)
  • 查看其属性userInteractionEnabled(为NO即无法拖动)　　　

　　　

　　3.UIScrollView的常见属性

//UIScrollView常用属性


//滚动的位置 屏幕左上角的位置相对于图片左上角的位置,图片左上角的位置为0,0 //scrollView相对于内容的偏移
@property(nonatomic) CGPoint contentOffset; // default CGPointZero


//滚动范围
@property(nonatomic) CGSize contentSize; // default CGSizeZero


//上下左右,逆时针顺序,增加边距。默认不显示这个距离,滚动之后才有
@property(nonatomic) UIEdgeInsets contentInset;
// default UIEdgeInsetsZero. add additional scroll area around content


//是否启用弹簧效果。默认启用
@property(nonatomic) BOOL bounces;
// default YES. if YES, bounces past edge of content and back again


//启用滚动
@property(nonatomic,getter=isScrollEnabled)BOOL scrollEnabled;

//横向滚动条
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
// default YES. show indicator while we are tracking. fades out after tracking


//纵向滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator;
// default YES. show indicator while we are tracking. fades out after tracking

 

 

　　4.UIScrollView的代理(delegate)

　　很多时候,我们想在UIScrollView正在滚动或者滚动到某个位置或者将要停止滚动时做某些事情,要想实现这样的功能,前提条件就是监听到UIScrollView的整个滚动过程,当UIScrollView发生一系列的滚动时,会自动通知它的代理对象,给它的代理发送相应的消息,让代理得知他的滚动情况.也就是说,我们想要监听UIScrollView的滚动过程,必须先给它设置一个代理对象,然后通过代理得知它的滚动过程.

　　UIScrollView中声明了一个代理的属性.

@property(nonatomic,assign) id<UIScrollViewDelegate>      delegate;                       // default nil. weak reference

 

　　所以,我们使用时,直接使用即可.

　　　　设置scrollView代理的步骤:

• • 首先遵守UIScrollViewDelegate协议
  • 设置代理(可以通过拖线或者代码方式完成)
  • 实现协议中的方法

 

 

　　下面通过一个小的应用运用上面提到的知识

　　图片轮播器(比如电商页面上自动播放的滚动的商品简介页面,也就是广告之类的):

　　　　功能分析:

• • 界面上图片一直进行轮播
  • 固定之间自动进入下一张
  • 用户拖动图片时,停止滚动轮播
  • 用户停止拖动时,自动开始进行轮播

　　　　步骤分析:

• • 搭建UI界面(一个UIScrollView,一个UIPageControl)
  • 拖线,获取这两个属性
  • 代码创建UIImageView,添加图片
  • 设置定时器,自动调用"下一页"方法,实现自动跳转

 此处,简单介绍一下定时器:NSTimer

　　　　主要作用:在指定的时间执行指定的任务;每隔一段时间执行指定的任务

 

 

　　　　启动定时器的两种方法:

　　

//第一种方法
//timerWithTimeInterval需要手工把timer加入到消息循环中
NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector: @selector(nextImage) userInfo:nil repeats:YES];
NSRunLoop *loop = [NSRunLoop currentRunLoop];
[loop addTimer:timer forMode:NSDefaultRunLoopMode]; //这个方法仅仅是提前执行timer要执行的方法
[timer fire];




//scheduledTimerWithTimeInterval自动把timer加入到消息循环中
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

　通过-(void)invalidate方法可以停止定时器,但是一旦定时器被停止,就不能再次执行任务.只能再创建一个新的定时器

 

storyboard及结构截图

 

程序源代码:

　　 ViewController.m

//
//  ViewController.m
//  03-图片轮播器
//
//  Created by hukezhu on 15/5/18.
//
//

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>

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

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


/**
 *  声明一个定时器属性
 */
@property (nonatomic,strong)NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //首先创建imageView,添加图片
    CGFloat imageW = self.scrollView.frame.size.width;
    CGFloat imageH = self.scrollView.frame.size.height;
    CGFloat imageY = 0;
    for (int i = 0; i < 5; i++) {
        UIImageView *imageView = [[UIImageView alloc]init];
        CGFloat imageX = i * imageW;
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02d",i+1]];
        [self.scrollView addSubview:imageView];
    }
    //设置scrollView的contentSize
    self.scrollView.contentSize = CGSizeMake(5 * imageW, 0);
    //实现分页功能
    self.scrollView.pagingEnabled = YES;
    //隐藏水平的
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    
    //拖线设置了scrollview的代理
    self.scrollView.delegate = self;
    
    
    //添加定时器
    [self startTimer];
    
    
}

/**
 *  添加定时器
 */
- (void)startTimer{

    //添加一个定时器:
    self.timer  = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
//    [[NSRunLoop mainRunLoop]addTimer: self.timer forMode:NSDefaultRunLoopMode];
    [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
    
}
/**
 *  停止定时器
 *
 */
- (void)stopTimer:(NSTimer *)timer{
    //停止定时器
    [timer invalidate];
    //将定时器清空(因为一旦定时器被停止,就不能再次被使用,所以停止之后立即清空)
    timer = nil;
}

/**
 *  下一页功能
 */
- (void)nextPage{

    NSInteger page = self.pageControl.currentPage;
    if (page == self.pageControl.numberOfPages -1) {
        page = 0;
    }else{
        page ++;
    }
    self.pageControl.currentPage = page;
    
    //图片跟着换
    CGFloat contentOffsetX = page * self.scrollView.frame.size.width;

    
    
    //动画
    [UIView animateWithDuration:1.0 animations:^{
            self.scrollView.contentOffset = CGPointMake(contentOffsetX, 0);
    }];
}

/**
 *  用户拖动的时候就会调用
 *
 */
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //取出当前的contentOffset的x的值
    CGFloat offsetx = scrollView.contentOffset.x;
    //计算当前页数,round方法,使用四舍五入
    CGFloat page = round( offsetx / scrollView.frame.size.width);
    
    if (page != self.pageControl.currentPage) {
        self.pageControl.currentPage = page;
    }

}

/**
 *  用户将要开始拖拽的时候调用
 *
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{

    //停止定时器
    [self stopTimer:self.timer];
    
}
/**
 *  用户将要停止拖拽的时候调用
 *
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

    //开始定时器
    [self startTimer];
}
@end