一.简单介绍
在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
补充:三维坐标系