3. 圖層幾何學

圖層幾何學

不熟悉幾何學的人就不要來這裡了 --柏拉圖學院入口的簽名

在第二章裡面，我們介紹了圖層背後的圖片，和一些控製圖層坐標和旋轉的屬性。在這一章中，我們將要看一看圖層內部是如何根據父圖層和兄弟圖層來控制位置和尺寸的。另外我們也會涉及如何管理圖層的幾何結構，以及它是如何被自動調整和自動佈局影響的。

3.1 佈局

佈局

UIView有三個比較重要的佈局屬性：frame，bounds和center，CALayer對應地叫做frame，bounds和position。為了能清楚區分，圖層用了“position”，視圖用了“center”，但是他們都代表同樣的值。

frame代表了圖層的外部坐標（也就是在父圖層上占據的空間），bounds是內部坐標（{0, 0}通常是圖層的左上角），center和position都代表了相對於父圖層anchorPoint所在的位置。anchorPoint的屬性將會在後續介紹到，現在把它想成圖層的中心點就好了。圖3.1顯示了這些屬性是如何相互依賴的。

圖3.2 旋轉一個視圖或者圖層之後的frame屬性

3.2 錨點

錨點

之前提到過，視圖的center屬性和圖層的position屬性都指定了anchorPoint相對於父圖層的位置。圖層的anchorPoint通過position來控制它的frame的位置，你可以認為anchorPoint是用來移動圖層的把柄。

預設來說，anchorPoint位於圖層的中點，所以圖層的將會以這個點為中心放置。anchorPoint屬性並沒有被UIView介面暴露出來，這也是視圖的position屬性被叫做“center”的原因。但是圖層的anchorPoint可以被移動，比如你可以把它置於圖層frame的左上角，於是圖層的內容將會向右下角的position方向移動（圖3.3），而不是居中了。

圖3.4 組成鐘面和鐘錶的四張圖片

鬧鐘的組件通過IB來排列（圖3.5），這些圖片視圖嵌套在一個容器視圖之內，並且自動調整和自動佈局都被禁用了。這是因為自動調整會影響到視圖的frame，而根據圖3.2的演示，當視圖旋轉的時候，frame是會發生改變的，這將會導致一些佈局上的失靈。

一個開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的iOS交流群：1012951431， 分享BAT,阿裡面試題、面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。

我們用NSTimer來更新鬧鐘，使用視圖的transform屬性來旋轉鐘錶（如果你對這個屬性不太熟悉，不要著急，我們將會在第5章“變換”當中詳細說明），具體代碼見清單3.1

圖3.6 鐘面，和不對齊的鐘指針

你也許會認為可以在Interface Builder當中調整指針圖片的位置來解決，但其實並不能達到目的，因為如果不放在鐘面中間的話，同樣不能正確的旋轉。

也許在圖片末尾添加一個透明空間也是個解決方案，但這樣會讓圖片變大，也會消耗更多的記憶體，這樣並不優雅。

更好的方案是使用anchorPoint屬性，我們來在-viewDidLoad方法中添加幾行代碼來給每個鐘指針的anchorPoint做一些平移（清單3.2），圖3.7顯示了正確的結果。

清單3.2

- (void)viewDidLoad 
{
    [super viewDidLoad];
    // adjust anchor points

    self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); 
    self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); 
    self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);

    // start timer
}

3.3 坐標系

坐標系

和視圖一樣，圖層在圖層樹當中也是相對於父圖層按層級關係放置，一個圖層的position依賴於它父圖層的bounds，如果父圖層發生了移動，它的所有子圖層也會跟著移動。

這樣對於放置圖層會更加方便，因為你可以通過移動根圖層來將它的子圖層作為一個整體來移動，但是有時候你需要知道一個圖層的絕對位置，或者是相對於另一個圖層的位置，而不是它當前父圖層的位置。

CALayer給不同坐標系之間的圖層轉換提供了一些工具類方法：

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer;
- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

這些方法可以把定義在一個圖層坐標系下的點或者矩形轉換成另一個圖層坐標系下的點或者矩形.

翻轉的幾何結構

常規說來，在iOS上，一個圖層的position位於父圖層的左上角，但是在Mac OS上，通常是位於左下角。Core Animation可以通過geometryFlipped屬性來適配這兩種情況，它決定了一個圖層的坐標是否相對於父圖層垂直翻轉，是一個BOOL類型。在iOS上通過設置它為YES意味著它的子圖層將會被垂直翻轉，也就是將會沿著底部排版而不是通常的頂部（它的所有子圖層也同理，除非把它們的geometryFlipped屬性也設為YES）。

Z坐標軸

和UIView嚴格的二維坐標系不同，CALayer存在於一個三維空間當中。除了我們已經討論過的position和anchorPoint屬性之外，CALayer還有另外兩個屬性，zPosition和anchorPointZ，二者都是在Z軸上描述圖層位置的浮點類型。

註意這裡並沒有更深的屬性來描述由寬和高做成的bounds了，圖層是一個完全扁平的對象，你可以把它們想象成類似於一頁二維的堅硬的紙片，用膠水粘成一個空洞，就像三維結構的摺紙一樣。

zPosition屬性在大多數情況下其實並不常用。在第五章，我們將會涉及CATransform3D，你會知道如何在三維空間移動和旋轉圖層，除了做變換之外，zPosition最實用的功能就是改變圖層的顯示順序了。

通常，圖層是根據它們子圖層的sublayers出現的順序來類繪製的，這就是所謂的畫家的演算法--就像一個畫家在牆上作畫--後被繪製上的圖層將會遮蓋住之前的圖層，但是通過增加圖層的zPosition，就可以把圖層向相機方向前置，於是它就在所有其他圖層的前面了（或者至少是小於它的zPosition值的圖層的前面）。

這裡所謂的“相機”實際上是相對於用戶是視角，這裡和iPhone背後的內置相機沒任何關係。

圖3.8顯示了在Interface Builder內的一對視圖，正如你所見，首先出現在視圖層級綠色的視圖被繪製在紅色視圖的後面。

圖3.9 綠色視圖被繪製在紅色視圖的前面

3.4 Hit Testing

Hit Testing

第一章“圖層樹”證實了最好使用圖層相關視圖，而不是創建獨立的圖層關係。其中一個原因就是要處理額外複雜的觸摸事件。

CALayer並不關心任何響應鏈事件，所以不能直接處理觸摸事件或者手勢。但是它有一系列的方法幫你處理事件：-containsPoint:和-hitTest:。

-containsPoint:接受一個在本圖層坐標系下的CGPoint，如果這個點在圖層frame範圍內就返回YES。如清單3.4所示第一章的項目的另一個合適的版本，也就是使用-containsPoint:方法來判斷到底是白色還是藍色的圖層被觸摸了 （圖3.10）。這需要把觸摸坐標轉換成每個圖層坐標系下的坐標，結果很不方便。

清單3.4 使用containsPoint判斷被點擊的圖層

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *layerView;
@property (nonatomic, weak) CALayer *blueLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create sublayer
    self.blueLayer = [CALayer layer];
    self.blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    self.blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    //add it to our view
    [self.layerView.layer addSublayer:self.blueLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //get touch position relative to main view
    CGPoint point = [[touches anyObject] locationInView:self.view];
    //convert point to the white layer's coordinates
    point = [self.layerView.layer convertPoint:point fromLayer:self.view.layer];
    //get layer using containsPoint:
    if ([self.layerView.layer containsPoint:point]) {
        //convert point to blueLayer’s coordinates
        point = [self.blueLayer convertPoint:point fromLayer:self.layerView.layer];
        if ([self.blueLayer containsPoint:point]) {
            [[[UIAlertView alloc] initWithTitle:@"Inside Blue Layer"
                                        message:nil
                                       delegate:nil
                              cancelButtonTitle:@"OK"
                              otherButtonTitles:nil] show];
        } else {
            [[[UIAlertView alloc] initWithTitle:@"Inside White Layer"
                                        message:nil
                                       delegate:nil
                              cancelButtonTitle:@"OK"
                              otherButtonTitles:nil] show];
        }
    }
}

@end

3.5 自動佈局

自動佈局

你可能用過UIViewAutoresizingMask類型的一些常量，應用於當父視圖改變尺寸的時候，相應UIView的frame也跟著更新的場景（通常用於橫豎屏切換）。

在iOS6中，蘋果介紹了自動排版機制，它和自動調整不同，並且更加複雜。

在Mac OS平臺，CALayer有一個叫做layoutManager的屬性可以通過CALayoutManager協議和CAConstraintLayoutManager類來實現自動排版的機制。但由於某些原因，這在iOS上並不適用。

當使用視圖的時候，可以充分利用UIView類介面暴露出來的UIViewAutoresizingMask和NSLayoutConstraintAPI，但如果想隨意控制CALayer的佈局，就需要手工操作。最簡單的方法就是使用CALayerDelegate如下函數：

- (void)layoutSublayersOfLayer:(CALayer *)layer;複製代碼

當圖層的bounds發生改變，或者圖層的-setNeedsLayout方法被調用的時候，這個函數將會被執行。這使得你可以手動地重新擺放或者重新調整子圖層的大小，但是不能像UIView的autoresizingMask和constraints屬性做到自適應屏幕旋轉。

這也是為什麼最好使用視圖而不是單獨的圖層來構建應用程式的另一個重要原因之一。

3.6 總結

總結

本章涉及了CALayer的集合結構，包括它的frame，position和bounds，介紹了三維空間內圖層的概念，以及如何在獨立的圖層內響應事件，最後簡單說明瞭在iOS平臺，Core Animation對自動調整和自動佈局支持的缺乏。

在第四章“視覺效果”當中，我們接著介紹一些圖層外表的特性。

4. 視覺效果

視覺效果

嗯，圓和橢圓還不錯，但如果是帶圓角的矩形呢？ 我們現在能做到那樣了麽？ 史蒂芬·喬布斯

我們在第三章『圖層幾何學』中討論了圖層的frame，第二章『寄宿圖』則討論了圖層的寄宿圖。但是圖層不僅僅可以是圖片或是顏色的容器；還有一系列內建的特性使得創造美麗優雅的令人深刻的界面元素成為可能。在這一章，我們將會探索一些能夠通過使用CALayer屬性實現的視覺效果。

4.1 圓角

圓角

圓角矩形是iOS的一個標誌性審美特性。這在iOS的每一個地方都得到了體現，不論是主屏幕圖標，還是警告彈框，甚至是文本框。按照這流行程度，你可能會認為一定有不藉助Photoshop就能輕易創建圓角舉行的方法。恭喜你，猜對了。

CALayer有一個叫做conrnerRadius的屬性控制著圖層角的曲率。它是一個浮點數，預設為0（為0的時候就是直角），但是你可以把它設置成任意值。預設情況下，這個曲率值隻影響背景顏色而不影響背景圖片或是子圖層。不過，如果把masksToBounds設置成YES的話，圖層裡面的所有東西都會被截取。

我們可以通過一個簡單的項目來演示這個效果。在Interface Builder中，我們放置一些視圖，他們有一些子視圖。而且這些子視圖有一些超出了邊界（如圖4.1）。你可能無法看到他們超出了邊界，因為在編輯界面的時候，超出的部分總是被Interface Builder裁切掉了。不過，你相信我就好了 :)

4.2 圖層邊框

圖層邊框

&nbp; CALayer另外兩個非常有用屬性就是borderWidth和borderColor。二者共同定義了圖層邊的繪製樣式。這條線（也被稱作stroke）沿著圖層的bounds繪製，同時也包含圖層的角。

&nbp; borderWidth是以點為單位的定義邊框粗細的浮點數，預設為0.borderColor定義了邊框的顏色，預設為黑色。

&nbp; borderColor是CGColorRef類型，而不是UIColor，所以它不是Cocoa的內置對象。不過呢，你肯定也清楚圖層引用了borderColor，雖然屬性聲明並不能證明這一點。CGColorRef在引用/釋放時候的行為表現得與NSObject極其相似。但是Objective-C語法並不支持這一做法，所以CGColorRef屬性即便是強引用也只能通過assign關鍵字來聲明。

&nbp; 邊框是繪製在圖層邊界裡面的，而且在所有子內容之前，也在子圖層之前。如果我們在之前的示例中（清單4.2）加入圖層的邊框，你就能看到到底是怎麼一回事了（如圖4.3）.

清單4.2 加上邊框

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];

  //set the corner radius on our layers
  self.layerView1.layer.cornerRadius = 20.0f;
  self.layerView2.layer.cornerRadius = 20.0f;

  //add a border to our layers
  self.layerView1.layer.borderWidth = 5.0f;
  self.layerView2.layer.borderWidth = 5.0f;

  //enable clipping on the second layer
  self.layerView2.layer.masksToBounds = YES;
}

@end

圖4.4 邊框是跟隨圖層的邊界變化的，而不是圖層裡面的內容

4.3 陰影

陰影

iOS的另一個常見特性呢，就是陰影。陰影往往可以達到圖層深度暗示的效果。也能夠用來強調正在顯示的圖層和優先順序（比如說一個在其他視圖之前的彈出框），不過有時候他們只是單純的裝飾目的。

給shadowOpacity屬性一個大於預設值（也就是0）的值，陰影就可以顯示在任意圖層之下。shadowOpacity是一個必須在0.0（不可見）和1.0（完全不透明）之間的浮點數。如果設置為1.0，將會顯示一個有輕微模糊的黑色陰影稍微在圖層之上。若要改動陰影的表現，你可以使用CALayer的另外三個屬性：shadowColor，shadowOffset和shadowRadius。

顯而易見，shadowColor屬性控制著陰影的顏色，和borderColor和backgroundColor一樣，它的類型也是CGColorRef。陰影預設是黑色，大多數時候你需要的陰影也是黑色的（其他顏色的陰影看起來是不是有一點點奇怪。。）。

shadowOffset屬性控制著陰影的方向和距離。它是一個CGSize的值，寬度控制這陰影橫向的位移，高度控制著縱向的位移。shadowOffset的預設值是 {0, -3}，意即陰影相對於Y軸有3個點的向上位移。

為什麼要預設向上的陰影呢？儘管Core Animation是從圖層套裝演變而來（可以認為是為iOS創建的私有動畫框架），但是呢，它卻是在Mac OS上面世的，前面有提到，二者的Y軸是顛倒的。這就導致了預設的3個點位移的陰影是向上的。在Mac上，shadowOffset的預設值是陰影向下的，這樣你就能理解為什麼iOS上的陰影方向是向上的了（如圖4.5）.

4.4 圖層蒙板

圖層蒙板

通過masksToBounds屬性，我們可以沿邊界裁剪圖形；通過cornerRadius屬性，我們還可以設定一個圓角。但是有時候你希望展現的內容不是在一個矩形或圓角矩形。比如，你想展示一個有星形框架的圖片，又或者想讓一些古捲文字慢慢漸變成背景色，而不是一個突兀的邊界。

使用一個32位有alpha通道的png圖片通常是創建一個無矩形視圖最方便的方法，你可以給它指定一個透明蒙板來實現。但是這個方法不能讓你以編碼的方式動態地生成蒙板，也不能讓子圖層或子視圖裁剪成同樣的形狀。

CALayer有一個屬性叫做mask可以解決這個問題。這個屬性本身就是個CALayer類型，有和其他圖層一樣的繪製和佈局屬性。它類似於一個子圖層，相對於父圖層（即擁有該屬性的圖層）佈局，但是它卻不是一個普通的子圖層。不同於那些繪製在父圖層中的子圖層，mask圖層定義了父圖層的部分可見區域。

mask圖層的Color屬性是無關緊要的，真正重要的是圖層的輪廓。mask屬性就像是一個餅干切割機，mask圖層實心的部分會被保留下來，其他的則會被拋棄。（如圖4.12）

如果mask圖層比父圖層要小，只有在mask圖層裡面的內容才是它關心的，除此以外的一切都會被隱藏起來。

4.5 拉伸過濾

拉伸過濾

最後我們再來談談minificationFilter和magnificationFilter屬性。總得來講當我們視圖顯示一個圖片的時候都應該正確地顯示這個圖片意即以正確的比例和正確的11像素顯示在屏幕上。原因如下

• 能夠顯示最好的畫質像素既沒有被壓縮也沒有被拉伸。
• 能更好的使用記憶體因為這就是所有你要存儲的東西。
• 最好的性能表現CPU不需要為此額外的計算。

不過有時候顯示一個非真實大小的圖片確實是我們需要的效果。比如說一個頭像或是圖片的縮略圖再比如說一個可以被拖拽和伸縮的大圖。這些情況下為同一圖片的不同大小存儲不同的圖片顯得又不切實際。

當圖片需要顯示不同的大小的時候有一種叫做拉伸過濾的演算法就起到作用了。它作用於原圖的像素上並根據需要生成新的像素顯示在屏幕上。

事實上重繪圖片大小也沒有一個統一的通用演算法。這取決於需要拉伸的內容放大或是縮小的需求等這些因素。CALayer為此提供了三種拉伸過濾方法他們是

• kCAFilterLinear
• kCAFilterNearest
• kCAFilterTrilinear

minification縮小圖片和magnification放大圖片預設的過濾器都是kCAFilterLinear這個過濾器採用雙線性濾波演算法它在大多數情況下都表現良好。雙線性濾波演算法通過對多個像素取樣最終生成新的值得到一個平滑的表現不錯的拉伸。但是當放大倍數比較大的時候圖片就模糊不清了。

kCAFilterTrilinear和kCAFilterLinear非常相似大部分情況下二者都看不出來有什麼差別。但是較雙線性濾波演算法而言三線性濾波演算法存儲了多個大小情況下的圖片也叫多重貼圖並三維取樣同時結合大圖和小圖的存儲進而得到最後的結果。

這個方法的好處在於演算法能夠從一系列已經接近於最終大小的圖片中得到想要的結果也就是說不要對很多像素同步取樣。這不僅提高了性能也避免了小概率因舍入錯誤引起的取樣失靈的問題

圖4.15 對於沒有斜線的小圖來說最近過濾演算法要好很多

總的來說對於比較小的圖或者是差異特別明顯極少斜線的大圖最近過濾演算法會保留這種差異明顯的特質以呈現更好的結果。但是對於大多數的圖尤其是有很多斜線或是曲線輪廓的圖片來說最近過濾演算法會導致更差的結果。換句話說線性過濾保留了形狀最近過濾則保留了像素的差異。

讓我們來實驗一下。我們對第三章的時鐘項目改動一下用LCD風格的數字方式顯示。我們用簡單的像素字體一種用像素構成字元的字體而非矢量圖形創造數字顯示方式用圖片存儲起來而且用第二章介紹過的拼合技術來顯示如圖4.16。

4.6 組透明

組透明

UIView有一個叫做alpha的屬性來確定視圖的透明度。CALayer有一個等同的屬性叫做opacity，這兩個屬性都是影響子層級的。也就是說，如果你給一個圖層設置了opacity屬性，那它的子圖層都會受此影響。

iOS常見的做法是把一個控制項的alpha值設置為0.5（50%）以使其看上去呈現為不可用狀態。對於獨立的視圖來說還不錯，但是當一個控制項有子視圖的時候就有點奇怪了，圖4.20展示了一個內嵌了UILabel的自定義UIButton；左邊是一個不透明的按鈕，右邊是50%透明度的相同按鈕。我們可以註意到，裡面的標簽的輪廓跟按鈕的背景很不搭調。

4.7 總結

總結

這一章介紹了一些可以通過代碼應用到圖層上的視覺效果，比如圓角，陰影和蒙板。我們也瞭解了拉伸過濾器和組透明。

在第五章，『變換』中，我們將會研究圖層變化和3D轉換