UI 之 Basic Layout

这一章节我们将学习如何将UI元素恰当的放置在一个相对于Canvas和其他元素的位置。如果你想在阅读时自己测试一下,你可以通过菜单GameObject -> UI -> Image创建一个Image。


The Rect Tool

为了便于布局,每一个UI元素都被表示为一个矩形。这个矩形可以被视图工具栏中的 Rect Tool工具控制。Rect Tool是用来控制Unity 2D对象(Unity’s 2D features)和UI元素的,当然,事实上也可以控制3D对象。


Toolbar buttons with Rect Tool selected


我们可以使用Rect Tool来移动、缩放和旋转UI元素。当你选择了一个UI元素,通过点击它矩形内部的任意点并且拖拽,你可以任意的移动它。你也可以缩放它通过点击边框或者四角并且拖拽。将鼠标放置在离角落旁边直到鼠标看起来是一个旋转符号,这时你可以通过点击和拖拽来旋转UI。

就像其他工具一样,Rect Tool也可以使用当前中点模式(current pivot mode)和空间。操作UI时通常都会将其设置为PivotLocal。

Toolbar buttons set to Pivot and Local


Rect Transform

Rect Transform是一个新的变换(transform)组件,其目的是为了代替通常的Transform组件。

UI 之 Basic Layout_第1张图片

就像通常的Transforms一样,Rect Transforms有位置、缩放和旋转,但是他也同时有宽和高,用来指定矩形的大小。


Resizing Versus Scaling

当使用Rect Tool来改变对象的尺寸,通常如果改变的对象是2D系统的Sprites或3D对象时,它将改变对象的本地缩放(local scale)。然而,当它作用在一个有Rect Transform的对象上时,它将改变宽和高,本地缩放(localscale)反而不会改变。这种改变尺寸不会影响到字体大小,图像边框,以及其他。


Pivot

旋转、尺寸和缩放的改变是绕着中点发生的,所以中点会影响旋转、尺寸的调整以及缩放的结果。当工具栏Pivot按钮设置为Pivot模式,Rect Transform的中点可以在Scene View中移动。

UI 之 Basic Layout_第2张图片


Anchors

Rect Transforms中有一个布局的概念称之为anchors。Anchors在屏幕视图中以四个小三角形表示,同时anchor的信息也在Inspector中显示。

如果Rect Transform的父级也是一个Rect Transform, 则子级Rect Transform有许多重方式被锚定到(be anchored to)父级Rect Transform上。比如,子级可以被锚定到父级的中心或其中一个角。

UI 之 Basic Layout_第3张图片

上图,锚定到中心


UI 之 Basic Layout_第4张图片

上图,锚定到角


锚定也可以使子级随着父级同时拉伸宽和高。矩形的每一个角与它相对应的锚点都有一个修正的位移,例如,矩形的左上角与左上锚点有一个修正的位移。这样,矩形的角就可以锚定到父级矩形中不同的点。

UI 之 Basic Layout_第5张图片


锚点的位置是由父级矩形的宽和高的百分比来定义的。0(0%)表示左边或底边,0.5(50%)表示中间,1表示右边或顶边。但是锚点并不是限制在四边或中间,而是可以是父级矩形内的任意一点。

UI 之 Basic Layout_第6张图片


你可以单独的拖拽任意一个锚点,或者如果他们在一起,你可以通过点击他们中间来一起拖拽他们。如果你拖拽时按下Shift键,那么其对应的矩形的角也会随着锚点一起移动。


Anchor presets

在Inspector中,我们可以在Rect Transform组件的左上角找到 Anchor Preset按钮。点击按钮会出现Anchor Presets下拉菜单。在这里你可以快速的选择最常用的一些锚定选项。你可以将UI元素锚定到父级的四边或中间,或者使其随着父级的尺寸而拉伸。水平方向和垂直方向的锚定是相互独立的。


Anchor Presets按钮将显示当前选择的预设。如果水平方向或垂直方向的锚点与预设中的任何一个都不一样,则显示出自定义选项。



Anchor and position fields in the Inspector

Anchor Min表示场景视图中左下的锚点, Anchor Max表示右上。矩形的position字段会有不同的显示,这取决于锚点是在一起的还是分开的

UI 之 Basic Layout_第7张图片


当所有锚点都在一起时字段显示为Pos X, Pos Y, Width and Height。 Pos X 和Pos Y表示中点相对于锚点的位置。

当锚点十分开时,字段可能是以下字段的部分或全部:Left, Right, Top and Bottom。这些字段表示由锚点组成的矩形的内边距。如果锚点是水平分开则使用Left和Right字段,如果垂直分开则使用Top和Bottom字段。


你可能感兴趣的:(UI 之 Basic Layout)