第7章 Unity3D界面设计UGUI

Unity3D UGUI Design

虚拟现实技术与开发

打造直观友好的用户交互界面

本章内容概览

UGUI基础

UGUI简介与优势
Canvas画布
渲染模式
屏幕自适应

核心组件

Panel面板
Text文本
Image图片
Button按钮

进阶内容

EventSystem事件系统
锚点与自适应
Button事件处理
其他控件简介

7.1 UGUI简介

UGUI：Unity 4.6推出的新UI系统，借鉴NGUI设计

UGUI优势

所见即所得 - 相对于旧版OnGUI的最大改进
Canvas画布布局 - 可视化编辑界面
RectTransform组件 - 帮助准确布局
锚点系统 - 屏幕自适应
层级遮挡 - 与Hierarchy次序关联
SpritePacker - 自动生成图集
全新事件机制 - 效率更高

学习重点：Pivot、Anchor、RectTransform、Canvas、EventSystem、各种界面组件

7.1 Canvas画布

Canvas：所有UI组件绘制的画布，脱离画布UI组件不可用

创建Canvas

方式1：菜单直接创建（自动创建EventSystem）
方式2：创建UI组件时自动创建

Canvas三种渲染模式

模式	说明	应用场景
Screen Space - Overlay	UI蒙在屏幕上	纯UI界面
Screen Space - Camera	UI蒙在摄像机上	UI与3D物体结合
World Space	UI在世界空间中	3D场景中的UI（如广告牌）

7.1.2 Canvas Scaler屏幕适配

Canvas Scaler：设置UI在设备屏幕上的适配方式

三种适配方式

方式	说明
Constant Pixel Size	固定像素尺寸
Scale With Screen Size	以宽度为标准缩放（最常用）
Constant Physical Size	固定物理尺寸

Scale With Screen Size参数

Reference Resolution - 参考分辨率（如1920×1080）
Screen Match Mode - 屏幕匹配模式
- Match Width Or Height - 匹配宽度或高度
- Expand - 扩展
- Shrink - 收缩

7.2 Panel面板

Panel：容器控件，用于分组管理UI组件

Panel特点

创建后默认充满整个画布
拖动四角或四边可调节大小
移动面板时，内部组件跟随移动
面板内可嵌套其他面板

Panel组件

Image(Script) - 设置面板图像
Color - 改变面板颜色
RectTransform - UI控件特有的矩形方位组件

RectTransform属性

Pos X/Y/Z - 在相应轴上的偏移量
Width/Height - 宽高
Anchor - 锚点

7.3 EventSystem事件处理系统

EventSystem：创建Canvas时自动创建，处理UI事件

EventSystem包含三个组件

组件	功能
Event System	事件系统组件（管理整个场景事件）
Standalone Input Module	独立输入模块（键盘鼠标）
Touch Input Module	触控输入模块（触摸屏）

重要：如果去掉Event System前的勾，整个场景事件系统不起作用，Button点击无反应

7.4 Text控件

Character（字符）属性

Font - 字体
Font Style - 字体样式（Normal/Bold/Italic）
Font Size - 字体大小
Line Spacing - 行间距
Rich Text - 富文本（支持<b><i><color>等标签）
Color - 字体颜色

Paragraph（段落）属性

Alignment - 对齐方式（水平/垂直）
Horizontal Overflow - 水平溢出（Wrap隐藏/Overflow溢出）
Vertical Overflow - 垂直溢出（Truncate截断/Overflow溢出）
Best Fit - 自动缩放适应文本框

7.5 Image控件

Image：显示图片的UI组件

图片格式转换

Project中选中图片
Inspector中Texture Type选择Sprite(2D and UI)
点击Apply应用

Image Type（图片类型）

类型	说明
Simple	简单显示
Sliced	切片（九宫格，边界不变）
Tiled	平铺（重复填补）
Filled	填充（配合Fill Amount做特效）

7.5.1 Image Filled填充类型

Fill Method（填充方法）

方法	说明
Horizontal	水平填充
Vertical	垂直填充
Radial 90	径向90度填充（左下角圆心）
Radial 180	径向180度填充（底边中点圆心）
Radial 360	径向360度填充（中心圆心）

应用场景：血条、进度条、技能冷却等效果

代码控制

            // 控制填充量（0-1）

            image.fillAmount = 0.5f;

7.6 Button控件

Button组成

Image(Script) - 按钮外观
Button(Script) - 按钮功能
Text子控件 - 按钮文字

Button(Script)属性

Interactable - 是否可交互
Transition - 过渡方式
- Color Tint - 颜色过渡
- Sprite Swap - 精灵交换
- Animation - 动画

颜色过渡参数

Normal Color - 正常颜色
Highlighted Color - 高亮色（鼠标经过）
Pressed Color - 按下颜色
Disabled Color - 禁用颜色

7.6.1 Button事件处理

OnClick()：按钮点击事件，使用委托机制

事件绑定步骤

创建脚本定义事件处理方法（必须是public）
场景中创建空对象，挂载脚本
选中Button，找到OnClick()
点击"+"添加事件
拖拽脚本对象到槽中
选择要调用的方法

            using UnityEngine.UI;

            public class ButtonEvent : MonoBehaviour {

                public void OnButtonClick() {

                    Debug.Log("按钮被点击！");

                }

            }

7.6.2 Button事件完整示例

修改UI文本示例

            using UnityEngine;

            using UnityEngine.UI;

            public class ButtonEvent : MonoBehaviour {

                public Text Txt_Info; // 公开变量，Inspector中赋值

                public void DisplayInfoText() {

                    Txt_Info.text = "按钮被点击！";

                }

            }

操作步骤

场景中创建Text控件
脚本中添加public Text变量
Inspector中将Text拖到变量槽
Button的OnClick绑定该方法

7.7 Anchor锚点与屏幕自适应

Anchor：控件在父对象上的定位参考点，实现屏幕自适应

锚点显示

选中UI控件，Canvas中心出现小雪花图案
可拖动锚点，实时显示距四边的百分比
可分散为四个独立锚点

锚点预设

RectTransform中点击按钮打开Anchor Presets：

左上角、右上角、中心、四边中点等
可设置锚定在父对象的四边或四角

自适应原理

屏幕大小改变时，控件四角与对应锚点的距离保持不变

7.8 其他UI控件简介

控件	功能
Toggle	开关控件（复选框）
Slider	滑动条（进度、音量）
Scrollbar	滚动条
Dropdown	下拉菜单
InputField	文本输入框
RawImage	纹理贴图（显示RenderTexture）
ScrollView	滚动视图

提示：多数控件是复合控件，可组合使用实现复杂界面

本章小结

重点掌握

Canvas三种渲染模式
Canvas Scaler屏幕适配
Text控件属性设置
Image四种类型
Button事件绑定

实践技能

创建UI界面
图片转Sprite
九宫格切片
填充动画效果
锚点设置与自适应

操作题：实现用户登录界面（年龄、性别、籍贯、兴趣调查）和音乐播放选单界面