『IOS』使用優雅的錨點開發ios

原文地址：http://www.poboke.com/study/use-the-anchor-point-in-ios-development.html

做ios開發時，有很多東西都用不慣，比如沒有單獨設定view的位置和大小的方法，而要把位置和大小一起初始化，感覺有點麻煩。
在cocos2d裡就非常方便，因為cocos2d的錨點可以很方便地設定子檢視的位置，而ios裡沒有錨點這個概念。
所以我把cocos2d的錨點移植到了ios裡，並做了一些修改，使其成為了有著ios特色的錨點。

cocos2d裡採用OpenGL ES座標系，座標原點在螢幕左下角。而ios採用的是Quartz 2D座標系，座標原點在螢幕左上角。
在cocos2d和ios中分別把檢視的座標點設為(10,10)，結果如下：

http://www.poboke.com/wp-content/uploads/2014/07/anchor_coordinate.png

因為cocos2d的檢視是以檢視的中心位置設定座標點的，而ios的檢視是以左上角設定座標點的。

那麼什麼是錨點呢？下面以一個例子來說明：
比如要建立以下兩個檢視，藍色檢視左上角在座標(5,4)處，而橙色檢視右邊和藍色檢視對齊，有一半的高度處於藍色檢視外面。
UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(5, 4, W, H)];blueView.backgroundColor = [UIColor blueColor];[self.view addSubview:blueView]; UIView *orangeView = [[UIView alloc] initWithFrame:CGRectMake(W-w, H-h/2, w, h)];orangeView.backgroundColor = [UIColor orangeColor];[blueView addSubview:orangeView];

UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(5, 4, W, H)];blueView.backgroundColor = [UIColor blueColor];[self.view addSubview:blueView]; UIView *orangeView = [[UIView alloc] initWithFrame:CGRectMake(W-w, H-h/2, w, h)];orangeView.backgroundColor = [UIColor orangeColor];[blueView addSubview:orangeView];

可以看到建立檢視時就要計算檢視左上角的座標，非常麻煩。而使用了錨點的程式碼可以這樣寫：

• UIView *blueView = [[UIView alloc] initWithSize:CGSizeMake(W, H)];
• [blueView setPosition:CGPointMake(5, 4) atAnchorPoint:CGPointMake(0, 0)];
• blueView.backgroundColor = [UIColor blueColor];
• [self.view addSubview:blueView];
•  
• UIView *orangeView = [[UIView alloc] initWithSize:CGSizeMake(w, h)];
• [orangeView setPosition:CGPointMake(W, H) atAnchorPoint:CGPointMake(1, 0.5)];
• orangeView.backgroundColor = [UIColor orangeColor];
• [blueView addSubview:orangeView];

可見程式碼十分優雅，一開始先初始化檢視大小，然後再設定檢視的位置。
橙色檢視的座標點是(W, H)，錨點是(1, 0.5)，通過這兩個點就可以設定檢視的準確位置了，根本就不用去計算橙色檢視的左上角的座標(W – w, H – h/2)。

可以這樣說：錨點是子檢視用來設定位置的一個定位點，使用錨點就不會用子檢視的寬高參與計算，省去了麻煩的計算，從而讓程式碼更優雅。

從下圖可知，錨點的取值範圍是[0, 1]。

設定一個子檢視的座標時，錨點(0, 0)表示把子檢視的左上角放到該座標的位置，錨點(0.5, 0.5)表示把子檢視的中點放到該座標的位置。

通過category為UIView新增設定錨點的方法，所有view的子類就可以使用該方法。
程式碼見https://github.com/poboke/OCElegant
下載UIView+Frame檔案，新增到工程裡即可，這個類裡面自定義了一些獲取和設定view的大小和位置的方法，比如設定錨點的方法：

• - (void)setPosition:(CGPoint)point atAnchorPoint:(CGPoint)anchorPoint
• {
•     CGFloat x = point.x - anchorPoint.x * self.width;
•     CGFloat y = point.y - anchorPoint.y * self.height;
•     [self setOrigin:CGPointMake(x, y)];
• }

程式碼裡通過self.width就能取到view的寬度了，而不用寫self.frame.size.width。
通過程式碼也可以清楚地知道：實現錨點的方法其實很簡單，就是在setPosition:atAnchorPoint:方法裡面利用錨點和子檢視的寬高進行計算，從而調整了子檢視的位置。