CALayer 属性contents、contentsCente

最近学习iOS核心动画，学了CALayer一些属性后，简单用实例说一下对contentsCenter的理解。

contentsCenter是一个CGRect，默认为{0,0,1,1}，如果改变它的值，那么layer的寄宿图将会均匀的拉伸。

现在有默认两张图片，其中上图大小140x140，下图大小100x100：

panpanda.JPG D_Cn_Reader_Cover_Bg.png

直接用一个例子来展示contentsCenter的效果吧
现创建一个Single View App工程，然后在Main.storyboard中添加以下控件，并给两个UIIMageView设置好图片

屏幕快照 2019-04-24 下午9.33.55.png

然后在代码中给底部两个UIView添加CALayer

    _viewBottomLeft.backgroundColor = [UIColor whiteColor];
    _viewBottomRight.backgroundColor = [UIColor whiteColor];
    
    UIImage *topLeftImg = [UIImage imageNamed:@"panpanda.JPG"];
    UIImage *topRightImg = [UIImage imageNamed:@"border.png"];

    _imgTopLeft.image = topLeftImg;
    _imgTopRight.image = topRightImg;

    //设置contents
    self.bottomLeftLayer.contents = (__bridge id)[topLeftImg CGImage];
    self.bottomRightLayer.contents = (__bridge id)[topRightImg CGImage];
    
    [_viewBottomLeft.layer addSublayer:_bottomLeftLayer];
    [_viewBottomRight.layer addSublayer:_bottomRightLayer];

然后Run，发现效果跟上面的没什么两样

屏幕快照 2019-04-24 下午10.10.06.png

接下来设置contentsCenter的值，然后Run

    _bottomLeftLayer.contentsCenter = CGRectMake(0.46, 0.6, 0.06, 0.2);
    _bottomRightLayer.contentsCenter = CGRectMake(0.25, 0.25, 0.25, 0.25);

屏幕快照 2019-04-24 下午10.13.28.png

是不是发现右边的两张图不一样，下面的图片明显比上图更清晰

接下来我们这样设置上图

    _imgTopRight.image = [topRightImg stretchableImageWithLeftCapWidth:30 topCapHeight:30];

屏幕快照 2019-04-24 下午10.18.09.png

是不是发现上下的图片样式保持一致了😄

另附网上查阅的资料对**contentsCenter的解释

屏幕快照 2019-04-24 下午10.19.49.png