Unity3D学习笔记之uGUI(2):Basic Layout简述

发表于2017-02-22
评论1 3.9k浏览

  Basic Layout基本布局主要是用来通过uGUI中的RectTransform来实现的,考虑到有些人对Unity3D uGUI中的Basic Layout还不了解,为此下面就给大家详细介绍下,一起来看看吧。

2Basic Layout

         下面看看UI元素与Canvas以及其他UI元素的相对位置是如何确定的。通过菜单Game Object> UI > Image创建Image来体会一下实际效果吧。

 

2.1 The Rect Tool

         每一个UI元素在UI布局中其实都是一个矩形。Scene视图中可通过工具条的Rect Tool按钮(下图第五个按钮)来操作这个矩形。Rect Tool同样适用于操作2D3D对象。

        

         RectTool按钮可移动、缩放、旋转UI元素。选中某个UI元素后,点击矩形区域然后拖拽即可移动它;按住边界或四个角然后拖拽即可缩放;将鼠标停留在四个角的旁边一小会,会显示一个旋转标识,按住它然后拖拽即可旋转。

         类似工具条的其他按钮,Rect Tool也提供PivotLocal两种操作参照模式。

        

 

2.2 Rect Transform

         RectTransform 是专用于UI元素的新Transform组件,以代替传统Transform组件。

         

         RectTransform跟传统Transform组件一样包含了位置、旋转、缩放等属性,同时还包含了矩形的宽和高。

 

2.2.1 Resizing Versus Scaling

         当使用Rect Tool缩放某个2D3DObject时,它会改变scale属性值来达到缩放效果。然而当缩放一个Rect Transform时,它会改变widthheight属性值,同时保持scale属性值不变,此外字体大小、九宫(slicedSprite的边界(border)属性值也都不变。

 

2.2.2 Pivot

         旋转、变换尺寸以及缩放都是围绕Pivot(中心参照点)进行的,也即Pivot的位置会影响旋转、变更尺寸以及缩放的最终效果。当使用ToolBar工具条操作且为Pivot模式时,Rect TransformPivot可在Scene视图中拖拽移动。

        

 

2.2.3 Anchors

         RectTransform还包含了Anchors(锚点)属性。Anchors属性在Scene视图中以四个小三角形(分别对应四个角)示意,同时也可在Inspector视图中修改。

         若父节点和子节点都是Rect Transform,则子节点锚点可设置为父节点中心点或某个角落。

        

        

         当设置Anchors属性后,调整父节点宽高会同步拉伸子节点宽高。子节点四个角可分别设置对应父节点某几个点,以及相应偏移量。

        

         Anchors的位置以父节点宽高的百分数定义。比如0.00%)表示左侧或底部,而0.550%)则表示中间,1.0100%)则表示右侧或顶部。事实上Anchors可设为父节点任意位置(即取值范围为[0.0~1.0])。

        

         Anchors还可以手动拖拽设置。可一次拖动一个,也可点击它们中间来一次拖动多个Anchor。若拖拽同时按住Shift键,矩形对应的角也会跟着走。

         Anchors还会自动捕捉节点树上面的兄弟节点的Anchors,以便精确定位。

 

2.2.4 Anchor presets

         Inspector视图点击Rect Transform左上角按钮即弹出Anchor Presets(锚点预设面板),可快速设定常用Anchors方案。

        

         若当前AnchorAnchor 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字段就显示为PosXPosYWidthHeight,这里的PosXPosY表明了Pivot的位置。

         Anchor小三角是分开的(四个小三角不在同一位置),那么就要单独设置LeftRightTopBottom这四个小三角。这些字段定义了矩形内的Padding属性值。水平方向使用LeftRight,而垂直方向使用TopBottom

         注意,调整AnchorPivot的值,会反向作用于Position属性值,以使矩形停留在原地。如果不需要此特性,可开启Inspector面板的Raw Mode模式(大写字母R),即可单独设置AnchorPivot的同时不自动修改其他值。由于AnchorPivot决定了位置和大小,那么此操作看起来像是移动或缩放。

点击访问官方英文文档

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引