iOS开发之CALayer

简介:

1、概述

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView,其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(CALayer对象)通过UIView的layer属性可以访问这个层:

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

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

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

2CALayer的属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//宽度和高度:
@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 CGColorRef borderColor;
  
//内容(比如设置为图片CGImageRef):
@property(retain) id contents;

例如:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//边框宽度
   self.iconView.layer.borderWidth = 10;
   // 边框颜色
   self.iconView.layer.borderColor = [UIColor greenColor].CGColor;
     // 圆角
     self.iconView.layer.cornerRadius = 10;
  
     // 超出主层边框范围的内容都剪掉
     self.iconView.layer.masksToBounds = YES;
    
     // 阴影颜色
     self.iconView.layer.shadowColor = [UIColor blueColor].CGColor;
     // 阴影偏差
     self.iconView.layer.shadowOffset = CGSizeMake(20, 20);
     // 阴影不透明度
self.iconView.layer.shadowOpacity = 0.5;

【备注】新建图层:

?
1
CALayer *layer = [[CALayer alloc]init];

或者:

?
1
CALayer *layer = [CALayer layer];

例如:

?
1
2
3
4
5
6
7
8
9
10
// 新建图层
//CALayer *layer = [[CALayer alloc] init];
     CALayer *layer = [CALayer layer];
     layer.backgroundColor = [UIColor redColor].CGColor;
     layer.bounds = CGRectMake(0, 0, 100, 100);
     layer.position = CGPointMake(200, 100);
     layer.cornerRadius = 10;
     layer.masksToBounds = YES;
     layer.contents = (id)[UIImage imageNamed:@ "lufy" ].CGImage;
[self.view.layer addSublayer:layer];

运行结果:

3x\y\z

坐标原点(0,0,0)

比如使图层宽度变成1.5倍,高度变成0.5倍:

?
1
self.iconView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0);

 

绕着(0,0,1)顺时针旋转45度,即绕着Z轴旋转45度:

?
1
self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);

上面旋转等价于:

?
1
2
3
NSValue *value = [NSValue valueWithCATransform3D:
CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
[self.iconView.layer setValue:value forKeyPath:@ "transform" ];

也等价于:

?
1
2
[self.iconView.layer setValue:@(M_PI_4) forKeyPath:
@ "transform.rotation" ];

 

4、         关于CALayer的疑惑

首先:

(1)CALayer是定义在QuartzCore框架中的

(2)CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的

(1)UIColor、UIImage是定义在UIKit框架中的

其次:

(1)QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用

(2)但是UIKit只能在iOS中使用

(3)为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef

5UIViewCALayer的选择

通过CALayer,就能做出跟UIView一样的界面效果,既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?

其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以。

所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以。

当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级。

6positionanchorPoint

CALayer有2个非常重要的属性:position和anchorPoint:

@property CGPoint position;

(1)用来设置CALayer在父层中的位置

(2)以父层的左上角为原点(0, 0)

 

@property CGPoint anchorPoint;

(1)称为“定位点”、“锚点”,控件旋转动画围绕着锚点旋转

2)决定着CALayer身上的哪个点会在position属性所指的位置,可用来将控件放到指定位置(设置锚点并把锚点放到position位置)

(3)以自己的左上角为原点(0, 0)

4)它的xy取值范围都是0~1,默认值为(0.5, 0.5),即默认是重点

 

例如:

?
1
2
3
4
5
6
CALayer *layer = [CALayer layer];
     layer.bounds = CGRectMake(0, 0, 100, 100);
     layer.backgroundColor = [UIColor redColor].CGColor;
     layer.position = CGPointZero;
     layer.anchorPoint = CGPointZero;
     [self.view.layer addSublayer:layer];

7、隐式动画

每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)。

所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画。

什么是隐式动画?

当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果,而这些属性称为Animatable Properties(可动画属性)

几个常见的Animatable Properties

(1)bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画

(2)backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画

(3)position:用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务(CATransaction)关闭默认的隐式动画效果:

?
1
2
3
4
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];

上述代码执行将不会再有动画效果。

目录
相关文章
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
103 3
|
4月前
|
存储 iOS开发
iOS 开发,如何进行应用的本地化(Localization)?
iOS 开发,如何进行应用的本地化(Localization)?
123 2
|
4月前
|
存储 数据建模 数据库
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
42 0
|
4月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
106 2
|
2月前
|
API 开发工具 Android开发
iOS 和 Android 平台的开发有哪些主要区别?
iOS与Android开发区别:iOS用Objective-C/Swift,App Store唯一下载渠道;Android用Java/Kotlin,多商店发布(如Google Play、华为市场)。设计上,iOS简洁一致,Android灵活可定制。开发工具,iOS用Xcode,Android用Android Studio。硬件和系统多样性,iOS统一,Android复杂。权限管理、审核流程及API各有特点,开发者需依据目标平台特性进行选择。
36 3
|
9天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
9天前
|
存储 Swift iOS开发
使用Swift开发一个简单的iOS应用的详细步骤。
使用Swift开发iOS应用的步骤包括:创建Xcode项目,设计界面(Storyboard或代码),定义数据模型,实现业务逻辑,连接界面和逻辑,处理数据存储(如Core Data),添加网络请求(必要时),调试与测试,根据测试结果优化改进,最后提交至App Store或其它平台发布。
28 0
|
9天前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
|
9天前
|
存储 安全 Swift
【Swift 开发专栏】使用 Swift 开发一个简单的 iOS 应用
【4月更文挑战第30天】本文介绍了使用 Swift 开发简单 iOS 待办事项应用的步骤。首先,阐述了 iOS 开发的吸引力及 Swift 语言的优势。接着,详细说明了应用的需求和设计,包括添加、查看和删除待办事项的功能。开发步骤包括创建项目、界面搭建、数据存储、功能实现,并提供了相关代码示例。最后,强调了实际开发中需注意的细节和优化,旨在帮助初学者掌握 Swift 和 iOS 开发基础。
|
18天前
|
iOS开发 开发者 UED
利用SwiftUI构建动态列表:iOS开发的新范式
【4月更文挑战第22天】在本文中,我们将深入探讨如何使用SwiftUI来创建动态列表。SwiftUI是苹果最新推出的用户界面工具集,它允许开发者以声明式的方式描述用户界面,从而简化了代码的复杂性。我们将通过具体的代码实例,展示如何利用SwiftUI的List和ForEach视图来创建动态列表,并讨论其在实际开发中的应用。
18 2