什么是 UGUI
UGUI 是 Unity 自带的一套 GUI 系统，含有基本的一些 UI 控件。
UGUI 控件有哪些？
我们常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。
怎样新建 UI 控件
在 Hierarchy 中右键添加
在菜单栏的 Component 中添加
Canvas
Canvas 是所有 UI 控件的根节点，即所有 UI 控件均需要在 Canvas 下。
上图所示即一个 Canvas 包含了多个 UI 控件。
Text
用来显示文本的。
Text：即显示的文本内容。
Font：文字的字体。
Font Style：字体的形式，有正常，加粗，斜体，加粗斜体几种可选。
Font Size：字体的大小。
Line Spacing：行间距。
Rich Text：是否支持富文本。
Alignment：对齐方式。
Align By Geometry：几何对齐
-
Horizontal Overflow：横向裁剪方式。
- Wrap：裁剪
- Overflow：不裁剪
-
Vertical Overflow：竖向裁剪方式。
- Truecate：裁剪
- Overflow：不裁减
- Truecate：裁剪
Best Fit：是否最佳适应当前大小。
Color：字体的颜色。
Material：字体的材质。
Raycast Target：是否可被点击到。
Image
用来显示图片的。
Source Image：显示的源图片。
Color：给图片叠加的颜色。
Material：图片的材质。
Raycast Target：是否可被点击到。
-
Image Type：图片的类型。
-
Simple：普通类型
- Preserve Aspect：是否保持图片的外形比例
- Set Native Size：设置为图片的原大小
-
Sliced：九宫格
- Fill Center：是否填充中间部分
-
Tiled：平铺
- Fill Center：是否填充中间部分
-
Filled：填充
-
Fill Method：
- Horizontal：横向填充
- Vertical：纵向填充
- Radial 360：360 度填充
- Radial 180：180 度填充
- Radial 90：90 度填充
Fill Origin：填充起点
- Fill Amount：填充量
- Clockwise：是否按时钟方向
- Preserve Aspect：是否保持图片的外形比例
- Set Native Size：设置为图片的原大小
-
-
Button
游戏中使用的按钮。
上图展示了按钮一般由图片和文字组成
Interactable：按钮当前是否**可用
-
Transition：过渡方式
-
Color Tint：颜色过渡.
- Target Graphic：控制颜色的对象
- Normal Color：正常时的颜色
- Highlighted Color：悬浮高亮时的颜色
- Pressed Color：点击按下时的颜色
- Disabled Color：禁止不可用时的颜色
- Color Mutiplier：颜色乘数
- Fade Duration：渐变过渡时间
-
Sprite Swap：图片过渡
- Target Graphic：控制变化图片的对象
- Highlighted Sprite：悬浮高亮时的图片
- Pressed Sprite：点击按下时的图片
- Disabled Sprite：禁止不可用时的图片
-
Animation：动画过渡
- Normal Trigger：正常时的动画触发
- Highlighted Trigger：悬浮高亮时的动画触发
- Pressed Trigger：点击按下时的动画触发
- Disabled Trigger：禁止不可用时的动画触发
- Auto Generate Animation：自动生成动画
-
-
Navigation：导航方式
- None：无
- Horizontal：横向
- Vertical：纵向
- Automatic：自动
- Explicit：自定义
Visualize：导航线是否可见
Toggle
开关，适用于单选或者复选或者控制其他控件的显示或隐藏。
上图显示一个 Toggle 一般由底图，文本和一个是否选中的图片组成。
大部分类似于 Button。
- Is on：是否默认处于打开状态
-
Toggle Transtion：开关过渡方式
- Fade：渐变过渡
- None：无
Graphic：开关控制的对象
- Group：所属于的 Toggle Group。（所属同一个 Toggle Group 的可以存在互斥状态）
Slider
滑杆。
上图所示一个滑杆由背景，滑杆进度，滑块三部分组成。
大部分类似于 Button。
Fill Rect：填充的对象
Handle Rect：滑杆对象
-
Direction：滑动的方向
- Left to Right：由左往右
- Right to Left：由右往左
- Bottom to Up：由下往上
- Up to Bottom：由上往下
Min Value：最小值
Max Value：最大值
Whole Numbers：是否只允许整数进度值
Value：当前值
Scroll Bar
滚动条。
上图所示滚动条由背景和滑块组成。
大部分类似于 Slider。
Size：滑块的比例大小
Number of Steps（指可滚动的位置数目）：为0和1时不生效，如果设置成2，则滚动条滚动时只会处在最大值和最小值的位置，因为它的可滚动数目为两个。
Scroll View
滚动区域。
上图所示滚动区域由背景，遮罩和显示内容组成。
Content：显示的内容框
Horizontal：是否可以横向滚动
Vertical：是否可以纵向滚动
-
Movement Type：
- Unrestricted：无限制的滚动，无回滚
- Elastic：有限制的滚动，有回滚
- Elasticity：回滚系数，数值越大弹性越小
- Clamped：有限制的回滚，无回滚
-
Inertia：惯性
- Deceleration Rate：减速率
Scroll Sensitivity：滚动灵敏度
Viewport：可视区域
Horizontal Scrollbar：横向滚动控制条
Vertical Scrollbar：纵向滚动控制条
Input Field
输入框。
上图所示输入框由背景，默认文本和输入文本组成。
大部分类似于Button。
Text Component：输入文本组件
Text：文本内容
Character Limit：限制字符长度 (0 表示不限制)
-
Content Type：验证输入类型
- Standard：标准
- Autocorrented：自动修正
- Integer Number：整数
- Decimal Number：可带小数
- Alphanumeric：数字和字母混合
- Name：字母
- Email Address：邮箱
- Password：密码
- Pin：数字密码
- Custom：自定义
Placeholder：最初显示文本
Line Type:换行方式（当输入内容超出输入域边界时）
- single Line(单一行)：超出边界不换行，输入域的内容只有一行
- multi Line Submit(多行)：超出边界则换行，输入域的内容有多行；
- multi Line Newline(多行):超出边界则新建换行，输入域内容有多行；
Caret Blink Rate：光标闪动速率
Caret Width：光标宽度
Custom Caret Color：光标颜色
Selection Color：被选中部分颜色
Hide Mobile Input：是否隐藏手机输入
Read Only：是否只读
Dropdowm
大部分类似于Button。
- Caption Text:首选项文字显示
- Caption Image:首选项图片显示
- Item Text：下拉列表中单个Item文字的显示
- Item Image:下拉列表中单个图片的显示
- Value值会随着下拉列表选项中的不同而变化，默认为0，就是选择的时下拉列表中的第一个
- Options里面的第一个框是下拉列表中的文字，第二个是图片。
简单的控件组合
其中包含了常用的基本控件组合。
本文参考自：https://blog.csdn.net/fannyandfly/article/details/51323937