主要内容
- 布局: Anchors,Pivot,Anchor Presets
- 属性: anchoredPosition,anchoredPosition3D,offsetMax,offsetMin,sizeDelta,rect
- 方法: SetSizeWithCurrentAnchors,SetInsetAndSizeFromParentEdge,RectTransformUtility
Anchors
Anchors是在子类锚在父类上的点,因此如果没有父类(RectTransform),那么RectTransform属性面板上的Anchor Presets将不可设置,但Anchors仍可设置。
![5e263aee84bf19e45ab4dc3262c70b13.png](https://i-blog.csdnimg.cn/blog_migrate/1fa20c18b7ff7abb4ac2c482509d7216.png)
所谓,锚在父类上,意思就是子类的Pivot(中心点)到(父类上)Anchors(锚点)的相对位置不变,而这个位置就是RectTransform面板上显示的——PosX,PosY,PosZ——对应了anchoredPosition3D(PosX,PosY,PosZ),或anchoredPosition(PosX,PosY)。
![7bc25b35d533bc2f11ffc6469af37ce2.png](https://i-blog.csdnimg.cn/blog_migrate/9865b37a2e642335b521eb08b9d64096.png)
需要注意的是,anchoredPosition3D(PosX,PosY,PosZ)并不是localPosition,除非子类的Anchors与父类的Pivot重合,这样子类的Pivot相对于(子类)Anchors的位置,刚好就是localPosition(子类Pivot相对于父类Pivot的位置)。
那么,Anchors的Min代表了在父类左下角的位置,Max代表了在父类右上角的位置,[0, 1]——的范围代表了在父类X轴和Y轴方向的百分比。
虽然,在Scene中Anchors无法超越父类区域,但在属性面板上,或是代码中(anchorMax,anchorMin,注意代码的数值是面板数值的四舍五入),Anchors均可以超过[0, 1]范围,即:代表父类区域之外。
![362159a6102280a7da57ef4e54b33187.png](https://i-blog.csdnimg.cn/blog_migrate/6f152892d97b74febb773d22f65874d4.png)
Anchors的重要作用,就是无论父类如何变化,子类相对于父类上Anchors的相对位置都不变。
![2b84f9341994629e967d9b80bab8ebd3.png](https://i-blog.csdnimg.cn/blog_migrate/b92e49318de1b73be61c52142a0883f4.png)
Pivot
Pivot代表了RectTransform的中心点,即:相对于RectTransform的坐标(如Anchor或Rotation)都会以它为基准点,(0,0)代表自身区域的左下,(1,1)代表自身区域的右上,如果超过了[0, 1]范围,就说明超过了自身区域之外。
![f3070b2beb5b1f4e269e8cdfb5058753.png](https://i-blog.csdnimg.cn/blog_migrate/377aae9232902bebf42a312adb6ed85b.png)
注意与Anchors不同的是,Anchors的[0, 1]范围是——父类区域,而Pivot的[0, 1]范围是——自身区域。
![27fdb4c28aeab7c0e57261930990763b.gif](https://i-blog.csdnimg.cn/blog_migrate/99bdd11fea9ca3f86bad4e3d2c256151.gif)
Anchor Presets
Anchor Presets是对Anchors的快捷设置选项,提供了最常用的几种Anchors设置模式,如:上中下,左中右,拉伸。如果不使用这里的预设,通过代码(anchorMax,anchorMin),或是面板属性,也是可以自定义设置的。
![9dac2048d822ace4ba0a8162db804564.png](https://i-blog.csdnimg.cn/blog_migrate/e91827837887117a7ce4bb1bbb34d2a2.png)
选择不同Anchor Presets的选项,可以看到,Scene中的Anchor会自动定位到不同位置。
![ad710bb9dc67d446dcd88034bd7d824a.png](https://i-blog.csdnimg.cn/blog_migrate/fca4fedcad0f2167d2e3be533120ce4e.png)
所谓,拉伸(stretch)就是Max的(x,y)和Min的(x,y)不一致:
- 可以是x不一致,此时可以选择——上中下。
- 也可以是y不一致,此时可以选择——左中右。
- 或是x和y都不一致,此时没有选择——手动调节。
相反,如果Max和Min的x和y对应一致,则说明,Max和Min两点重合,此时重合的一点,可以出现在上中下(y)与左中右(x)相搭配的位置,即:非拉伸的9种选项。
下面,是拉伸的三类情况:
上中下:
![53412a1090a420ec3fb09d7ff0e790e6.gif](https://i-blog.csdnimg.cn/blog_migrate/a9f23659a934b5d74a3469c41f9b519a.gif)
在这种情况下,面板上的PosX和Width会被,Left和Right取代。这代表着,RectTransform的区域到Anchors在x方向上的左右距离(类似CSS布局中的padding left right)。
![ff3ca62067190b89f4207765d4a4d755.png](https://i-blog.csdnimg.cn/blog_migrate/9ef6ab560840c229e7e92c956a5d14fa.png)
![8ec84239f0fac16606573bdd9c31dff3.png](https://i-blog.csdnimg.cn/blog_migrate/bdd38625e067cdc4fcc723f3401dc300.png)
左中右:
![945bb3b2463a603e6b0c145bfb5f9dba.png](https://i-blog.csdnimg.cn/blog_migrate/ef96486db08e8cc313cc4c3ea4045dc8.png)
在这种情况下,面板上的PosY和Height会被,Top和Bottom取代。这代表着,RectTransform的区域到Anchors在y方向上的上下距离(类似CSS布局中的padding top bottom)。
![037f47a88a642e13660f965f2c644400.png](https://i-blog.csdnimg.cn/blog_migrate/030e0eb6a0140e1ab30146614faf6ec9.png)
![b16a85cdb5f548ba124d001bc6286974.png](https://i-blog.csdnimg.cn/blog_migrate/528350fd6c485cc09a97cb95e021ea16.png)
四角:
![111c8c5a907df3120c72d68e4d7a513e.png](https://i-blog.csdnimg.cn/blog_migrate/37481f7e90cba94eda65dfeda44570fa.png)
当然,也可以自定义,四角的位置:
![9c924552e6563c494ede081bd7e7d2b6.png](https://i-blog.csdnimg.cn/blog_migrate/06b6b12a1a6cbd1ef0ea11d0bd63c92c.jpeg)
在这种情况下,面板上的PosX,PosY,Width,Height会被Left,Right,Top,Bottom取代。这代表着,RectTransform的区域到Anchors在xy方向上的四周距离(类似CSS布局中的padding)。
![54610e87e5c6977ad91a55398453268e.png](https://i-blog.csdnimg.cn/blog_migrate/9945705804133aff0d90054097454076.png)
![101a5a0bf7436d677c7a563e501d8597.png](https://i-blog.csdnimg.cn/blog_migrate/00fca0b17fe06a2fe2830e5769e19b06.png)
anchoredPosition和anchoredPosition3D
在RectTransform面板上,anchoredPosition3D对应了(PosX,PosY,PosZ),anchoredPosition对应了(PosX,PosY)。
当Anchors重合的时候,Anchors与Pivot的相对位置就是anchoredPosition。
![f2d068eeba009d8fd0712c7f60e5aab3.png](https://i-blog.csdnimg.cn/blog_migrate/e264dfd260f9da2a265f75326d0e0a20.png)
当Anchors分开的时候,Pivot在自身区域的比例,映射到Anchors上的点,再与Pivot的相对位置,就是anchoredPosition。
![06b9a869d8cf0e512b39415ad45550f3.png](https://i-blog.csdnimg.cn/blog_migrate/3c1d52e6a67d31d8d69a986a26cf2dfc.png)
offsetMax和offsetMin
offsetMin是Anchors左下角到RectTransform左下角的距离。
![9e5661676ce59822b485ae2d0a8cf080.png](https://i-blog.csdnimg.cn/blog_migrate/289668a2922a9b9e5d73b8d6fff19672.png)
offsetMax是Anchors右上角到RectTransform右上角的距离。
![72e8de7ff61d4fff021db5404aa13be3.png](https://i-blog.csdnimg.cn/blog_migrate/b2ea86750615abce71e01444900e9c55.png)
sizeDelta
sizeDelta是offsetMax - offsetMin
的值,它的几何意义是,RectTransform的区域与Anchors区域的差值,所以:
- 如果Anchors重合(区域大小为0),那么差值就是RectTransform的区域本身,此时sizeDelta就是面板上Width和Height的数值。
- 如果Anchors不重合,那么差值就是两个区域的大小差值,此时sizeDelta就不在是Width和Height的数值,面板上也不再显示Width和Height。
- 如果RectTransform区域大于Anchors区域,那么sizeDelta就是正值,否则就是负值。
rect
rect是RectTransform的区域信息,其中(x,y)是RectTransform左下角到Pivot(不是Anchors)的相对位置,(width,height)是RectTransform区域的大小。
![2538ad8bfcd3e031145f980cf0dd8e0b.png](https://i-blog.csdnimg.cn/blog_migrate/8eae14aa1e02de8ed3b0b107aaa70941.png)
方法
当Anchors不重合的时候,设置sizeDelta
就不能正确控制RectTransform的大小,此时可以使用SetSizeWithCurrentAnchors(axis, size)
来设置rect的width和height。
// rect width
rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 200);
// rect height
rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 200);
而SetInsetAndSizeFromParentEdge(edge, inset, size)
可以根据父类的某个边,设置大小和间距(注意此方法会改变Anchors的位置):
- edge:是父类的边,Left,Right,Top,Bottom
- inset:子类边到父类边的间距
- size:在边方向上的大小,如:Left和Right对应Width,Top和Bottom对应Height
// 以下两个方法
// 可以将子类(Top,Left)边,定位到距离父类(Top,Left)边各100像素的地方
// 并且设置子类大小为(400,400)
SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 100, 400);
SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 100, 400);
另外,RectTransformUtility
提供了RectTransform相关的一些辅助方法,来处理——坐标转换、坐标获取、范围测试等,可以简化完成某些功能的实现。
scott.cgi:「专栏目录」zhuanlan.zhihu.com
![4b7e410f41ad3f2413d6998abf8c114d.png](https://i-blog.csdnimg.cn/blog_migrate/ad86a9c33ef15fa14524025f42589712.jpeg)