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；
}