一 iOS之 CALayer的基本介绍

• 我们知道，在iOS中，按钮、文本框、文本标签、文本输入框、图标，这些控件都继承自UIView类，这些控件之所以能显示出来，都是依托于它们内部的一个图层，也就是UIView的图层，这个图层就是CALyer的的对象

  • UIView里的图层属性 @property(nonatomic,readonly,strong) CALayer *layer;

• 通过操作CALyer对象，可以改变UI的外观，比如 加阴影、改变圆角大小、边框宽度和颜色。尤其添加动画之后，就能实现一些特殊的效果，这也是我接下来几篇博客主要说到的

• CALyer的属性

  • 宽度和高度
    @property CGRect bounds;

  • 位置(默认指中点，具体由anchorPoint决定)
    @property CGPoint position;

  • 锚点(x,y的范围都是0-1)，决定了position的含义
    @property CGPoint anchorPoint;

  • 背景颜色(CGColorRef类型)
    @property CGColorRef backgroundColor;

  • 形变属性
    @property CATransform3D transform;

  • 边框颜色(CGColorRef类型)
    @property CGColorRef borderColor;

  • 边框宽度
    @property CGFloat borderWidth;

  • 圆角半径
    @property CGFloat cornerRadius;

  • 内容(比如设置为图片CGImageRef)
    @property(retain) id contents;

• 关于CALyer需要注意的

  • CALayer是定义在QuartzCore框架中的
  • CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
  • UIColor、UIImage是定义在UIKit框架中的 ，UIKit只能在iOS中使用

  • QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用

  • 为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

    ---

• 写代码体验一下

未修改时

修改圆角、添加阴影、添加边框后

点击屏幕执行一个动画效果，沿x轴翻转并缩放时

缩放后

• 项目中拖入一个view，设置为红色；拖入一个imageView

• ViewController.m

#import "ViewController.h"

@interface ViewController ()

/**
 红色view
 */
@property (weak, nonatomic) IBOutlet UIView *redView;

/**
 图片view
 */
@property (weak, nonatomic) IBOutlet UIImageView *imageView;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
     //设置红色view
    [self setUpViewLayer];
    //设置imageView
    [self setUpImageViewLayer];


}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:1 animations:^{

        // angle ：旋转的角度  x:如果是1，就以x轴为轴旋转  y: 如果是1，就以y轴为轴旋转  z:如果是1，就以z轴为轴旋转
//        CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

        _redView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

        //缩放
        _redView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);


    }];
}

-(void)setUpImageViewLayer
{
    //利用剪切layer的方法剪切圆形会有问题，当imageView时长方形时，就不会切出圆形了
    //设置半径
    _imageView.layer.cornerRadius = 75;
    //多余部分切掉
    _imageView.layer.masksToBounds = YES;

    //边框宽度
    _imageView.layer.borderWidth = 1;
    //边框颜色
    _imageView.layer.borderColor = [UIColor greenColor].CGColor;

}

-(void)setUpViewLayer
{
    //•设置阴影
    //Opacity 不透明度
    _redView.layer.shadowOpacity = 1;

    //设置阴影偏移的方向
    //    _redView.layer.shadowOffset = CGSizeMake(10, 10);

    //阴影的颜色
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;
    //阴影的半径
    _redView.layer.shadowRadius = 10;

    //•圆角半径
    _redView.layer.cornerRadius = _redView.bounds.size.width/2;

    //边框
    _redView.layer.borderWidth = 1;
    _redView.layer.borderColor = [UIColor greenColor].CGColor;


}

@end

---

• github demo: CALayerIntroduceDemo