UIScrollView基础篇

什么是UIScrollView

• 移动设备的屏幕⼤小是极其有限的,因此直接展⽰在用户眼前的内容也相当有限

• 当展⽰的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容

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

• 举例:

  
  Snip20151112_3.png

• 上面是网易新闻APP的新闻滚动栏,这篇文章就是要利用UIScrollView做出这种效果

UIScrollView的基本使用

// 创建UIScrollView
UIScrollView *myScrollView = [UIScrollView alloc] init];

// 创建UIImageView
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_01"]];

// 添加图片
[self.scrollView addSubview:imageView];

// 设置滚动范围
self.scrollView.contentSize = imageView.frame.size;

// 设置内边距(在原来内容的周边,添加内边距)
self.scrollView.contentInset = UIEdgeInsetsMake(10, 20, 40, 80);

UIScrollView的常用属性

/*表示UIScrollView内容的尺寸,滚动范围(能滚多远) **/
@property(nonatomic)CGSizecontentSize;

/*表示UIScrollView滚动的位置 **/
@property(nonatomic)CGPointcontentOffset;

/*这个属性能够在UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住**/
@property(nonatomic)UIEdgeInsetscontentInset;

• 用下面的图片概括一下

  
  Snip20151112_14.png

UIScrollView的其他属性

●  设置UIScrollView是否需要弹簧效果
   @property(nonatomic) BOOL bounces;   
●  设置UIScrollView是否能滚动
   @property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled;       
●  设置UIScrollView是否显⽰示⽔水平滚动条
   @property(nonatomic) BOOL showsHorizontalScrollIndicator; 
●  设置UIScrollView是否显⽰示⽔垂直滚动条
   @property(nonatomic) BOOL showsVerticalScrollIndicator;

利用UIScrollView实现内容的缩放

• 当⽤户在UIScrollView⾝上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放⾃己内部的哪⼀个子控件(哪一块内容)

/**
 *  返回一个需要进行缩放的子控件（scrollView的子控件）
 */
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

• 缩放的实现

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 添加图片
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"minion"]];
    [self.scrollView addSubview:imageView];
    self.imageView = imageView;
    
    self.scrollView.contentSize = imageView.frame.size;
    
    // 设置缩放比例
    self.scrollView.maximumZoomScale = 2.0;
    self.scrollView.minimumZoomScale = 0.2;
}
#pragma mark - <UIScrollViewDelegate>
/**
 *  返回一个需要进行缩放的子控件（scrollView的子控件）
 */
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

利用UIScrollView实现分页功能

• 将UIScrollView的pageEnabled设置为YES,UIScrollView就会被分割成多个独立页面,里面的内容就能分页显示
• UIPageContro的常见属性

@property(nonatomic) NSInteger numberOfPages;
@property(nonatomic) NSInteger currentPage;
@property(nonatomic) BOOLhidesForSinglePage;
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor

Snip20151112_17.png

利用NStimer实现UIScollView的自动翻页

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 添加图片
    CGFloat w = self.scrollView.frame.size.width;
    CGFloat h = self.scrollView.frame.size.height;
    int count = 5;
    for (int i = 0; i<count; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];

        // imageView的size为图片的size
        imageView.image = [UIImage imageNamed:name];

        // imageView的size为scrollView的size
        imageView.frame = CGRectMake(i * w, 0, w, h);

        [self.scrollView addSubview:imageView];
    }
    
    // 设置内容大小
    // contentSize.height == 0 仅仅代表竖直方向上不能滚动
    self.scrollView.contentSize = CGSizeMake(count * w, 0);
    
    // 分页
    // 每一页的尺寸都是跟scrollView的frame.size一样的
    self.scrollView.pagingEnabled = YES;
    
    // 设置总页数
    self.pageControl.numberOfPages = count;
    // 单页时自动隐藏pageControl
    self.pageControl.hidesForSinglePage = YES;
    
#pragma mark - 定时器相关
- (void)startTimer
{
    // 返回一个自动开始执行任务的定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:nil repeats:YES];
    
    // 修改NSTimer在NSRunLoop中的模式：NSRunLoopCommonModes
    // 主线程不管在处理什么操作，都会抽时间处理NSTimer
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer
{
    [self.timer invalidate];
}

// 程序一启动就会创建一条主线程

/**
 *  显示下一页
 */
- (void)nextPage:(NSTimer *)timer
{
    // 计算出下一页
    NSInteger page = self.pageControl.currentPage + 1;
    // 如果超过了最后一页
    if (page == 5) {
        page = 0;
    }
    // 让scrollView滚动到下一页
    CGPoint offset = CGPointMake(page * self.scrollView.frame.size.width, 0);
    [self.scrollView setContentOffset:offset animated:YES];
}

#pragma mark - <UIScrollViewDelegate>
/**
 *  当scrollView滚动的时候,计算当前页码
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
    self.pageControl.currentPage = page;
}

/**
 *  当用户即将开始拖拽scrollView时，停止定时器
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}

/**
 *  当用户已经结束拖拽scrollView时，开启定时器
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}
@end