怎样使用UGUI

什么是 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：不裁减

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：进度的块数

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：最初显示文本

Caret Blink Rate：光标闪动速率

Caret Width：光标宽度

Custom Caret Color：光标颜色

Selection Color：被选中部分颜色

Hide Mobile Input：是否隐藏手机输入

Read Only：是否只读

简单的控件组合

其中包含了常用的基本控件组合。

例子下载