一、UGUI的核心元素:
Anchor(锚点):
每个控件都有一个Anchor属性,控件的4个顶点,分别与Anchor的4个点保持不变的距离,不受屏幕分辨率变化的影响。
系统默认设置控件的Anchor位置在其父物体的中心处,且不能离开父物体的范围。
将Anchor设置在父物体的左侧,可以实现左对齐的效果。
将Anchor设置在父物体的4个顶点上,子物体将随父物体同步缩放。
Pivot(轴):
控件的中心点(或称为轴),控件围绕Pivot发生旋转(若想控件围绕某个顶点旋转,改变Pivot位置即可)
注意区别:
对象的Transform 的position为世界坐标。
对象的 Transform的 localPosition为当前对象轴心点与父UI对象轴心点的相对位置
对象的RectTransform继承自 Transform,编辑器中显示的PosX、PosY、PosZ指的是Pivot与Anchor间的相对位置,叫做anchoredPosition3D
RectTransform 矩形变换
class in UnityEngine/Inherits from: Transform
Variables 变量
| anchoredPosition | The position of the pivot of this RectTransform relative to the anchor reference point. 该矩形变换相对于锚点参考点的中心点位置。 |
| anchoredPosition3D | The 3D position of the pivot of this RectTransform relative to the anchor reference point. 该矩阵变换相对于锚点参考点的中心点的3D位置。 |
| anchorMax | The normalized position in the parent RectTransform that the upper right corner is anchored to. 该锚点在父矩阵变换中归一化位置,右上角是锚点。 |
| anchorMin | The normalized position in the parent RectTransform that the lower left corner is anchored to. 在父矩阵变换上归一化位置,该锚点在左下角。 |
| offsetMax | The offset of the upper right corner of the rectangle relative to the upper right anchor. 矩形右上角相对于右上角锚点的偏移量。 |
| offsetMin | The offset of the lower left corner of the rectangle relative to the lower left anchor. 矩形左下角相对于左下角锚点的偏移量。 |
| pivot | The normalized position in this RectTransform that it rotates around. 在该矩阵变换的归一化位置,围绕该中心点旋转。 |
| rect | The calculated rectangle in the local space of the Transform. 计算矩形自身空间的变换。 |
| sizeDelta | The size of this RectTransform relative to the distances between the anchors. 矩阵变换的大小相对于锚点之间的距离。 |
Public Functions 公共函数
| GetLocalCorners | Get the corners of the calculated rectangle in the local space of its Transform. 在该变换的本地空间中获取计算的矩形的折角的本地坐标。 |
| GetWorldCorners | Get the corners of the calculated rectangle in world space. 获取世界空间中矩形计算的折角。 |
| SetInsetAndSizeFromParentEdge | Set the distance of this rectangle relative to a specified edge of the parent rectangle, while also setting its size. 设置父矩形的指定边缘的相对于该矩形的距离,当然也设置它的大小。 |
| SetSizeWithCurrentAnchors | Makes the RectTransform calculated rect be a given size on the specified axis. 使矩形变换计算矩形在指定坐标轴上是给定大小。 |
Delegates 委托
| ReapplyDrivenProperties | Delegate used for the reapplyDrivenProperties event. 委托用于reapplyDrivenProperties事件。 |
RectTransformUtility 矩阵变换工具
class in UnityEngine
Description 描述
Utility class containing helper methods for working with RectTransform.
矩阵变换工作的工具类包含帮助方法。
Static Functions 静态函数
| FlipLayoutAxes | Flips the horizontal and vertical axes of the RectTransform size and alignment, and optionally its children as well. 翻转水平轴和垂直轴的 RectTransform 大小和对齐方式,并且选择性的子物体也一样。 |
| FlipLayoutOnAxis | Flips the alignment of the RectTransform along the horizontal or vertical axis, and optionally its children as well. 沿着水平或者垂直轴翻转对齐的矩形变换,并且它的子物体也是可选择的。 |
| PixelAdjustPoint | Convert a given point in screen space into a pixel correct point. 将屏幕空间中给定的点转换成正确像素点。 |
| PixelAdjustRect | Given a rect transform, return the corner points in pixel accurate coordinates. 指定矩形变换,返回角点的精确坐标单位像素。 |
| RectangleContainsScreenPoint | Does the RectTransform contain the screen point as seen from the given camera? 从指定摄像机中观看该矩形变换是否包含屏幕点? |
| ScreenPointToLocalPointInRectangle | Transform a screen space point to a position in the local space of a RectTransform that is on the plane of its rectangle. 屏幕空间点转换为矩形变换内部的本地位置,该点在它的矩形平面上。 |
| ScreenPointToWorldPointInRectangle | Transform a screen space point to a position in world space that is on the plane of the given RectTransform. 屏幕空间点转换为世界空间点,该点在矩形变换的平面上。 |
二、UGUI的基本控件:
Canvas(画布):所有UI控件必须在Canvas上面绘制,也可以看做所有UI控件的父物体。
Panel(面板):主要的功能就是一个容器,可以放置其他控件,使其进行整体移动、旋转、缩放等。一个功能完备的UI界面,往往会使用多个Panel容器,甚至使用Panel嵌套。
Text(文本):富文本功能类似HTML中的标签。
Image(图像):图像源为2D Sprite格式。等比例调节图像大小,需要按住Shift键进行调节。Image Type的Sliced选项,需要对Sprite进行“九宫格”处理。
Raw Image(原始图像):图像源为Texture格式。
最后补充一个基本组件:
Mask(遮罩):遮罩并不是GUI的控件。它以父物体的范围约束子物体的显示,如果子物体过大,将只显示在父物体中的一部分。
三、UGUI的复合控件:
Button(按钮):由两个控件组成:1.添加了Button组件的Image控件,2.Text控件。Image控件是Text控件的父对象。
鉴于UGUI的高度自由,也可以理解为添加了Button组件、Image组件的空对象和添加了Text组件的空对象。
通过Transition对按钮的三态进行设置。
InputField(输入框):由三个控件组成:1.添加了Input Field组件的Image控件,2.Text控件(用作显示提示内容),3.Text控件(接收输入内容)。Image控件是两个Text控件的父对象。
Content Type对输入的字符类型进行预处理功能。
Toggle(开关):即可以做单选框又可以做复选框,系统默认为复选框。
由四个控件组成:1.添加了Toggle组件的空对象,2.Image控件(显示状态框的背景图),3.Image控件(显示当前状态),4.Text控件(用作显示选项内容)。
如何制作单选框:创建一个空对象,添加Toggle Group组件。在空对象下创建若干个Toggle控件,设置Group,并保持其中一个Toggle控件的Is On开关为true,其余为false。
Slider(滑动条):由6个控件组成:1.添加了Slider组件的空对象,2.Image控件(显示背景图像),3.空对象(控制填充区域),4.Image控件(显示填充图像),5.空对象(控制滑块移动区域),6.Image控件(显示滑块)
滑动条通过滑块驱动,在minValue和maxValue区间运动,根据当前的Value值,不断改变背景图像和填充图像的显示范围。
滑动条既可以用作音量控制等输入控件,去掉滑块后,也可以用作血量、进度等显示控件。
ScrollBar(滚动条):由3个控件组成:1.添加了Scrollbar组件的Image对象,2.空对象(控制滑块移动区域),3.Image控件(显示滑块)
滚动条与滑动条的原理类似,对比而言,滚动条背景色单一,数值范围固定为0到1,偏重于单步数值的设置
滚动条既可以用作垂直滚动文本(背包),也可以用作水平滚动时间轴,还可以垂直+水平进行图像的缩放。
四、UGUI的高级控件:
高级控件并不是UGUI直接提供的控件,需要自行组合,组合原理可以通过拆解复合控件学习。
Scroll Rect(滚动区域):在一个较小的区域显示较多的内部控件的时候使用的一种机制
Scroll Rect(空对象,设置一定的区域范围,作为当前显示的窗口,添加组件:Scroll Rect、Image、Mask)
Content(空对象,长度或宽度要大于Scroll Rect)
Scroll View若干个(根据需要,Image、Button控件随意添加)
ScrollBar(滚动条控件)
在Scroll Rect组件中设置Content项和Scrollbar项即可
TabPage(选项卡):能够在有限的空间中,放入更多的展示内容
TabPage(空对象)
ToggleGroup(空对象,添加Toggle Group组件)
Toggle若干个(根据需要,将Toggle设置为单选框)
DisplayContent(Image,作为背景图。Toggle Group和DisplayContent可以根据需要进行垂直或水平布局)
Page若干个(根据需要,数量需要与Toggle对应)
在Toggle的On Value Changed(Boolean)中设置对应Page的SetActive
总结:UGUI的功能很强大,DIY度相当高,虽然缺少了一部分功能,比如下拉框,树视图,列表视图等,但是通过组件的搭配使用,完全可以自己做出来
附录上个人这两天的学习笔记,思维导图确实是个好东西,学习ING~~~~