zoukankan      html  css  js  c++  java
  • CALayer简介(转)

    一.简单介绍 
      在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮,一个文本标签,一个文本输入框,一个图标等等,这些都是UIView。 
      其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层。 
      当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示。 
      换句话说,UIView本身不具备显示的功能,拥有显示功能的是它内部的图层。

    二.简单使用 
      UIView之所以能够显示,完全是因为内部的CALayer对象。因此,通过操作这个CALayer对象,可以很方便地调整UIView的一些界面属性。比如:阴影,圆角大小,边框宽度和颜色等。 
      1.通过layer设置边框的宽度和颜色

    #import "ViewController.h"
    
    #define ScreenWidth          [UIScreen mainScreen].bounds.size.width
    #define ScreenHeight         [UIScreen mainScreen].bounds.size.height
    
    #define ViewWidth            100
    #define ViewHeight           100
    
    @interface ViewController ()
    
    @property(nonatomic,strong) UIView *customView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置边框的宽度为20
        _customView.layer.borderWidth = 20;
        //设置边框的颜色
        _customView.layer.borderColor = [UIColor greenColor].CGColor;
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    @end

    2.通过layer设置边框为圆角

    //设置layer的圆角
    _customView.layer.cornerRadius = 20;

    3.在layer上添加一张图片

    #import "ViewController.h"
    
    #define ScreenWidth          [UIScreen mainScreen].bounds.size.width
    #define ScreenHeight         [UIScreen mainScreen].bounds.size.height
    
    #define ViewWidth            100
    #define ViewHeight           100
    
    @interface ViewController ()
    
    @property(nonatomic,strong) UIView *customView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor yellowColor];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置边框的宽度为5
        _customView.layer.borderWidth = 2;
        //设置边框的颜色
        _customView.layer.borderColor = [UIColor blackColor].CGColor;
        //设置layer的圆角
        _customView.layer.cornerRadius = 2;
        //在view的图层上添加一个image,contents表示接受内容
        _customView.layer.contents = (id)[UIImage imageNamed:@"logo.jpg"].CGImage;
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    @end

    说明:contents是id类型,可以接受内容。 
      上面的实例让layer显示一张图片,仔细观察可以发现四个圆角的部分露了一个角出来。 
      那是因为设置的image不是展示在主图层上的,而是显示在子图层上的。可以通过一个范围,设置超出主图层的部分把它给剪切掉。 
      有两种方法,建议使用layer中的方法

    //第一种方法:UI框架中使用的方法
    self.customView.clipsToBounds = YES;
    //第二种方法
    _customView.layer.masksToBounds = YES;

    注意:layer中不能直接接受UI框架中的东西。

    4.设置阴影 
    设置阴影,不光需要设置阴影颜色,还应该设置阴影的偏移位和透明度。 
    因为如果不设置偏移位的话,那么阴影和layer完全重叠,且默认透明度为0(即完全透明)。

    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor yellowColor];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置layer的颜色
        _customView.layer.backgroundColor = [UIColor whiteColor].CGColor;
        //设置阴影的颜色
        _customView.layer.shadowColor = [UIColor blackColor].CGColor;
        //设置阴影的偏移量,如果为正数,则代表为往右边偏移
        _customView.layer.shadowOffset = CGSizeMake(15, 5);
        //设置阴影的透明度(0~1之间,0表示完全透明)
        _customView.layer.shadowOpacity = 0.6f;
    }

    补充说明:如果设置了超过主图层的部分剪掉,则设置阴影不会有显示效果。

    5.设置图片的形变属性(transform)

    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor yellowColor];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置layer的颜色
        _customView.layer.backgroundColor = [UIColor whiteColor].CGColor;
    
    
    
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        //通过UIView设置(2D效果)
        //_customView.transform = CGAffineTransformMakeTranslation(0, -100);
        //通过layer来设置(3D效果,x,y,z三个方向)
        _customView.layer.transform = CATransform3DMakeTranslation(100,20,0);
    }
    
    @end

    6.使用KVC进行设置

    @interface ViewController ()
    
    @property(nonatomic,strong) UIView *customView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor yellowColor];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置layer的颜色
        _customView.layer.backgroundColor = [UIColor whiteColor].CGColor;
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        //通过KVC来设置
        //NSValue *v = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100,20,0)];
        //[_customView.layer setValue:v forKey:@"transform"];
        //如果是只需要设置在某一个方向上的移动,可以参考下面的代码
        //在x的方向上向左移动100
        [_customView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
    }
    @end

    下面的属性都可以通过KVC进行设置。 

    7.简单实例 
    旋转一个弧度

    @interface ViewController ()
    
    @property(nonatomic,strong) UIView *customView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor yellowColor];
        _customView = [[UIView alloc] initWithFrame:CGRectMake(ScreenWidth/2 - ViewWidth/2,
                                                               ScreenHeight/2 - ViewHeight/2,
                                                               ViewWidth,
                                                               ViewHeight)];
        [self.view addSubview:_customView];
        //设置layer的颜色
        _customView.layer.backgroundColor = [UIColor whiteColor].CGColor;
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        _customView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
    }
    @end

    补充:三维坐标系

  • 相关阅读:
    设计高效SQL: 一种视觉的方法
    由于学校要两张2寸的照片,蓝底,所以下午课就去后面照相打印店去了
    如果一个事情总在同一个地点停留,就是没有执行效率
    我也是不得不说我的学习能力下降了,这两天都没有完成一个模块
    我也是不得不说我的学习能力下降了,这两天都没有完成一个模块
    就好像是回到了高中时候。没有什么感受
    今天中午还收到了,一条诈骗短信,说是中奖了
    今天晚上的主要事项是,完成上午考试所有不清楚的地方
    今天中午的时候,可能是自己太忙过头了,所以出现了拿错卡去充值
    项目并没有采用一端服务器做法,我也没有弄清楚原因
  • 原文地址:https://www.cnblogs.com/jiuyi/p/10103707.html
Copyright © 2011-2022 走看看