Unity3D学习笔记之uGUI(2):Basic Layout简述
Basic Layout基本布局主要是用来通过uGUI中的RectTransform来实现的,考虑到有些人对Unity3D uGUI中的Basic Layout还不了解,为此下面就给大家详细介绍下,一起来看看吧。
2、Basic Layout
下面看看UI元素与Canvas以及其他UI元素的相对位置是如何确定的。通过菜单Game Object> UI > Image创建Image来体会一下实际效果吧。
2.1 The Rect Tool
每一个UI元素在UI布局中其实都是一个矩形。Scene视图中可通过工具条的Rect Tool按钮(下图第五个按钮)来操作这个矩形。Rect Tool同样适用于操作2D和3D对象。
RectTool按钮可移动、缩放、旋转UI元素。选中某个UI元素后,点击矩形区域然后拖拽即可移动它;按住边界或四个角然后拖拽即可缩放;将鼠标停留在四个角的旁边一小会,会显示一个旋转标识,按住它然后拖拽即可旋转。
类似工具条的其他按钮,Rect Tool也提供Pivot和Local两种操作参照模式。
2.2 Rect Transform
RectTransform 是专用于UI元素的新Transform组件,以代替传统Transform组件。
RectTransform跟传统Transform组件一样包含了位置、旋转、缩放等属性,同时还包含了矩形的宽和高。
2.2.1 Resizing Versus Scaling
当使用Rect Tool缩放某个2D或3D的Object时,它会改变scale属性值来达到缩放效果。然而当缩放一个Rect Transform时,它会改变width和height属性值,同时保持scale属性值不变,此外字体大小、九宫(sliced)Sprite的边界(border)属性值也都不变。
2.2.2 Pivot
旋转、变换尺寸以及缩放都是围绕Pivot(中心参照点)进行的,也即Pivot的位置会影响旋转、变更尺寸以及缩放的最终效果。当使用ToolBar工具条操作且为Pivot模式时,Rect Transform的Pivot可在Scene视图中拖拽移动。
2.2.3 Anchors
RectTransform还包含了Anchors(锚点)属性。Anchors属性在Scene视图中以四个小三角形(分别对应四个角)示意,同时也可在Inspector视图中修改。
若父节点和子节点都是Rect Transform,则子节点锚点可设置为父节点中心点或某个角落。
当设置Anchors属性后,调整父节点宽高会同步拉伸子节点宽高。子节点四个角可分别设置对应父节点某几个点,以及相应偏移量。
Anchors的位置以父节点宽高的百分数定义。比如0.0(0%)表示左侧或底部,而0.5(50%)则表示中间,1.0(100%)则表示右侧或顶部。事实上Anchors可设为父节点任意位置(即取值范围为[0.0~1.0])。
Anchors还可以手动拖拽设置。可一次拖动一个,也可点击它们中间来一次拖动多个Anchor。若拖拽同时按住Shift键,矩形对应的角也会跟着走。
Anchors还会自动捕捉节点树上面的兄弟节点的Anchors,以便精确定位。
2.2.4 Anchor presets
在Inspector视图点击Rect Transform左上角按钮即弹出Anchor Presets(锚点预设面板),可快速设定常用Anchors方案。
若当前Anchor是Anchor Presets的某一个,则Anchor Presets面板显示的就是当前应用那个;相反若垂直方向或水平方向应用了不同于AnchorPresets的任意一个,则AnchorPresets面板显示为自定义(Custom)。
2.2.5 Anchor and position fields in theInspector
点击Inspector视图的Anchors向下三角形,可展开Anchors其他几个属性设置。Anchor Min对应Scene视图底部和左侧的小三角位置(百分比),而Anchor Max对应顶部和右侧的小三角位置(百分比)。
矩形的Position字段显示成哪样,这取决于Anchor是否在一起(产生一个固定的宽度和高度)或分开(这会导致矩形与父矩形一起拉伸)。
当Anchor小三角全部重叠(四个小三角位在同一位置),那么Position字段就显示为PosX、PosY、Width、Height,这里的PosX和PosY表明了Pivot的位置。
当Anchor小三角是分开的(四个小三角不在同一位置),那么就要单独设置Left、Right、Top和Bottom这四个小三角。这些字段定义了矩形内的Padding属性值。水平方向使用Left和Right,而垂直方向使用Top和Bottom。
注意,调整Anchor或Pivot的值,会反向作用于Position属性值,以使矩形停留在原地。如果不需要此特性,可开启Inspector面板的Raw Mode模式(大写字母R),即可单独设置Anchor和Pivot的同时不自动修改其他值。由于Anchor和Pivot决定了位置和大小,那么此操作看起来像是移动或缩放。