聊聊UIScrollView

首先在聊UIScrollView之前,我們先了解坐標系在 UIKit 中是如何工作的。

坐標系

因為每個視圖定義了自己的坐標系,它看起來這像是這樣的:x 軸指向右側、y 軸指向下方(如下圖所示)。

邏輯坐標系.png

但是需要注意的是此邏輯坐標系與視圖的寬度和高度無關。它沒有邊界,在四個方向上無限延伸(無限延伸不是真的無限,因為坐標系的范圍受CGFloat數(shù)據(jù)類型大小的限制32 位系統(tǒng)上為 32 位,64 位上為 64 位)。現(xiàn)在讓我們在坐標系中布置一些視圖。每個不同顏色矩形代表一個子視圖:


將子視圖添加到坐標系中

實際的代碼如下:

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和frame這個概念,接下來簡單的說說bounds和frame。

Bounds

對于apple里面對于view的bounds解釋如下:

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

視圖可以被認為是進入由其坐標系定義的平面矩形區(qū)域的窗口或視口。并且視圖bounds表達了這個矩形的位置和大小。

假設我們視圖的bounds矩形的寬度和高度為 320 x 480 points,并且它的原點是默認值(0, 0)。視圖成為坐標系平面的視口,顯示整個平面的一小部分。界外的一切都還在,只是隱藏了。實際上,除非clipsToBounds == YES(默認為NO),邊界矩形外的子視圖將保持可見。但是,視圖不會檢測到超出其邊界的觸摸。


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

接下來,我們將修改邊界矩形的原點:

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

邊界矩形的原點現(xiàn)在位于(0, 100)所以我們的場景看起來像這樣:

修改邊界矩形的原點相當于移動視口。

看起來好像視圖向下移動了 100 點,實際上這與它自己的坐標系有關。視圖在屏幕上的實際位置(更準確地說在其父視圖中)保持固定,沒有發(fā)生改變,因為這是由它的frame確定的。

上面的圖片坐標都是針對自身視圖畫的坐標系。

因為視圖的位置是固定的(從它自己的角度來看),把坐標系平面想象成一塊我們可以拖動的畫布,把視圖想象成一塊透明的玻璃。調整bounds的原點相當于移動畫布,使其另一部分通過視圖可見。這樣就可以變成如下圖所示的一樣:


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

這正是UIScrollView它滾動時的原理。但是從用戶感知中似乎是視圖的子視圖在移動,盡管它們在視圖坐標系(換句話說,它們的框架)方面的位置保持不變。而我們也可以通過這樣的原理來自己寫一個簡單的UIScrollView出來(因為系統(tǒng)的UIScrollView來牽扯到動量滾動、彈跳、滾動指示器、縮放和委托方法等)。

自定義UIScrollView

滾動視圖不需要不斷更新其子視圖的坐標以使其滾動。它所要做的就是調整其邊界的原點。這樣實現(xiàn)一個非常簡單的滾動視圖就變得微不足道了。我們設置了一個手勢識別器來檢測用戶的平移手勢,為了響應手勢,我們bounds通過拖動量來平移視圖:

// 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ū)域的范圍。當我們調整邊界時,我們確保只允許有效值。這樣的一個運行效果如下:


我們的自定義滾動視圖正在運行。請注意,它缺少動量滾動、彈跳和滾動指示器。

Frame

框架矩形,它描述了視圖在其父視圖坐標系中的位置和大小。

因為本文是針對UIScrollView的了解,對于Frame 以及Frame與Bounds的區(qū)別將在下篇詳細的介紹,這里就一筆帶過。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容