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：是否只读

---

简单的控件组合

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