开头

为什么我要写就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 contentsCenter的例子 这意味着我们可以随意重设尺寸，边框仍然会是连续的。他工作起来的效果和UIImage里的-resizableImageWithCapInsets:方法效果非常类似，只是它可以运用到任何寄宿图，甚至包括在Core Graphics运行时绘制的图形。

图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 imagelayer.contents = (__bridge id)image.CGImage;//set contentsCenterlayer.contentsCenter = rect;
}- (void)viewDidLoad
{[super viewDidLoad]; //load button imageUIImage *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作用在这张图片中，会变现什么样的效果。

上下两个图片看起来一样，虽然他们的contentsCenter不同。为什么会这样呢？因为图片的尺寸刚好就是200*200，而且下图的contentsCenter为(0.25, 0.25, 0.5, 0.5)，而0.25就是黄色色块的宽度在整个图片中的宽度占比，所以看起来两张图没有区别。

接下来的三组图，将展示图二在尺寸分别为100*100，250*250，300*300的情况，与图一的区别。

我认为在三组对比图中，最为直观的一个点就是，黄色色块的大小一直没变。变的只有绿色，蓝色及红色色块。

让我们来回头看看这张图。

我特意用红线将整个图片的分布标明，意在表现出一种阻断的效果。意思是，只有四个角是被完全限制住的，不能延展。而因为图片的特殊性，图中的红线恰好能见例子中用到的图片中的色块完整单独的分离开。这样，我们应该不难理解，为什么黄色色块的大小在上面的例子中是固定的。这就类似与利用九切片机型切图。

结束语

到这里，我们可能大概了解contentsCenter这个属性的效果了，至于怎么用，那就看实际应用场景了。通过这个属性，我们也可以看到，CALayer中还是有许多好用的属性等待我们去发掘的。大家如果有用得好用的属性和方法，希望可以写在留言区，共同交流学习。

鉴于本人的知识有限，文章必有纰漏，望大家可以见谅，不吝指出。