iOS开发之有趣的UI —— UIScrollerView 控件及案例

本分享是iOS开发中有趣的UI模块的相关内容技术点分享。如果您是一位已经有C基础了的iOS爱好者，但还未接触Objectiov C语言，您需要学习我之前分享的 iOS开发核心语言Objective C 系列
如果您是零基础，建议您从我之前分享的iOS开发分分钟搞定C语言 系列开始学习。另外将无偿分享自己整理出来的大概400G iOS学习视频及学习资料，都是干货哦！可以新浪微博私信➕关注 极客James，期待与您的共同学习和探讨！！由于时间有限，每天在工作之余整理的学习分享，难免有不足之处，也希望各路大神指正！

made by 极客James

在上一分享数据转模型及MVC设计模式中我们进行了购物车案例的分析和实现以及一些设计思想的分享，由于iPhone的屏幕有限，我们有时候想在屏幕上展示更多的内容，那么如何实现呢。本次分享就是解决因屏幕限制展示更多内容以及一些实用的案例。

一、UIScrollerView 控件

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

例如iPhone中的设置等，UIScrollerView控件官方提供了很多实用的方法，在某些特定的场景用途很广泛，例如电商app首页的广告滚动等 。

二、UIScrollerView的常见属性

@property(nonatomic) CGPoint contentOffset;
这个属性用来表示UIScrollView滚动的位置
（其实就是内容左上角与scrollView左上角的间距值）

@property(nonatomic) CGSize contentSize;
这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）

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

其他属性
@property(nonatomic) BOOL bounces;
设置UIScrollView是否需要弹簧效果

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
设置UIScrollView是否能滚动

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

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

三、UIScrollerView 项目案例

1.项目需求
在规定的UIView中显示一张大图片，实现图片的拖拽，并且通过按钮进行图片的上下左右，左下角，右上角的移动。

2.整体思路
若想要进行图片的移动那么必须要要通过UIScrollerView控件来完成,通过偏移量来改变移动位置。

3.项目实现效果图

4.代码实现过程
（1）首先在storyboard搭建界面

（2）让storyboard中的控件与控制器建立联系

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

（3）在视图加载完进行相应的属性设置

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置图片
    UIImageView *imageView = [[UIImageView alloc]init];
    imageView.image = [UIImage imageNamed:@"blog"];
    imageView.frame = CGRectMake(0, 0, 550, 550);
    [self.scrollerView addSubview:imageView];
    // 设置contentSize 滚动范围
    self.scrollerView.contentSize = CGSizeMake(550 , 550);
    // 取消滚动条
    self.scrollerView.showsHorizontalScrollIndicator = NO;
    self.scrollerView.showsVerticalScrollIndicator = NO;

（4）通过偏移量contentoffset （图片左上角与scrollerView左上角的差值）设置点击事件移动的位置

// 左边
- (IBAction)left {
    [self.scrollerView setContentOffset:CGPointMake(0, self.scrollerView.contentOffset.y) animated:YES];
}
// 左下角
- (IBAction)leftBotton {
    CGFloat setX= 0;
    CGFloat setY = self.scrollerView.contentSize.height - self.scrollerView.frame.size.height;
    [self.scrollerView setContentOffset:CGPointMake(setX, setY) animated:YES];


}

// 顶部
- (IBAction)Top {
    [self.scrollerView setContentOffset:CGPointMake(self.scrollerView.contentOffset.x, 0) animated:YES];

}

// 底部
- (IBAction)botton {
    CGFloat setX = self.scrollerView.contentOffset.x;
    CGFloat setY = self.scrollerView.contentSize.height - self.scrollerView.frame.size.height;

    [self.scrollerView setContentOffset:CGPointMake(setX, setY) animated:YES];
}

// 右上角
- (IBAction)rightTop {
    CGFloat setX = self.scrollerView.contentSize.width - self.scrollerView.frame.size.width;
    CGFloat setY = 0;
    [self.scrollerView setContentOffset:CGPointMake(setX, setY) animated:YES];
}

// 右边
- (IBAction)right {
    CGFloat setY = self.scrollerView.contentOffset.y;
    CGFloat setX = self.scrollerView.contentSize.width - self.scrollerView.frame.size.width;
    [self.scrollerView setContentOffset:CGPointMake(setX, setY) animated:YES];

}

四、UIScrollerView 代理

很多时候，我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停止滚动 时做一些特定的操作，要想完成上述功能，前提条件就是能够监听到UIScrollView的整个滚动过程，当UIScrollView发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的滚动情况，也就是说，要想监听UIScrollView的滚动过程，就必须先给UIScrollView设置一个代理对象，然后通过代理得知UIScrollView的滚动过程。

1.UIScrollView和delegate的通信应该为下图所示

2.成为delegate的条件
UIScrollView将delegate需要实现的方法都定义在了UIScrollViewDelegate协议中，因此要想成为UIScrollView的delegate，必须遵守UIScrollViewDelegate协议，然后实现协议中相应的方法，就可以监听UIScrollView的滚动过程了。

3.成为delegate的条件

4.UIScrollView和控制器
一般情况下，就设置UIScrollView所在的控制器 为 UIScrollView的delegate
设置控制器为UIScrollView的delegate有2种方法：

通过代码（self就是控制器）
self.scrollView.delegate = self;

通过storyboard拖线

5.实现协议中的方法
(1)图片的放大和缩小
首先要设置放大缩小的最大值和最小是然后在遵守协议实现协议里的的方法

self.scrollerView.maximumZoomScale = 2.0;
self.scrollerView.minimumZoomScale = 0.2;

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return self.imageView；
}