【技术博客】Unity中UI的布局方式汇总整理 | week10
📢注释
示例
示例场景我放在Assets/Scenes/RoomScene/ShowUI
了,可以去看看参考一下
高亮的是最重要的布局方式,一定要看❗❗❗
布局方式
主要分为Rect Transform、Horizental Layout、Vertical Layout、Grid Layout
矩形布局 Rect Transform
Rect Transform
组件
最重要的布局方式
编辑时左上角工具栏选中Rect Tool
(你们应该知道按下鼠标滚轮是Move Tool、按右键是Rotate Tool吧?)
![image-20220505142839585](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505142839585.png)
快捷设置
我一般同时按住Shift+Alt选择
这个图挺清晰的,不解释了
![image-20220505143057490](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505143057490.png)
Anchor
Min
和Max
是那四个小三角的位置
也可以拖动小三角来改变这个位置
![image-20220505144425155](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505144425155.png)
小三角是Left、Top、Right、Bottom、PosZ这些外边距的基准点
一般设置好小三角Anchor范围,上面那些offset偏移都填0就好
Pivot
缩放的中心点(X、Y分别考虑)
一般是有Text组件需要居中、或者子属性需要居中时设置为0.5
其他情况直接设置为0就好
Offset
在Unity界面里就是上面的Left、Top、Right、Bottom这些外边距
在代码里用的是两个Vector2属性Min和Max,分别代表左下和右上顶点
![image-20220505145128073](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505145128073.png)
水平布局 Horizental Layout
Horizental Layout Group
加到父物体上
中心点
调整子物体水平展开的中心点:
![image-20220505145942084](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505145942084.png)
布局元素尺寸
尺寸大小控制:
![image-20220505150055364](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505150055364.png)
-
Control Child Size
:不允许子Layout Element自行调节,一般不勾选 -
Use Child Scale
:子Layout Element可以强制父物体膨胀 -
Child Force Expand
:强制子Layout Element占满整个空间
Padding%Spacing
设置子元素外边距padding
和间距spacing
注意spacing
只在没有勾选Child Force Expand - Width
时有效
![image-20220505154532230](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505154532230.png)
Layout Element
固定尺寸
![image-20220505150928568](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505150928568.png)
布局时,看能不能满足所有组件min width和prefer width
Unity具体逻辑流程如下:
![image-20220505153059472](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505153059472.png)
Flexible尺寸
设置的是权重
例如一共两个子元素
分别设置flexible width
值为3、7
则它们分别占父物体宽度的30%和70%
竖直布局 Vertical Layout
和水平基本一样
![image-20220505153658326](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505153658326.png)
网格布局 Grid Layout
![image-20220505154952140](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505154952140.png)
尺寸大小
每个小格子大小通过cell size
控制
间距通过spacing
控制
位置
Start Corner
起始位置:
![image-20220505155227697](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505155227697.png)
axis
:按顺序横着排 or 竖着排
![image-20220505155354856](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505155354856.png)
Child Alignment
:整体位置
![image-20220505155535863](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505155535863.png)
限制
Flexible
是自动调节,也可以设置固定行数列数
物体
等比例缩放 Ratio
Aspect Ratio Fitter
组件,常用于控制 icon 图标比例
建议:外面设置一个物体,通过Rect Transform控制大小,它就是图像的边界
子物体是icon图像,设置为Fit In Parent,宽度高度比为1
![image-20220505160803783](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505160803783.png)
画布 Canvas
适配屏幕大小
随屏幕大小变化:
Screen Space - Scale With Screen Size
理论上我们手机横屏和竖屏时 icon 大小应当是相同的
所以选择给高度宽度相同的适配权重,即Match Width Or Height - Match 0.5
![image-20220505141740216](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505141740216.png)
遮挡 Graphic Raycaster
-
Blocking Objects
-
当前画布遮挡了谁(别的指定类型物体)
-
可以区分2D和3D物体
-
建议选择
All
-
-
Blocking Mask
- 当前画布会被谁遮挡
- 注意:很容易导致点击按钮没有反应!!!
- 建议选择
UI
或者Nothing
文本 Text
比较重要的几个属性如图所示:
![image-20220505160136200](https://umeta.oss-cn-beijing.aliyuncs.com/blog/image-20220505160136200.png)
需要换行时Horizontal Overflow
设置为Wrap
其余建议按我这个值设置