CALayer學習--contentsCenter屬性

Phantom_iOS發表於2018-10-22

開頭

為什麼我要寫就contentsCenter這個屬性做一個記錄呢？！因為我在學習這個屬性的時候，理解了好久，到現在，有點頭緒，記錄下來，希望有幫助。

緣由

偶然看到gitbook上有iOS Core Animation: Advanced Techniques中文譯本，所以準備好好學習學習，這裡也推薦給有需要的朋友，我自己只看到了contents屬性那塊，也正是看裡面有關於contentsCenter屬性的內容看得一頭霧水，所以才想要寫這篇文章。

先來看看文件裡是怎麼介紹contentsCenter這個屬性的吧！

原文

contentsCenter

本章我們介紹的最後一個和內容有關的屬性是contentsCenter，看名字你可能會以為它可能跟圖片的位置有關，不過這名字著實誤導了你。contentsCenter其實是一個CGRect，它定義了一個固定的邊框和一個在圖層上可拉伸的區域。 改變contentsCenter的值並不會影響到寄宿圖的顯示，除非這個圖層的大小改變了，你才看得到效果。 預設情況下，contentsCenter是{0, 0, 1, 1}，這意味著如果大小（由conttensGravity決定）改變了,那麼寄宿圖將會均勻地拉伸開。但是如果我們增加原點的值並減小尺寸。我們會在圖片的周圍創造一個邊框。圖2.9展示了contentsCenter設定為{0.25, 0.25, 0.5, 0.5}的效果。

圖2.9
圖2.9

圖2.9 contentsCenter的例子 這意味著我們可以隨意重設尺寸，邊框仍然會是連續的。他工作起來的效果和UIImage裡的-resizableImageWithCapInsets:方法效果非常類似，只是它可以運用到任何寄宿圖，甚至包括在Core Graphics執行時繪製的圖形。

圖2.10
圖2.10
圖2.10 同一圖片使用不同的contentsCenter

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *button1;
@property (nonatomic, weak) IBOutlet UIView *button2;

@end

@implementation ViewController

- (void)addStretchableImage:(UIImage *)image withContentCenter:(CGRect)rect toLayer:(CALayer *)layer
{  
  //set image
  layer.contents = (__bridge id)image.CGImage;

  //set contentsCenter
  layer.contentsCenter = rect;
}

- (void)viewDidLoad
{
  [super viewDidLoad]; //load button image
  UIImage *image = [UIImage imageNamed:@"Button.png"];

  //set button 1
  [self addStretchableImage:image withContentCenter:CGRectMake(0.25, 0.25, 0.5, 0.5) toLayer:self.button1.layer];

  //set button 2
  [self addStretchableImage:image withContentCenter:CGRectMake(0.25, 0.25, 0.5, 0.5) toLayer:self.button2.layer];
}

@end
複製程式碼

困惑

效果真的讓人很看不懂，我一度以為那個陰影就是它的效果。

效果補充

首先，說明下下文中用到的圖片尺寸為200*200，最上層圖層，黃色：藍色：黃色 = 1：2 ：1，這個比例很重要。

圖片屬性

接下來看看在相同尺寸下，不同的contentsCenter作用在這張圖片中，會變現什麼樣的效果。

對比一
對比1
上下兩個圖片看起來一樣，雖然他們的contentsCenter不同。為什麼會這樣呢？因為圖片的尺寸剛好就是200*200，而且下圖的contentsCenter為(0.25, 0.25, 0.5, 0.5)，而0.25就是黃色色塊的寬度在整個圖片中的寬度佔比，所以看起來兩張圖沒有區別。

接下來的三組圖，將展示圖二在尺寸分別為100*100，250*250，300*300的情況，與圖一的區別。

對比2
對比2

對比3
對比3

對比4
對比4

我認為在三組對比圖中，最為直觀的一個點就是，黃色色塊的大小一直沒變。變的只有綠色，藍色及紅色色塊。

讓我們來回頭看看這張圖。

分佈圖
我特意用紅線將整個圖片的分佈標明，意在表現出一種阻斷的效果。意思是，只有四個角是被完全限制住的，不能延展。而因為圖片的特殊性，圖中的紅線恰好能見例子中用到的圖片中的色塊完整單獨的分離開。這樣，我們應該不難理解，為什麼黃色色塊的大小在上面的例子中是固定的。這就類似與利用九切片機型切圖。

結束語

到這裡，我們可能大概瞭解contentsCenter這個屬性的效果了，至於怎麼用，那就看實際應用場景了。通過這個屬性，我們也可以看到，CALayer中還是有許多好用的屬性等待我們去發掘的。大家如果有用得好用的屬性和方法，希望可以寫在留言區，共同交流學習。

鑑於本人的知識有限，文章必有紕漏，望大家可以見諒，不吝指出。

相關文章