Core Animation学习笔记(二)- 图层几何布局

Core Animation学习笔记(二)- 图层几何布局

我的 博客地址

一、Layout

UIView有三个比较重要的布局属性:frameboundscenterCALayer对应地叫做frameboundsposition
frame是图层在父图层上的坐标,bounds是内部坐标({0, 0}通常是左上角)。
centerposition要难理解一些,简单来说他们定义了anchorPoint在父图层中的位置(后面会详细说明)。

UIViewframe,bounds,center 属性其实只是存取方法,改变这三个属性其实实质上是改变 CALayer 的对应属性。下图是一个例子:

UIView和CALayer坐标系

frame 是一个虚拟属性,是根据 boundspositiontransform 计算而来,所以当其中任何一个值发生改变,frame 都会变化。相反,改变 frame 的值同样会影响到他们当中的值。

framebounds 一直相等吗?这是一个面试常问到的问题。
我们通常开发的时候framebounds的宽高都相等。但是当对图层做变换的时候(旋转或者缩放),frame 实际上代表了覆盖在图层旋转之后的整个轴对齐的矩形区域,这时候它们将不再相等。如下图所示。

旋转后的坐标系

二、anchorPoint、position、center三者不得不说的故事

要彻底理解 position 究竟是什么,首先我们得搞懂什么是 anchorPoint。它可以理解为一个固定图层的图钉,它的主要作用是作为变换的支点,比如在旋转图层时,就会以 anchorPoint 为圆心旋转(一起来想象一下)。

15437419896060.jpg

anchorPoint 用相对坐标表示,它表示相对于图层的位置,举几个例子。

  • 左上角:(0,0)
  • 右下角:(1,1)
  • 中心:(0.5,0.5)

需要注意的是 anchorPoint 可以放到 layer 外面,设置大于1或小于0的值就行。

position 就表示 anchorPoint 在父图层的坐标,下面这张图非常的清晰明了。

position详解

由于 anchorPointCALayer 的属性,默认值是(0.5,0.5),也就是中心。而 UIView 没有这个属性,因此 UIViewcenter 属性就表示view的中心点在父view的坐标(命名为center可以说是非常的直观)。

三、Coordinate Systems

3.1、坐标系转换

CALayer 给不同坐标系之间的图层转换提供了一些工具类方法,这些方法可以把定义在一个图层坐标系下的点或者矩形转换成另一个图层坐标系下的点或者矩形。

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer;
- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

3.2、翻转

常规说来,在iOS上,一个图层的position位于父图层的左上角,但是在Mac OS上,通常是位于左下角。Core Animation可以通过geometryFlipped属性来适配这两种情况,它决定了一个图层的坐标是否相对于父图层垂直翻转,是一个BOOL类型。在iOS上通过设置它为YES意味着它的子图层将会被垂直翻转,也就是将会沿着底部排版而不是通常的顶部(它的所有子图层也同理,除非把它们的geometryFlipped属性也设为YES)。

3.3、Z 轴

UIView 严格的二维坐标系不同,CALayer 存在于一个三维空间当中。除了我们已经讨论过的 positionanchorPoint 属性之外,CALayer 还有另外两个属性,zPositionanchorPointZ,二者都是在Z轴上描述图层位置的浮点类型。

四、Hit testing

CALayer 并不关心事件响应链,所以不能直接处理触摸事件或者手势。但是它有一系列的方法帮你处理事件:containsPoint:hitTest:
containsPoint: 接受一个在本图层坐标系下的CGPoint,如果这个点在layer的frame范围内就返回YES。
hitTest: 方法接受一个CGPoint类型参数,它返回这个点所在layer,也就是layer本身,或者叶子节点。

自动布局

CALayer 不支持自动布局,需要手动管理和计算。最好的管理时机是 CALayerDelegate 的方法 layoutSublayersOfLayer: ,这个方法自动调用当 bounds 变化或者 setNeedsLayout 被调用。

然后手动管理布局非常的不友好,这是一个为什么不直接用 CALayer,而是要用 UIView 的重要原因。

小结

  1. 理解frameboundscenterpositionanchorPoint 对于理解图层布局很重要。
  2. CALayer 没有处理事件响应链,需要手动处理。
  3. CALayer 不支持自动布局。

参考文章

这将是你最后一次纠结position与anchorPoint!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容