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轉換

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/7495.html

標籤：iOS

上一篇：iOS核心影片高級技巧-1

下一篇：IOS弓箭傳說的插件開發

iOS核心影片高級技巧-2