UGUI组件详解

14 篇文章 0 订阅

什么是 UGUI

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


UGUI 控件有哪些?

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


怎样新建 UI 控件

在Hierarchy中添加 
在 Hierarchy 中右键添加


在Component中添加 
在菜单栏的 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(指可滚动的位置数目):为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:换行方式(当输入内容超出输入域边界时)

  1. single Line(单一行):超出边界不换行,输入域的内容只有一行
  2. multi Line Submit(多行):超出边界则换行,输入域的内容有多行;
  3. 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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值