iOS开发UI篇—CALayer简介

分类：iOS作者：编程之家用户

 

一、简单介绍

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层

@property(nonatomic,readonly,retain) CALayer *layer; 

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示

换句话说，UIView本身不具备显示的功能，拥有显示功能的是它内部的图层。

 

二、简单使用

　　UIView之所以能够显示，完全是因为内部的CALayer对象。因此，通过操作这个CALayer对象，可以很方便地调整UIView的一些界面属性，比如：阴影、圆角大小、边框宽度和颜色等。

　　新建一个项目，在storyboard中添加一个view.

 

　　1.通过layer设置边框的宽度和颜色

复制代码

 
 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 
 6 @end
 7 
 8 @implementation YYViewController
 9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //设置边框的宽度为20
14     self.customView.layer.borderWidth=20;
15     //设置边框的颜色
16     self.customView.layer.borderColor=[UIColor greenColor].CGColor;
17 }
18 
19 @end

复制代码

　　

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

1     //设置layer的圆角
2     self.customView.layer.cornerRadius=20;

3.在layer上添加一张图片 

复制代码

 
 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 
 6 @end
 7 
 8 @implementation YYViewController
 9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //设置边框的宽度为20
14     self.customView.layer.borderWidth=5;
15     //设置边框的颜色
16     self.customView.layer.borderColor=[UIColor blackColor].CGColor;
17     
18     //设置layer的圆角
19     self.customView.layer.cornerRadius=20;
20     
21     //在view的图层上添加一个image，contents表示接受内容
22     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
23     
24 }
25 @end

复制代码

说明：contents是id类型，可以接受内容，上面的实例让layer显示一张图片，仔细观察可以发现四个圆角的部分露了一个角出来。

产生的原因说明：

               

customview上的根layer

  

UIimage的图层

  

 

添加后

那是因为设置的image不是展示在主图层上的，而是显示在子图层上的。可以通过设置一个范围，设置超出主图层的部分把它给剪切掉。

有以下两种方法，建议使用layer中的方法（第二种）self.customView.layer.masksToBounds=YES;

复制代码

 
 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     //设置边框的宽度为20
 5     self.customView.layer.borderWidth=5;
 6     //设置边框的颜色
 7     self.customView.layer.borderColor=[UIColor blackColor].CGColor;
 8     
 9     //设置layer的圆角
10     self.customView.layer.cornerRadius=20;
11     //设置超过子图层的部分裁减掉
12     //UI框架中使用的方法
13 //    self.customView.clipsToBounds=YES;
14     self.customView.layer.masksToBounds=YES;
15     
16     //在view的图层上添加一个image，contents表示接受内容
17     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
18 }

复制代码

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

 　　4.设置阴影

　　设置阴影，不光需要设置阴影颜色，还应该设置阴影的偏移位和透明度。

　　因为如果不设置偏移位的话，那么阴影和layer完全重叠，且默认透明度为0（即完全透明）。

复制代码

 
 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     
 5     //设置阴影的颜色
 6     self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
 7     //设置阴影的偏移量，如果为正数，则代表为往右边偏移
 8     self.customView.layer.shadowOffset=CGSizeMake(15, 5);
 9     //设置阴影的透明度(0~1之间，0表示完全透明)
10     self.customView.layer.shadowOpacity=0.6;
11 }

复制代码

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

复制代码

 
 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     
 5     //设置边框的宽度为20
 6     self.customView.layer.borderWidth=5;
 7     //设置边框的颜色
 8     self.customView.layer.borderColor=[UIColor blackColor].CGColor;
 9     
10     //设置layer的圆角
11     self.customView.layer.cornerRadius=20;
12     //设置超过子图层的部分裁减掉
13     //UI框架中使用的方法
14     //    self.customView.clipsToBounds=YES;
15     self.customView.layer.masksToBounds=YES;
16     
17     //在view的图层上添加一个image，contents表示接受内容
18     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
19     
20     //设置阴影的颜色
21     self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
22     //设置阴影的偏移量，如果为正数，则代表为往右边偏移
23     self.customView.layer.shadowOffset=CGSizeMake(15, 5);
24     //设置阴影的透明度(0~1之间，0表示完全透明)
25     self.customView.layer.shadowOpacity=0.6;
26 }

复制代码

　　

把剪切超出主图层部分的代码注释掉之后的显示效果

复制代码

 
 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     
 5     //设置边框的宽度为20
 6     self.customView.layer.borderWidth=5;
 7     //设置边框的颜色
 8     self.customView.layer.borderColor=[UIColor blackColor].CGColor;
 9     
10     //设置layer的圆角
11     self.customView.layer.cornerRadius=20;
12     //设置超过子图层的部分裁减掉
13     //UI框架中使用的方法
14     //    self.customView.clipsToBounds=YES;
15 //    self.customView.layer.masksToBounds=YES;
16     
17     //在view的图层上添加一个image，contents表示接受内容
18     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
19     
20     //设置阴影的颜色
21     self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
22     //设置阴影的偏移量，如果为正数，则代表为往右边偏移
23     self.customView.layer.shadowOffset=CGSizeMake(15, 5);
24     //设置阴影的透明度(0~1之间，0表示完全透明)
25     self.customView.layer.shadowOpacity=0.6;
26 }

复制代码

5.只要继承自uiview的都有layer属性，下面以图片为例进行说明。

在storyboard中新添加一张图片。

简单设置示例

复制代码

 
 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
 6 
 7 @end
 8 
 9 @implementation YYViewController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14     
15     //设置图片layer的边框宽度和颜色
16     self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
17     self.iconView.layer.borderWidth=5;
18     
19     //设置layer的圆角
20     self.iconView.layer.cornerRadius=20;
21     //设置超过子图层的部分裁减掉
22        self.iconView.layer.masksToBounds=YES;
23 }

复制代码

设置bounds属性，在设置时需要去除掉storyboard中的自动布局属性。

       

设置图片的形变属性（transform）

复制代码

 
 1 @implementation YYViewController
 2 
 3 - (void)viewDidLoad
 4 {
 5     [super viewDidLoad];
 6 }
 7 
 8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 9 {
10 
11     //通过uiview设置（2D效果）
12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
13     //通过layer来设置（3D效果,x，y，z三个方向）
14     self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
15 }

复制代码

 
通过uiview设置（2D效果）
       


通过layer设置（3D效果）
       


使用KVC进行设置

复制代码

 
 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
 6 
 7 @end
 8 
 9 @implementation YYViewController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14 }
15 
16 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
17 {
18 
19     //通过uiview设置（2D效果）
20 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
21     //通过layer来设置（3D效果,x，y，z三个方向）
22 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
23     
24     //通过KVC来设置
25     NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
26     [self.iconView.layer setValue:v forKeyPath:@"transform"];
27     //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
28     //在x的方向上向左移动100
29     [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
30 }

复制代码

查看苹果的官方文档，下面的属性都可以通过KVC进行设置。

旋转一个弧度

复制代码

 
 1 @implementation YYViewController
 2 
 3 - (void)viewDidLoad
 4 {
 5     [super viewDidLoad];
 6 }
 7 
 8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 9 {
10 
11     //通过uiview设置（2D效果）
12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
13     //通过layer来设置（3D效果,x，y，z三个方向）
14 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
15     
16     //通过KVC来设置
17 //    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
18 //    [self.iconView.layer setValue:v forKeyPath:@"transform"];
19 //    //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
20 //    //在x的方向上向左移动100
21 //    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
22     
23     //旋转
24     self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
25 }

复制代码

补充：三维坐标系

原文地址：https://www.cnblogs.com/CoderAlex/p/10353057.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

10个常见的苹果iOS16问题及解决方法
当我们远离最新的 iOS 16 更新版本时，我们听到了困扰 Apple 最新软件的错误和性能问题。
怎么激活苹果手机？苹果手机激活步骤详解
欧版/美版 特别说一下，美版选错了 可能会永久丧失4G，不过只有5%的概率会遇到选择运营商界面且部分必须连接到iTunes才可以激活
借助辅助工具appuploader iOS应用上架流程
一般在接外包的时候, 通常第三方需要安装你的app进行测试(这时候你的app肯定是还没传到app store之前)。
Flutter中实现整个App变为灰色
前言为了让更多的人永远记住12月13日，各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的，只需要在最外层的控件上包裹ColorFiltered，用法如下：ColorFiltered（颜色过滤器）看名字就知道是增加颜色滤镜效果的，ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.
【Cocos creator】Cocos creator介绍和入门
Cocos creator介绍和入门
Vue3使用axios的配置教程详解
vue3.0 axios封装
flutter升级/版本切换
flutter升级/版本切换
【C++入门】文件流fstream介绍和使用
(1)在C++11标准时，open函数的文件路径可以传char指针也可以传string指针，而在C++98标准，open函数的文件路径只能传char指针；(2)open函数的第二个参数是打开文件的模式，从函数定义可以看出，如果调用open函数时省略mode模式参数，则默认按照可读可写(ios_base:in | ios_base::out)的方式打开；(3)打开文件时的mode的模式是从内存的角度来定义的，比如：in表示可读，就是从文件读数据往内存读写；out表示可写，就是把内存数据写到文件中；
iOS App页面置灰
文章目录方法一：分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二：给App整体添加灰色滤镜参考App页面置灰，本质是将彩色图像转换为灰度图像，本文提供两种方法实现，一种是App整体置灰，一种是单个页面置灰，可结合具体的业务场景使用。方法一：分别将图片和文字置灰一般情况下，App页面的颜色深度是24bit，也就是RGB各8bit；如果算上Alpha通道的话就是32bit，RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit，这8bit表示的颜色不是彩色，而是256
iOS黑(灰)白化实现方案---记录
领导让调研下黑(灰)白化实现方案，自己调研了两天，根据网上资料，做下记录只是学习过程中的记录，还是写作者牛逼
让学前端不再害怕英语单词二
让学前端不再害怕英语单词（二），通过本文，可以对css，js和es6的单词进行了在逻辑上和联想上的记忆，让初学者更快的上手前端代码
电视剧里的代码真能运行吗？
用Python送你一颗跳动的爱心
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app项目中实现人脸识别，既使用uni-app中的live-pusher开启摄像头，创建直播推流。通过快照截取和压缩图片，以base64格式发往后端。
vue支付项目-APP微信支付功能
商户APP调用微信提供的SDK调用微信支付模块，商户APP会跳转到微信中完成支付，支付完后跳回到商户APP内，最后展示支付结果。CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；4.可取消支付，放弃支付会返回会员页面，页面提示支付取消；2.判断支付方式，如果是1，则是微信支付方式。1.判断是否在微信内支付，需要在微信外支付。
U3D热更新技术
iOS修改ipa并重新签名打包
Mac命令行修改ipa并重新签名打包
UniApp 在 iOS 16 下真机自定义基座调试指南，可解决模拟器无法输出调试日志问题
首先在 iOS 设备中打开开发者模式。位于：设置 - 隐私&安全 - 开发者模式（需重启）
IOS开发之——Undefined symbol:_OBJC_CLASS
一 现象导入MBProgressHUD显示信息时，出现如下异常现象Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MBProgressHUD", referenced from: objc-class-ref in ViewController.old: symbol(s) not found for architecture x86_64clang: error: linker command failed wit
uni-app开发App上架Apple Store流程简略版
Profiles >> 加号添加 >> Distribution >> "App Store" >> 选择 2.1 创建的App ID >> 选择绑定 2.3 的发布证书（.cer）>> 输入描述文件名称 >> Generate 生成描述文件 >> Download。Certificates >> 加号添加 >> "App Store and Ad Hoc" >> “Choose File...” >> 选择上一步生成的证书请求文件 >> Continue >> Download。
Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解
今天有需求，要实现的功能大致如下：在安卓和ios端实现分享功能可以分享链接，图片，文字，视频，文件，等欢迎大佬多多来给萌新指正，欢迎大家来共同探讨。如果各位看官觉得文章有点点帮助，跪求各位给点个“一键三连”，谢啦~声明：本博文章若非特殊注明皆为原创原文链接。
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot