理解Frame

suiling· 2013-12-09
本文由 Migrant 翻译自 Understanding Frame
 
Frame是布局的核心。每个开发者都使用frame定位和改变UIView和CALayer的大小。在本文中我将把焦点集中在CALayer上,因为它是UIView的底层实现,view.frame简单的返回了view.layer.frame。此外,我不会讨论setFrame:方法。虽然看起来范围十分有限,但实际上有许多有趣的事情在平凡又古老的frame getter方法中发生。
 
Frame依赖于什么
众所周知,frame是一个派生属性,实际上它基于一些其他的属性。实际上在计算frame值的时候会参考4个(!)属性:bounds,anchorPoint,transform,和position。
 
我们从bounds开始。bounds很棘手,它混合了层的内部和外部。bounds.size定义了层本身的面积,声明了它所存在的区域。设置masksToBounds为YES会把所有子层超出bounds范围的部分裁掉。另一方面,bounds的origin属性并不影响层本身的布局;然而它会影响它内部的子层的布局方式。bounds.origin定义了层内部坐标系的原点。
 
这里有一个例子展示了bounds.origin如何工作。例如我们定义bounds.origin为CGPointMake (20.0f, 30.0f)
 
 
如何定义本地坐标系?只要把层的左上角放到bounds.origin上就行了。
 
anchorPoint是一个稍微有点不同的讨厌鬼。首先,它的值标准化为0.0-1.0的范围内。获得以”点”为单位的值需要用bounds.size乘以标准化的值。更重要的是,anchorPoint定义了应用变换的坐标系的原点。
 
变换具有相同bounds但有不同anchorPoint的层(蓝色)会有很大区别(灰色)。
 
position是最简单的一个概念。它定义了经过bounds.size,anchorPoint和transform的混合后,添加到层中的最终位置。
 
精度的快速讨论
在写这篇博客的时候,我留意到有时我的计算结果和CoreAnimation返回的计算结果相比有所出入。有可能是我计算错误或者有精度问题。我理所当然的首先检查了精度问题。幸运的是我的直觉是正确的。CGFloat在32位架构上是一个float的类型定义(在64位架构上是double),而似乎CoreAnimation并没有理会CGFloat的实际类型而在内部直接使用了double。
 
要证实这个猜测并不困难。使用Hooper工具检查CALayer的framegetter方法的执行内容,我发现了一个叫做mat4_apply_to_rect的函数。然后我在这里设置了一个符号断点,实际上也就是在CA::Mat4Impl::mat4_apply_to_rect(double const*, double*)和CA::Mat4Impl::mat4_apply_to_rect(float const*, float*)上分别设置了一个断点,以确定哪一个函数被执行。当在设备上运行代码的时候,断点停在了参数是double的函数中,即使使用的是32位ARM架构的iPhone。
 
在一些极端情况下,使用float和double的差异是显而易见的。然而因为我们的目标是对CoreAnimation进行逆向工程并得到完全相同的结果,所以我们也使用double。我们定义一些和CoreGraphics中相同的非常简单的结构体。
 
  1. typedef struct MCSDoublePoint { 
  2.   double x, y; 
  3. } MCSDoublePoint; 
  4.   
  5. typedef struct MCSDoubleSize { 
  6.   double width, height; 
  7. } MCSDoubleSize; 
  8.   
  9. typedef struct MCSDoubleRect { 
  10.   MCSDoublePoint origin; 
  11.   MCSDoubleSize size; 
  12. } MCSDoubleRect; 
 
值得注意的是在64位iOS设备上,我们精心构建的struct会变得多余,因为在该架构上,CGPoint,CGSize和CGRect本来就是用doubles的。
 
变换
在深入分析frame之前,我们先了解一下变换。虽然CALayer使用的是一个完整的4×4的矩阵模拟CATransform3D,但它对计算frame的目的真的没有影响。所以,我们把焦点集中在CGAffineTransform上,它可以用每个人都喜欢的CATransform3DGetAffineTransform方法从CATransform3D中简单获得。
 
让我们从点开始,使用仿射变换来变换点是入门级的袋鼠:
 
  1. MCSDoublePoint MCSDoublePointApplyTransform(MCSDoublePoint point, CGAffineTransform t) 
  2.   MCSDoublePoint p; 
  3.   p.x = (double)t.a * point.x + (double)t.c * point.y + t.tx; 
  4.   p.y = (double)t.b * point.x + (double)t.d * point.y + t.ty; 
  5.   return p; 
 
上面的代码实现基于CGPointApplyAffineTransform,从根本上来讲是一个3x3的变换矩阵乘一个三维向量。
 
这个矩阵被CGAffineTransform的值填充,被乘的向量由点的x坐标,y坐标和1.0组成,让结果向量从矩阵中也得到转换过的元素。
 
通过点变换,我们很容易变换矩形。通过变换矩形的顶点并用直线连接它们创建一个平行四边形(通常可以是任意四边形)。 但这并不是CGRectApplyAffineTransform的如何工作的。这个函数接收一个CGRect参数并返回一个CGRect。正如头文件CGAffineTransform.h中的注释声明的:
 
通常来说因为仿射变换并不保护矩形,这个函数返回一个最小的包括经过变换的rect的四个顶点的矩形。
 
读过这个以后,使用double再现CGRectApplyAffineTransform变得相对直接:
 
  1. MCSDoubleRect MCSDoubleRectApplyTransform(MCSDoubleRect rect, CGAffineTransform transform) 
  2.   double xMin = rect.origin.x; 
  3.   double xMax = rect.origin.x + rect.size.width; 
  4.   double yMin = rect.origin.y; 
  5.   double yMax = rect.origin.y + rect.size.height; 
  6.   
  7.   MCSDoublePoint points[4] = { 
  8.     [0] = MCSDoublePointApplyTransform((MCSDoublePoint){xMin, yMin}, transform), 
  9.     [1] = MCSDoublePointApplyTransform((MCSDoublePoint){xMin, yMax}, transform), 
  10.     [2] = MCSDoublePointApplyTransform((MCSDoublePoint){xMax, yMin}, transform), 
  11.     [3] = MCSDoublePointApplyTransform((MCSDoublePoint){xMax, yMax}, transform), 
  12.   }; 
  13.   
  14.   double newXMin =  INFINITY; 
  15.   double newXMax = -INFINITY; 
  16.   double newYMin =  INFINITY; 
  17.   double newYMax = -INFINITY; 
  18.   
  19.   for (int i = 0; i < 4; i++) { 
  20.     newXMax = MAX(newXMax, points[i].x); 
  21.     newYMax = MAX(newYMax, points[i].y); 
  22.     newXMin = MIN(newXMin, points[i].x); 
  23.     newYMin = MIN(newYMin, points[i].y); 
  24.   } 
  25.   
  26.   MCSDoubleRect result = {newXMin, newYMin, newXMax - newXMin, newYMax - newYMin}; 
  27.   
  28.   return result; 
 
我们计算了四个顶点的坐标,变换它们并且得到x和y的极值。
 
计算Frame
我们付出努力去理解我们关心的每一件事,现在,获得frame会是很热闹:
 
定义一个面积为bounds.size的矩形
计算该矩形内的anchorPoint位置
将矩形放入坐标系内,anchorPoint作为坐标系的原点
 
应用任何你实施的变换,保持一个”包含了经过转换的顶点的最小矩形”
根据position移动anchorPoint
灰色的就是结果矩形
实现这些操作的代码如下:
 
  1. - (CGRect)frameWithBounds:(CGRect)bounds anchorPoint:(CGPoint)anchorPoint transform:(CATransform3D)transform position:(CGPoint)position 
  2.   MCSDoubleRect rect; 
  3.   
  4.   rect.size.width = bounds.size.width; 
  5.   rect.size.height = bounds.size.height; 
  6.   rect.origin.x = (double)-bounds.size.width * anchorPoint.x; 
  7.   rect.origin.y = (double)-bounds.size.height * anchorPoint.y; 
  8.   
  9.   rect = MCSDoubleRectApplyTransform(rect, CATransform3DGetAffineTransform(transform)); 
  10.   
  11.   rect.origin.x += position.x; 
  12.   rect.origin.y += position.y; 
  13.   
  14.   return CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height); 
 
虽然代码不多,但利用了我们讨论过的所有概念。
 
这些如何映射到UIView
关于framegetter方法,bounds和center,UIView并没有做什么工作;它只是简单的各自调用它底层的CALayer的frame,bounds和position方法。
 
注意center到position的映射 — 改变底层layer的anchorPoint会使center不能正确的对应到层的”中心”或者层的边界矩形的”中点”。