在這篇文章中，將嘗試通過用幾行代碼編寫我自己的小滾動視圖來解釋 UIScrollView 是如何工作的.
但首先，讓我們仔細看看坐標系統(tǒng)如何在UIKit中工作。 如果您只對滾動視圖實現(xiàn)感興趣，請隨意跳過下一節(jié)。

坐標系統(tǒng)
每個視圖都定義了自己的坐標系。 看起來像這樣，x軸指向右側，y軸指向下：

一個UIView坐標系統(tǒng).png

將子視圖添加到坐標系.png

UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)];
redView.backgroundColor = [UIColor colorWithRed:0.815 green:0.007
    blue:0.105 alpha:1];

UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(150, 160, 150, 200)];
greenView.backgroundColor = [UIColor colorWithRed:0.494 green:0.827
    blue:0.129 alpha:1];

UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(40, 400, 200, 150)];
blueView.backgroundColor = [UIColor colorWithRed:0.29 green:0.564
    blue:0.886 alpha:1];

UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(100, 600, 180, 150)];
yellowView.backgroundColor = [UIColor colorWithRed:0.972 green:0.905
    blue:0.109 alpha:1];

[mainView addSubview:redView];
[mainView addSubview:greenView];
[mainView addSubview:blueView];
[mainView addSubview:yellowView];

邊界(bounds)
UIView文檔說明了這個關于邊界屬性：

邊界矩形...在自己的坐標系中描述視圖的位置和大小。

一個視圖可以被認為是一個窗口或視口到由其坐標系定義的平面的矩形區(qū)域。視圖邊界表示這個矩形的位置和大小。
假設我們的視圖的邊界矩形的寬度和高度是320×480點，其原點是默認的（0,0）。 視圖成為坐標系平面的視口，顯示整個平面的一小部分。 界外的一切仍然存在，只有隱藏：

視圖提供了一個視圖到由其坐標系定義的平面中。 視圖的邊界矩形描述了可見區(qū)域的位置和大小.png

CGRect bounds = mainView.bounds;
bounds.origin = CGPointMake(0, 100);
mainView.bounds = bounds;

邊界矩形的原點現(xiàn)在在（0，100），所以我們的場景如下所示：

修改邊界矩形的原點等同于移動視口.png

看起來好像這個觀點已經下降了100個點，事實上這個觀點對于它自己的坐標系是正確的。 視圖在屏幕上的實際位置（或者在其超視圖中，更準確地說）仍然是固定的，然而，由它的框架決定，它沒有改變：

框架矩形...在其超級視圖的坐標系中描述視圖的位置和大小。

由于視圖的位置是固定的（從它自己的角度來看），所以把坐標系平面看作是我們可以拖動的透明膠片，將視圖看作是我們正在查看的固定窗口。 調整邊界的原點相當于移動透明膠片，使其另一部分通過視圖變得可見：

修改邊界矩形的原點相當于在相反的方向上移動坐標系，而視圖的位置保持固定，因為其框架不會改變.gif

而這正是UIScrollView滾動時的功能。 請注意，從用戶的角度來看，盡管視圖的子視圖在視圖的坐標系統(tǒng)（換言之，就是他們的坐標）方面的位置保持不變，但看起來好像視圖的子視圖正在移動。

我們來構建UIScrollView
滾動視圖不需要不斷更新其子視圖的坐標以使其滾動。 它所要做的就是調整邊界的起點。 有了這些知識，實現(xiàn)一個非常簡單的滾動視圖是微不足道的。 我們設置了一個手勢識別器來檢測用戶的平移手勢，并且響應一個手勢，我們通過拖動的量來轉換視圖的邊界：

// CustomScrollView.h
@import UIKit;

@interface CustomScrollView : UIView

@property (nonatomic) CGSize contentSize;

@end

// CustomScrollView.m
#import "CustomScrollView.h"

@implementation CustomScrollView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self == nil) {
        return nil;
    }
    UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc]
        initWithTarget:self action:@selector(handlePanGesture:)];
    [self addGestureRecognizer:gestureRecognizer];
    return self;
}

- (void)handlePanGesture:(UIPanGestureRecognizer *)gestureRecognizer
{
    CGPoint translation = [gestureRecognizer translationInView:self];
    CGRect bounds = self.bounds;

    // Translate the view's bounds, but do not permit values that would violate contentSize
    CGFloat newBoundsOriginX = bounds.origin.x - translation.x;
    CGFloat minBoundsOriginX = 0.0;
    CGFloat maxBoundsOriginX = self.contentSize.width - bounds.size.width;
    bounds.origin.x = fmax(minBoundsOriginX, fmin(newBoundsOriginX, maxBoundsOriginX));

    CGFloat newBoundsOriginY = bounds.origin.y - translation.y;
    CGFloat minBoundsOriginY = 0.0;
    CGFloat maxBoundsOriginY = self.contentSize.height - bounds.size.height;
    bounds.origin.y = fmax(minBoundsOriginY, fmin(newBoundsOriginY, maxBoundsOriginY));

    self.bounds = bounds;
    [gestureRecognizer setTranslation:CGPointZero inView:self];
}

@end

就像真正的UIScrollView，我們的類有一個contentSize屬性，必須從外部設置來定義可滾動區(qū)域的范圍。 當我們調整邊界時，我們確保只允許有效值。

結果：

我們的自定義滾動視圖在行動。 請注意，它缺乏動力滾動，彈跳和滾動指標.gif

結論
由于UIKit中坐標系的嵌套特性，重新實現(xiàn)UIScrollView的本質所需的代碼少于30行。 當然，真正的UIScrollView還有比這更多的東西。 動量滾動，彈跳，滾動指標，縮放和委托方法只是我們在這里沒有實現(xiàn)的一些功能。

Ole Begemann