UGUI入门

一.UI物体介绍

1.Text

文本组件

可以给此组件加入outline使得字体美观

2.Image

图像组件

本身作为图像载体，可以给他赋予图像属性

3.Button

按钮组件

自带一个点击事件，可以通过组件面板设置他的属性

4.InputField

输入框组件

Placeholder是提示文本      Text是输入文本

5.Canvas

UI画布，作为所有UI的基座，没有他无法显示UI，可以把他当作你的手机屏幕

6.Panel

UI画板，是一个大型的UI容器，常常作为一个窗体，提示窗体，装备面板，信息面板。。

都是这个，它的锚点随Canvas(屏幕)缩放

7.Scroll View

滚动面板

Scorll Rect是Scroll View的重要属性

      

Movement Type:滚动面板内容滚动是否有弹性

Horizontal：是否开启水平弹性滚动

Vertical：是否开启垂直弹性滚动

【Scroll View子物体】

Viewport 面板显示区域，本身是个遮罩

Content 是滚动列表的内容放置区

Scrollbar Horizontal 水平拉动区域

Scrollbar Vertical 垂直拉动区域

8.Toggle

 开关器

如果你要想制作多选框的话可以找个父类对象添加Toggle Group

然后再Toggle的属性中指定ToggleGroup

Allow Switch Off ：是否开启多选，不勾选的话就是单选 

二.UI布局介绍

UI布局可以让你快速配置一组类似体的设置

1.Grid Layout Group 

为自己的所有子物体设置格式布局

2.Horizontal Layout Group

为自己的所有子物体设置水平布局

3.Vertical Layout Group

为自己的所有子物体设置垂直布局

4.Layout Element

设置自己在布局配置中的宽和高

其他属性字面意思：设置此元素体的最大，固定，高，宽.....

Preferred Width ：将现在此物体的宽设置为其在布局中的宽值

Preferred Height ：将现在此物体的高设置为其在布局中的高值

常见案例是：要求布局元素随着布局容器所缩放

注意：

有时候我们使用layout布局用图片作为元素勾选Controller Child Size来做到布局元素随着布局父对象的缩放而缩放的时候，发现勾选Controller Child Size后图片元素尺寸改变了，这是因为你现在的缩放后的图片的尺寸不作为其在布局中的元素尺寸，他会选择图片原始尺寸作为元素尺寸，你可以通过Layout Element的Preferred Width/Preferred Height 将现在此图片缩放后的尺寸设置为其在布局中的尺寸值

5.Content size fitter

挂载了这个组件的物体，它会随着自己的内容，子对象的变化而变化，从而实现自身去适应内容。

常见案例是：图片背景随着内容文字的增大而增大

比如文字背景图片挂载了这个后，其子类物体文件越长他就会变化去适应文字的长度

Preferred Size：设置当前水平或者垂直尺寸适应

6.Outline

给文字添加外边框，使得文件更加美观