#锚点和轴心点的概念
每个UI控件都有一个锚点(Anchors)和轴心点(Pivot) , 如下图所示 :
- 锚点其实不是一个点 , 更准确来说它是一个锚框 。 在Rect-Transform组件中 , Anchros的两行坐标值Min和Max分别决定了锚框的左下角和右上角 ,这两个坐标值是相对于父对象的左下角来定位的 ,每条边的长度都为1 ,所以x和y的值的范围永远都是0-1 。所有UI节点的顶级父对象都是Canvas ;
- 在Rect-Transform组件中 ,pivot的(x,y)表示的是轴心点的位置 ,轴心点与锚点不同之处在与 ,轴心点是相对于自身对象的左下角来定位的 , 取值范围同样也是 0-1 ;
- 当Min(x,y)和Max(x,y)确定时 , 就确定了锚框在父对象中的相对位置 , 无论父对象怎样变换自身的尺寸 , 锚框的相对位置不变 。 轴心点同理 , 不同之处仅在于,其是相对于自身对象的位置始终确定,无论自身对象的尺寸如何变换 ;
#锚框是如何用于始终保持子控件相对于父控件的相对位置的 ?
可以认为锚框的Min点(即左下角) ,有一向量以其为起点 ,指向子控件的左下角 ,同理 ,锚框的Max点(即右上角),有一向量以其为起点 ,指向子控件的右上角 。因此 ,无论父控件的尺寸如何变换 ,保持子控件相对于父控件的位置不变的的关键在于 :保持这两个向量(方向和大小)不变 。 当父控件Parent发生尺寸变换时,锚框便发生等价的尺寸变换(这是由rect-transfrom组件面板中的Anchors坐标决定的),从而子控件child又相对于锚框发生变换(由上述提到的两个向量决定),所以,锚框是用于建立子控件和父控件自适应性的桥梁。对于子控件的自适应性变换,其主要有两种形式,一种是不改变自身尺寸的平移变换,另一种是改变自身尺寸的伸缩变换 ,具体是哪一种变换,取决于相对应(水平or竖直)正交分向量的方向是否相同;
#锚框(of子控件)在父控件中的三种基本分布情况 :
1,矩形分布 ,这种情况下:Min(X0,Y0) != Max(X1,Y1) , 如下图所示 :
在图中,橙色线框就代表着锚框,同时,可以注意到在Rect Transform组件面板中,PosX,PosY,Width,Height分别被Left,Top,Right,Bottom取而代之。这是因为此时的child控件,锚框不是成单点,并不是以单一锚点(锚框成点时)作为原点,轴心点相对于锚点的相对坐标值来确定自身相对于Parent的相对位置 ;而是以锚框的Min点作为原点,用于确定自身左下角的坐标值,即(Left,Bottom);以锚框的Max点作为原点 ,用于确定自身右上角的坐标值,即(Right,Top);从另一个角度来看 ,(Left,Bottom)和(Right,Top)也可以认为是child控件的各边与锚框相对应各边的边距 ;
接下来描述,成矩形分布的锚框是如何用于始终保持子控件相对于父控件的位置的
如图所示 , 黄色线框代表的是锚框, Max,Min和Pviot点也已经标出 。 前面提到过,锚框之所以能保证在父控件的尺寸任意变换的情况下 ,子控件于其的相对位置始终保持不变的关键在于两个向量 ,在矩形分布的情况下,这两个向量分别是MinH和MaxF ,具体来讲,就是,在父控件尺寸做任意变换的情况下 , 只要向量MinH和MaxF始终保持不变,相对位置就不会发生变化 ; 如果做进一步讨论的话,MinH保持不变,等价于MinL和LH始终保持不变 ,MaxF保持不变 ,等价于MaxJ和JF始终保持不变;。
当你选中Parent控件的任意一条宽并水平拖动它时,锚框便通过适应性的变换从而保持与Parent控件的相对位置 ,于此同时Child控件也通过适应性的变换从而保持与锚框的相对位置。