UGUI的核心元素:
Anchor(锚点):每个控件都有一个Anchor属性,控件的4个顶点,分别与Anchor的4个点保持不变的距离,不受屏幕分辨率变化的影响。
系统默认设置控件的Anchor位置在其父物体的中心处,且不能离开父物体的范围。
将Anchor设置在父物体的左侧,可以实现左对齐的效果。
将Anchor设置在父物体的4个顶点上,子物体将随父物体同步缩放。
Pivot(轴):控件的中心点(或称为轴),控件围绕Pivot发生旋转(若想控件围绕某个顶点旋转,改变Pivot位置即可)
Rec Transform中的PosX、PosY、PosZ指的是Pivot与Anchor间的相对位置
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~~~~