怎样使用UGUI

什么是 UGUI

UGUI 是 Unity 自带的一套 GUI 系统,含有基本的一些 UI 控件。


UGUI 控件有哪些?

我们常用的有 Canvas,Text,Image,Button,Toggle,Slider,Scroll Bar,Scroll View,Input Field。


怎样新建 UI 控件

怎样使用UGUI_第1张图片
在 Hierarchy 中右键添加


怎样使用UGUI_第2张图片
在菜单栏的 Component 中添加



Canvas

Canvas 是所有 UI 控件的根节点,即所有 UI 控件均需要在 Canvas 下。

怎样使用UGUI_第3张图片
上图所示即一个 Canvas 包含了多个 UI 控件。


Text

用来显示文本的。

怎样使用UGUI_第4张图片

  • 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:普通类型

      怎样使用UGUI_第5张图片

      怎样使用UGUI_第6张图片

      • Preserve Aspect:是否保持图片的外形比例
      • Set Native Size:设置为图片的原大小
    • Sliced:九宫格

      怎样使用UGUI_第7张图片

      怎样使用UGUI_第8张图片

      • Fill Center:是否填充中间部分
    • Tiled:平铺

      怎样使用UGUI_第9张图片

      怎样使用UGUI_第10张图片

      • Fill Center:是否填充中间部分
    • Filled:填充

      怎样使用UGUI_第11张图片

      怎样使用UGUI_第12张图片

      • Fill Method:

        • Horizontal:横向填充
        • Vertical:纵向填充
        • Radial 360:360 度填充
        • Radial 180:180 度填充
        • Radial 90:90 度填充
      • Fill Origin:填充起点

      • Fill Amount:填充量
      • Clockwise:是否按时钟方向
      • Preserve Aspect:是否保持图片的外形比例
      • Set Native Size:设置为图片的原大小

Button

游戏中使用的按钮。

这里写图片描述

怎样使用UGUI_第13张图片
上图展示了按钮一般由图片和文字组成

怎样使用UGUI_第14张图片

  • Interactable:按钮当前是否激活可用

  • Transition:过渡方式

    • Color Tint:颜色过渡.

      怎样使用UGUI_第15张图片

      • 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:动画过渡

      怎样使用UGUI_第16张图片

      • Normal Trigger:正常时的动画触发
      • Highlighted Trigger:悬浮高亮时的动画触发
      • Pressed Trigger:点击按下时的动画触发
      • Disabled Trigger:禁止不可用时的动画触发
      • Auto Generate Animation:自动生成动画
  • Navigation:导航方式

    • None:无
    • Horizontal:横向
    • Vertical:纵向
    • Automatic:自动
    • Explicit:自定义
  • Visualize:导航线是否可见


Toggle

开关,适用于单选或者复选或者控制其他控件的显示或隐藏。

怎样使用UGUI_第17张图片
上图显示一个 Toggle 一般由底图,文本和一个是否选中的图片组成。

怎样使用UGUI_第18张图片

大部分类似于 Button。

  • Is on:是否默认处于打开状态
  • Toggle Transtion:开关过渡方式

    • Fade:渐变过渡
    • None:无
  • Graphic:开关控制的对象

  • Group:所属于的 Toggle Group。(所属同一个 Toggle Group 的可以存在互斥状态)

Slider

滑杆。

怎样使用UGUI_第19张图片
上图所示一个滑杆由背景,滑杆进度,滑块三部分组成。


怎样使用UGUI_第20张图片

大部分类似于 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

滚动条。

这里写图片描述
上图所示滚动条由背景和滑块组成。

怎样使用UGUI_第21张图片

大部分类似于 Slider。

  • Size:滑块的比例大小

  • Number of Steps:进度的块数


Scroll View

滚动区域。

这里写图片描述
上图所示滚动区域由背景,遮罩和显示内容组成。


怎样使用UGUI_第22张图片

  • Content:显示的内容框

  • Horizontal:是否可以横向滚动

  • Vertical:是否可以纵向滚动

  • Movement Type:

    • Unrestricted:无限制的滚动,无回滚
    • Elastic:有限制的滚动,有回滚
    • Elasticity:回滚系数,数值越大弹性越小
    • Clamped:有限制的回滚,无回滚
  • Inertia:惯性

    • Deceleration Rate:减速率
  • Scroll Sensitivity:滚动灵敏度

  • Viewport:可视区域

  • Horizontal Scrollbar:横向滚动控制条

  • Vertical Scrollbar:纵向滚动控制条


Input Field

输入框。

这里写图片描述
上图所示输入框由背景,默认文本和输入文本组成。

怎样使用UGUI_第23张图片

大部分类似于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:是否只读


简单的控件组合

怎样使用UGUI_第24张图片

怎样使用UGUI_第25张图片
其中包含了常用的基本控件组合。


例子下载

你可能感兴趣的:(UGUI,Unity)