UI位置与布局
引言
发现UGUI的RectTransform定位还是很复杂的，感觉有必要详细了解一下
RectTransform
继承自Transform。他的local position由其他几个变量控制。建议不要直接设置position
目的是为了实现UI自动布局。这套方法将绝对定位，相对定位，百分比定位等整合在一起，可以说非常灵活，不过同时增加了复杂度。
1.绝对定位
当anchors最大值与最小是相同时，为决定定位。
定位过程：以锚点确定起点，anchored position确定偏移量，根据pivot确定中心点，最后根据size delta决定大小
变量详解
-
anchors
-
锚点
-
决定起点
- 0-1比例
-
-
-
anchored position
-
偏移量
- 坐标值
-
-
pivot
-
决定中心点
- 0-1比例
-
-
size delta
-
框的宽和高
- 坐标值
-
意义
-
可以自行决定坐标的起点和终点，非常灵活。
-
例
-
居中，靠左上角，靠右上角等等
-
例：制作一排图片时起点终点都在左，制作镖耙时中心在中，不用考虑图片大小和父级物体位置。
-
2.相对定位
当anchors最大值与最小不相同时
定位过程：由锚框确定外框，left，right等设定边距
变量详解
-
anchors
-
锚框
-
范围在01之间
- 划定一个范围，这个范围就是外框
-
-
-
left，right，top，bottom
-
边距。
-
范围是像素值
-
可为负，此时会在外框外面
-
-
-
意义
-
可以自行决定坐标的起点和终点，非常灵活。
-
实现边距布局
-
令锚框与父物体相同，此时大小完全由边距决定。如left=10，表示左边距为10。当父物体缩放时，始终保持左边有10的间距。
- 设置弹窗始终与屏幕间隔固定距离。
-
-
实现百分比布局
-
令边距都是0，此时大小与锚框完全相同。因此调整锚框即可实现按照比例布局。
- 如Xmin=0.5，Xmax=1，始终占据右半边
-
坑
-
size delta和anchored position没用了
-
size delta
- x是left与right之和的负数，y是top与bottom之和的负数
-
anchored position
- 父物体中心到图片中心的偏移量（这里中心都由子物体pivot决定）
-
获取和修改边框
-
offsetMax和offsetMin
-
left
- offsetMin.x
-
right
- -offsetMax.x
-
top
- offsetMin.y
-
bottom
- -offsetMax.y
-
推荐使用的属性
不受布局影响，通用
大小
-
rect.width
-
rect.height
位置
-
anchored position
-
offsetMax和offsetMin
RectTransform上一些特殊控件
Anchor Presets
-
快速修改anchors到预设的几个常用布局。按住shift可同时设置pivot，按住alt可同时设置position。一般用到的布局就这几个。
右侧虚线框按钮
-
蓝图模式。未开启时，包围框会放大来包含整个图片。开启时，包围框是无视缩放旋转的。运行时点击区域依然是旋转和缩放后的区域。
- 好像没啥用？
右侧R按钮
-
Raw模式。修改pivot或者anchors后，不会自动调整令范围不变。
- 好像也没啥用？
坐标换算
图
UGUI坐标系指的是没有经过自适应计算的位置。UGUI会自动根据屏幕分辨率不同，来决定缩放和移动，自动适应屏幕。
如果要实现一些点击位置或者实现拖拽控件会用到坐标转换，整理在下面了。
UGUI坐标
-
屏幕坐标
- 世界坐标
坐标转换
-
世界坐标->屏幕坐标
- RectTransformUtility.WorldToScreenPoint
-
屏幕坐标->世界坐标
- RectTransformUtility.ScreenPointToWorldPointInRectangle
-
屏幕坐标->UGUI坐标
- RectTransformUtility.ScreenPointToLocalPointInRectangle
-
UGUI坐标->世界坐标
- transform.position
-
UGUI坐标->屏幕坐标
- UGUI坐标->世界坐标->屏幕坐标
-
世界坐标->UGUI坐标
- 世界坐标->屏幕坐标-> UGUI坐标
相关的实用函数
rect
-
rect是RectTransform的区域信息，其中（x，y）是RectTransform左下角到Pivot（不是Anchors）的相对位置，（width，height）是RectTransform区域的大小。
SetSizeWithCurrentAnchors
- 当Anchors不重合的时候，设置sizeDelta就不能正确控制RectTransform的大小，此时可以使用SetSizeWithCurrentAnchors(axis, size)来设置rect的width和height。
SetInsetAndSizeFromParentEdge
- 可以根据父类的某个边，设置大小和间距（注意此方法会改变Anchors的位置）
RectTransformUtility
- 提供了很多实用方法
offsetMax和offsetMin
-
offsetMin是Anchors左下角到RectTransform左下角的距离。文章来源：https://www.toymoban.com/news/detail-675695.html
-
offsetMax是Anchors右上角到RectTransform右上角的距离。文章来源地址https://www.toymoban.com/news/detail-675695.html
参考文章
Unity3D RectTransform使用详解：布局、属性、方法
- https://zhuanlan.zhihu.com/p/139252379
【Unity UGUI】屏幕坐标转换
- https://blog.csdn.net/onelei1994/article/details/103065949
动态修改 RectTransform 的Left，Top，Right和Bottom值
- https://it.cha138.com/python/show-5829124.html
到了这里，关于UI位置与布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
