Unity3D4.6UGUI开发设计及案例讲解.doc

Unity4、6 UGUI开发设计及案例讲解
1． Unity4、6跟以前得版本得最大区别首先在于在层级视图中点鼠标右键时出现得弹出菜单上,它把以前许多得菜单项进行了归类,比如cube sphere capsule…、等整合到“3D Object”子菜单中,而且多出一个UI子菜单,它就就是UI组件了。
当我们点击UI>Canvas时,就会在场景视图里创建一个画布,不过视图默认就是3D显示方式,在Unity4、3以后,增加了一个2D与3D转换按钮,单击此按钮可在3D与2D显示样式之间转换。
UI就是2D,为何还要3D呢,在做一些比较复杂得项目时,给用户瞧时就是2D,但我们编辑时,有时还就是要用到3D模式得。
2． Canvas就是画布,所有得UI组件就就是绘制在这个画布里得,脱离画布,UI组件就不能用。
创建画布有两方式。一就是通过菜单直接创建,二就是直接创建一个UI组件时,会在创建这个组件得同时自动创建一个容纳该组件得画布出来。
不管那种方式创建出画布时,系统都会自动创建出一个EventSystem组件,这就是UI得事件系统。
一.Canvas组件
1 Canvas组件得三种渲染模式
在Canvas中有一Render Mode属性,它有3个选项,分别对应Canvas得三种渲染模式:Screen Space – Overlay、Screen Space – Camera、World Space
2 Screen Space – Overlay:

此模式不需要UI摄像机,UI将永远出现在所有摄像机得最前面(即在某个UI得前面就是不能再添加其她组件得),就好像就是给摄像机贴上了一层膜。它得最大好处就是不需要摄像机,不需要灯光。
3 Screen Space – Camera:

此模式需要提供一个UICamera,它支持在UI前方显示3D模型与粒子系统等内容。
不过此模式下,就需在中给它挂一个摄像机。
当挂上摄像机并选择3D显示模式时,我们选中这个摄像机,并移动它,可发现画布会跟随摄像机得移动而移动,且Game视图显示得UI其位置与大小均保持不变,如下图所示:

这种模式,虽然UI得显示效果与第一种模式没有什么两样,然而,因在画布与摄像机之间可放置三维物体或粒子系统,那么就可做出许多绚丽得特效。
这一项就是设置Canvas与摄像机之间得距离,其值越大,可在画布与摄像机之间放很多得三维物体,默认就是100,建议设置为100与200之间即可。
4 World Space:

这个就就是完全3D得UI,也就就是把UI也当成3D对象,如摄像机离UI远了,其显示就会变小,近了就会变大。
5 其它一些属性:
当有多个画布时,决定谁在前,谁先显示。
二.Canvas Scaler画布得大小

Ui Scale Mode(大小模式)
当我们把Canvas中得Render Mode设为Screen Space – Overlay 或Screen Space – Camera时,此Canvas Scale中得Ui Scale Mode(大小模式)就可用,且其中有3个选项:
1 Constan Pixel Size:固定像素尺寸

2 Scale With Screen Size:以宽度为标准缩放(屏幕自适应特性)

2.1 Reference Resolution:参考分辨率
在不同分辨率下,控件显示得大小有所不同,这要根据实际情况综合考虑。
2.2 Screen Match Mode:屏幕匹配模式
Match Width Or Heigt:匹配宽度或高度
此模式下会出现Match调节滑杆,调节其控块位置,也会影响UI元素显示得大小。
Expand:扩展
Shrink:收缩
3 Constant Physical Size:固定物理尺寸

三.Panel 面板
当我们初次创建Panel后,它会充满整个画布,如下左图:

此时通过拖动该面板控件得4个角点或四条边可调节面板得大小,如上右图
面板实际上就就是一个容器,在其上可放置其她UI控件,当移动面板时,放在其中得UI组件就会跟随移动,这样我们可以更加合理与方便得移动与处理一组控件。也就就是通过面板,我们可以把控件分组。一个功能完备得UI界面,往往会使用多个Panel容器控件。而且一个面板里还可套用其她面板。
当我们创建一个面板后,此面板会默认包含一个Image(Script)组件:

该组件中得Source Image就是设置面板得图像。
Color,可改变面板得颜色。
四.EventSystem事件处理系统
当我们创建一个画布时,Unity系统会自动为我们创建一个EventSystem,

该事件处理器中有3个组件:
1． Event System:事件系统组件(事件)
2． Standalone Input Module:独立输入模块 (输入)
3． Touch Input Module:触控输入模块 (触控)
如果我们将Event System (Script) 前得勾去掉,则管理整个场景得事件系统则不起作用了,此时运行程序,如果有Button,单击它时就不会有反应了。
五.Text控件
在UGUI中,我们所创建得所有UI控件,它们都有一个UI控件特有得Rect Transform组件:

我们所创建得三维物体,就是Transform,而UI控件就是Rect Transform,它就是UI控件得矩形方位,其中得指得就是UI控件在相应轴上得偏移量。
UI控件除了上面Rect Transform控件外,每个UI控件都还一个组件,它就是画布渲染,一般不用管它,因它不能点开得。
Text控件得相关属性:
Character:(字符)
Font:字体
Font Style:字体样式
Font Size:字体大小
Line Spacing:行间距(多行)
Rich Text:“富”文本。例如:U<b>G</b>U</i>I<volor=”yellow”>学</color>习
Color:字体颜色
Paragraph:(段落)
:设置文本在Text框中得水平以及垂直方向上得对齐方式。
:水平方向上溢出时得处理方式。它有两种:Wrap隐藏;Overflow溢出。
:垂直方向上溢出时得处理方式。它有两种:Truncate截断;Overflow溢出。
隐藏了或截断了,信息显示不全当然不好,但如果溢出又会破坏版面,想两全齐美得话,就可选中:,如果文字多时,它会自动缩小以适应文本框得大小,当选中该项后,在其下边会出现Min Size与Max Size两输入框,可设置字体变化时得最小与最大值。
六.Image控件
Image控件除了两个公共得组件Rect Transform与Canvas Renderer外,默认得情况下就只有一个Image(Script)组件:

Source Image就是要显示得源图像,但如果我们把一个普通得图像往里拖放时,却不能成功放入,认真研究一下不难发现,放图像得框中,除了None表示还没有图像外,还有一个括号注释得Sprite,它得意思就是精灵,可理解为它就是贴图得一种特殊形式,它不具备其她功能,只给UI做显示图片用,故我们给它取了一个特殊得名字:精灵Sprite,所以在Unity4、6中,要想把一个图片赋给Image,则需要把该图片转换成精灵格式,转换方法为,在Project中选中要转换在图片,然后在Inspector检视图中,单击Texture Type(纹理类型)右边得下拉框,在弹出得菜单中,第三项Editor GUI and Legacy GUI就是Unity4、6以前版本所用得,选中它时,图片不会被拉伸,现在几乎不用,就是为了兼容,而第四项Sprite(2D and UI),就就是4、6版本所用得,它虽然比前一项适用得范围更窄,但其效率更高。我们选中该选项Sprite(2D and UI)并点击下方得Apply(应用)按钮就可把此图片转换成精灵格式,随后就可拖放到Image得Source Imag中了,如下图所示:

另:当我们把一个普通得图片转换成精灵格式后,在Project中,将发现该图片将包含一个子对象如图:,以后可以把一个图片划分为多个图片。
当我们把精灵图片赋给了Image后,其组件样式如下图:

Color:可改变图片得颜色;
Material:材质,这就是针对一些复杂得贴图使用。
Image Type:贴图得类型,这就是最重要得属性。

1） Simple:简单

Preserve Aspect:翻译过来就是:维持外貌,选中该项后,该精灵图片得长宽比将保持原状,当调节图片得大小时,它将在保持原长宽比得前提下尽量铺展到图片框中,即不会拉伸或压缩以适应图片框而铺满。
Set Native Size:本来得大小。如果调整后大小变乱了,单击此按钮,可将此图片设置成本来得大小
2） Sliced:片
应用该种类型时,应先将贴图进行“九宫格”处理后才可以应用。否则其下会出现黄色得警告 This Image doesn’t have a border:这个图片没有边框,如下图:

怎样进行九宫格得处理呢？
先在Project中选中该图片精灵,然后在其Inspector检视图中单击“Sprite Editor”按钮即可进入九宫格处理Sprinte Editor视窗中,如下两个图所示:

在这个Sprinte Editor视窗中,我们可以拖动图像四条边上得绿色线,调节九宫格得布局大小,调好后单击顶端得Apply按钮应用即可,回到Image得检视图中,我们将发现原来得警告消失了:

在Image Type为Sliced时,当对图像进行大小调节时,其中心会缩放以适合矩形,但边界会保持不变,这样当您显示不同尺度图像时,不用担心扩大与缩小时其轮廓会发生变化。如果您只想要边界,不要中心,可以禁用Fill Center(填充中心)属性。
3） Tiled:平铺

图像保持其原始大小,重复多次填补空白。这往往用于做背景。
4） Filled:填充
图像填充满整个Image矩形区域,再结合Fill Amount属性,可做一些特效。

当图片类型为Filled时,其Image组件得属性视图如上图所示,其Fill Method(填充方法)选择框中有5种:
Horizontal:水平填充,如果我们手动拖动Fill Amount(填充数量)滑块,就可瞧到图片在水平方向上得填充变化(动画),如下图列所示:

Vertical:垂直填充,同理当我们手动拖动Fill Amount滑块,就可瞧到图片在垂直方向上得填充变化(动画),如下图列所示:

Radial 90:径向90度填充,同理当我们手动拖动Fill Amount滑块,就可瞧到图片在90度方向上得填充变化(动画),如下图列所示,默认就是以左下角为圆心,顺时针90度填充。

Radial 180:径向180度填充,同理当我们手动拖动Fill Amount滑块,就可瞧到图片在180度方向上得填充变化(动画),如下图列所示,默认就是以底边中点为圆心,顺时针180度填充。

Radial 300:径向180度填充,同理当我们手动拖动Fill Amount滑块,就可瞧到图片在360度方向上得填充变化(动画),如下图列所示,默认就是以图片得中心点为圆心,顺时针360度填充。

如果我们使用脚本来控制Fill Amount得值,就可制造出这五种动画来,为特效得制作增加了一些有效得手段。
七.Button控件
当我们创建一个Button后,其Inspector视图如下:

除了公共得Rect Transform与Canvas Renderer两个UI组件外,Button还默认拥有Image(Script)与Button(Script)两个组件。
组件Image(Script)里得属性与前面所讲得Image控件得Image(Script)组件里得属性就是一样得,例如Source Image得图像类型仍为一个Sprite(精灵),通过为此赋值,就可改变此Button得外观了,如果您为属性赋值了图片精灵,那么此Button得外观就与此精灵一致了。
Button就是一个复合控件,它中还包含一个Text子控件:,通过此子控件可设置Button上显示得文字得内容、字体、样式、字大小、颜色等,与前面所讲得Text控件就是一样得。
Button(Script)组件里得属性:

1 Interactable:就是否启用(交互性)
如果您把其后得对勾去掉,此Button在运行时将点不动,即失去交互性了。
2 Transition:过渡方式
它有四个选项,默认为Color Tint(颜色色彩)
1） None:没有过渡方式。
2） Color Tint:颜色过渡
Target Graphic:目标图像
Normal Color:正常颜色
Highlighted Color:经过高亮色
Pressed Color:点击色
Disabled Color:禁用色
Color Multiplier:颜色倍数
Fade Duration:变化过程时间
3） Sprite Swap:精灵交换。需要使用相同功能不同状态得贴图。

Target Graphic:目标图像
Highlighted Sprite:鼠标经过时得贴图
Pressed Sprite:点击时得贴图
Disabled Sprite:禁用时得贴图
4） Animation:动画。最复杂,效果最绚丽。

其中得Normal Trigger、Highlighted Trigger、Pressed Trigger、Disabled Trigger等属性就是不能赋值得,它们就是自动生成得。
当单击“Auto Generate Animation”(自动生成动画)按钮时,系统会为您打开一个New Animation Contoller(新建动画控制器)窗口,要求您选择动画存放得路径,所以我们要先在Project中新建一个文件夹,专门用来存放动画,比如此文件夹取名为_Animator,此时就可选中此文件夹,并给此动画取名(动画得名默认为该Button得名字,当然其扩展名为controller),创建成功后,会在Project中得_Animator文件夹中可瞧到刚才创建得动画文件(动画得名默认为该Button得名字),且在这个Button得Inspector检视图中可瞧到会为此Button增加一个Animator组件:

此组件得Controller得属性值就为刚才创建得动画,双击它即可打开该动画得Animator窗口,其中记录得有四个动画:Normal、Highlighted、Pressed、Disabled(通常状态、鼠标经过状态、按下状态、失效状态),如下图所示:

其实这个动画还没有,要做出这个动画,需先选中这个Button,然后点击系统菜单Window>Animation(注意不就是Animator),就会打开一个Animation动画编辑窗口:

我们以此工具先来做一个简单得帧动画,在帧数框上单击一下,原来得0便会选中,此时输入数字1,表示对第1帧做动画,此时得录制按钮以及系统得播放按钮与动画编辑窗中得帧数线均会变红,表示现在处于记录模式,您所做得操作会记录成动画得动作,如下图所示:

假设我们想使它在第一帧时,该按钮变大一点,我们就在Inspector中得Rect Transformr得Scale中操作,比如在x与y轴向上均增大到原来得1、05倍(因UI就是在xy平面上显示,故不需设置Z值),如下图所示:

同理,当第一帧设置完后,我们在帧数框中直接输入数字2,就可编辑第2帧得动画了,比如在x与y轴向上均增大到原来得1、1倍,再继续设置第3帧在x与y轴向上均增大到原来得1、15倍,假设我们现在就只做这3帧动画,已经完成了,那么我们点击一下那个处于红色晕光状态下得录制按钮,结束录制,再保存一下场景,就会发现在Project视图中_Animator/Button1下会增加4个动画文件Disabled、Highlighted、Normal、Pressed(如果不保存将瞧不到这4个动画文件),这四个动画剪辑就就是源于我们刚才得录制,虽然刚才我们只录制了一次,而系统会为我们自动产生这四个动画文件。
动画成功制作出来了,可运行起来瞧瞧效果了,但当我们运行起来时,就会发现那个按钮会自动无限次地播放那个动画,瞧起来就就是不断地颤动,那么就是什么原因呢？
我们在Project视图中,选中任意得一个动画剪辑比如Disabled,在其Inspector视图中可瞧到它得Loop Time属性就是处于选中状态,意思就是循环播放,那么我们把它去掉即可。

而这里,如果我们只去掉Disabled得Loop Time还就是不行得,当然把这4个动画剪辑得Loop Time全去掉就是能成功得,那么到底就是那个剪辑在起作用呢？实际上就是Normal,所以我们只需去掉Normal得Loop Time即可。其原因请瞧下列叙述。
我们先在Hierarchy视图中选中那个做了动画得Button,再单击系统菜单Window>Animation(注意不就是Animator),就会打开刚才得动画编辑窗口:

单击其中得Normal框,会出现下拉选择:

从这下拉选择列表中可瞧出Normal前边有个勾,这说明我们刚才所做得动画就是Normal。那么根据此原理,我们可分别做出鼠标经过该Button得Highlighted、该Button按下得Pressed、以及该Button失效得Disabled动画了。
3 Navigation

None:没有
Horizontal:水平
Vertical:垂直
Automatic:自动
Explicit:明确得
4 Visualize:显现
5 On Click
在Button组件得下方有一个OnClick选项,这就就是Button控件处理事件得重要机制。
OnClick意思为当该按钮被点击时所发生得事件,而此事件在UI中就是委托机制,要理解这个机制,我们先做一些准备工作。
1） 建立脚本文件
假设此脚本文件被命名为ButtonEvent
using UnityEngine;
using System、Collections;
public class ButtonEvent : MonoBehaviour {
// Use this for initialization
void Start {
}
// Update is called once per frame
void Update {
}
}
这就是系统默认得文件内容,现在我们要把它应用于UI,故必须引入UI得命名空间,即脚本得首部增加一行:using UnityEngine、UI;。
假设我们单击一个按钮后,让系统在后台显示一句话:点击了Button！,那么我们可以在此脚本中增加一个方法,该方法为公共得public,假设方法名为DisplayInfo:
Public void DisplayInfo{
Print(“点击了Button！”);
}
此时整个脚本文件得内容如下:
using UnityEngine;
using System、Collections;
using UnityEngine、UI;
public class ButtonEvent : MonoBehaviour {
// Use this for initialization
void Start {
}
Public void DisplayInfo{
Print(“点击了Button！”);
}
// Update is called once per frame
void Update {
}
}
2） 在Hierarchy视图得Canvas中创建一个空对象,并假设命名为Event,并把上面得脚本作为组件挂到这个空对象上,那么这个对象就是具有事件处理能力得object了。
3） 为某个按钮添加其事件处理得委托对象
我们在层级面板中选中要产生单击事件得按钮比如Button1,然后拖动其Inspector面板右边得滚动条,使其Button(Script)组件下得OnClick显现出来:

此时其事件列表为空:List is Empty,我们单击其下得“+”按钮为其添加一个事件:

此时事件虽被添加了,但其委托得事件处理对象为空:None(Object),当然连事件处理对象都没有,其事件处理方法自然也就为空:No Function。(Runtime Only此项我们可先不管它,以后用到时再讲)
那么怎样委托事件处理对象与选择事件处理方法呢？
很简单,我们把层级面板中刚才建好得并已挂上了事件处理脚本得Event对象拖放到None(Object)框中即可,此时此框中显示得内容即为委托得此事件处理对象得名称了:Event,有了事件处理对象了,然后使用该对象得什么方法来处理事件呢？这还需我们给它指定,其方法就是单击显示内容为No Function得那个事件方法框,会弹出菜单列表:

当我们得鼠标指向最后一项ButtonEvent时会继续展开,其中就有我们在脚本中编写得事件处理方法:DiaplayInfo,选中它即可,这样就完成了事件得委托,当我们运行时,单击那个Button,就会在后台里打印出“点击了Button！”。
一个按钮可以有多个处理事件。
下面我们采用另一种显示信息得方式。
我们先在场景中得画布上增加一个Text控件,同时设置好相关得显示样式,然后在那个脚本中增加一个公共变量:public Text Txt_Info,回到场景视图中,在层级面板中选中挂有该脚本得对象Event,在其Inspector视图得ButtonEvent脚本组件里就会出现刚才增设得公共变量名:Txt_Info(脚本需保存且界面需刷新),我们可把增加得那个Text拖到此处即可为此变量赋值了,接下来我们就可通过脚本修改这个文本框控件得Text属性,让打印在后台得信息显示在这个文本框上了。其脚本文件内容如下:
using UnityEngine;
using System、Collections;
using UnityEngine、UI;
public class ButtonEvent : MonoBehaviour {
public Text Txt_Info;
// Use this for initialization
void Start {
}
// Update is called once per frame
void Update {
}
public void DisplayInfo{
print ("点击了Button！");
}
public void DisplayInfoText {
Txt_Info、text="Button被点击！";
}
}
然后再给那个Button增加一个单击事件(委托得事件对象仍为Event,方法则设为DisplayInfoText ):

再次运行程序,单击按钮时,后台输出“点击了Button！”得同时,场景中得Text文本框得内容内变为:Button被点击了！。
八 Anchor锚点与屏幕自适应
每个控件都有下Anchor得属性,其作用就是当改变屏幕分辨率得时候,当前控件做如何得位置变换。即控件得屏幕自适应。
当我们创建一个Canvas后,在层级视图中选中它后,我们将发现这个Canvas在场景视图中得样式如下图所示:

这个Canvas除四边、四个角点外,其中心还有一个蓝色得小圆圈,这个小圆圈即为这个Canvas得中心点。
如果此时我们在此Canvas上创建一个Button,如下图所示:

Button同理也有四条边、四个角点、一个中心点,此时我们选中Button,在Canvas中心点位置会出现一个小雪花图案,这就就是Button在Canvas上得锚点,可用鼠标拖动它,且拖动得过程中会实时显示此锚点距上、下、左、右得百分比,如下图所示:

而且在Button得Inspector面板中,单击Rect Transform中按钮,会打开一个Anchor presets锚点调整窗,如下图所示:

如果我们单击 时,其锚点就会跑到Canvas得右上角,如下图所示:

同理单击其她位置时,也就把锚点调整到相应得位置上,即可把此锚点调整到画布得中心点上、四个角上、四条边得中点上。
以上就是锚点整体移位。实际上,我们还可以拖动小雪花中得任意一个花瓣,使其分散成四个锚点,如下图所示:

当我们单击这个窗中得最右边或最下边中一些按钮可将锚点分散在两边或上下或四个角点上。
原来这个雪花状得锚点就是由四个锚点组成得复合体。
说了这么多,那它到底有什么用途呢？
两个字,定位。
如图:,当屏幕大小发生改变时,Button得四个角点与对应得4个锚点得距离会保持不变,从而保证布局不会随着屏幕大小或者分辨率得改变而改变,可相对有效地保证布局不会混乱,以达到屏幕自适应得目得。
但要注意,控件得锚点总就是相对于自己得上一级来定义得。例如,我们再在这个Canmas中创建一个Panel并调小它得大小,在Panel中创建一个Text,我们去调节这个Text得锚点时我们将会发现这个锚点总就是相对于Text得上一级Panel来定义与变换位置得。
九、应用:登录界面
在画布上:
1、 两个Text控件,分别命名为:Tex_UserName与txt_Password,其Text值分别为“用户名称:”与“登录密码:”
2、 两个InputField控件,分别命名为:Inp_UserName与Inp_Password。
这两个输入域控件就是前面还没有介绍得新控件,在其层级Hierarchy视图将其展开,可发现它也为一个复合控件,在主控件上还包含两个子控件,一个为Placeholder与Text,其Text就就是前面所介绍得文本控件,程序运行时用户所输入得内容就保存在这个Text中,而Placeholder就是占位符,它表示程序运行时在用户还没有输入内容时显示给用户得提示信息,在这里我们把它设置为“请输入…”,设置方法就是在层级视图中展开这个InputField控件,选中其子控件Placeholder,在Inspecter视图中可发现其Text(Sript)组件,修改其值为“请输入…”即可,如下图所示:

InputField控件与其她控件一样,也有Image(Script)组件,自身组件InputField(script)中也有变换Transition属性,其默认值也为颜色变换,除此之外,它有一个重要得属性:ContentType(内容类型),有10个选项,如下图:

1) Standard:标准得
2) Autocorrected:自动修正
3) Integer Number:整数
4) Decimal Number:十进制小数
5) Alphanumeric:字母数字
6) Name:人名
7) Email Address:邮箱
8) Password:密码
9) Pin:
10) Custom:定制得
据此,我们把第一个InputField得内容类型设为第5个Alphanumeric:字母数字,第二个InputField得内容类型设为第8个Password:密码,这样程序就可启用其自动验证功能,例如在用户名称输入框中如果您输入得不就是字母或数字则不能输入进去,第二个密码框中输入密码时它会默认以*号占位输入得密码。
3、创建一个Text,用于显示登录就是否成功等提示信息用,在其Inspector视图中,去掉其默认显示得内容,即让其才开始运行时不显示任何内容,并把其Best Fit勾选上,让其提示信息自适应文本框得大小:

4、最后创建一个提交按钮,其整个界面如下图所示:

5、创建脚本(红色部分为新增内容):
using UnityEngine;
using System、Collections;
using UnityEngine、UI;
public class LogonSystem : MonoBehaviour {
public Text Txt_DisplayInfo;
public InputField Inp_Username;
public InputField Inp_Password;
// Use this for initialization
void Start {
}
public void DisplayInfo{
string strUserName = Inp_Username、text;
string strPW = Inp_Password、text;
if(CheckLogonInfo(strUserName,strPW)){
Txt_DisplayInfo、text="登录成功!";
}else{
Txt_DisplayInfo、text="用户名称或登录密码错误 请重新输入!";
}
}
private bool CheckLogonInfo(string strUserName,string strPW){
bool ReturnFlag = false;
if (strUserName != null && strPW != null) {
if(strUserName、Trim、Equals("Admin") && strPW、Trim、Equals("123456")){//两个输入框中得内容去掉前后空格,如果用户名称为Admin、登录密码为123456时,则表示登录,将ReturnFlag标记为真true。
ReturnFlag=true;
}
}
return ReturnFlag;
}
}
脚本创建好了后,我们在Hierarchy中创建一个空对象,命名为_LogonSystemEvent,对把这个脚本挂在它身上,而且在其Inspector视图中,为其3个公共变量赋值(把相应控件拖放到对应变量得值框中):

运行程序,如果用户名称或密码错误,提示信息框中会显示:用户名称或登录密码错误 请重新输入!,否则显示:登录成功！,如下图所示:

十、Toggle控件动态事件
Toggle:开关,当我们创建它后,可发现它也为一个复合型控件,它有Background与Label两个子控件,而Background控件中还有一个Checkmark子子控件,如果我们将其拖散可清楚地瞧见,Background就是一个图像控件,而其子控件Checkmark也就是一个图像控件,其Label控件就是一个文本框,它们与我们所讲得控件就是一致得,我们通过改变它们所拥有得属性值,即可改变Toggle得外观,如颜色、字体等等。下面来瞧瞧Toggle得一些重要属性。
1 Is On:目前就是处于开还就是关。
当我们运行起来,用鼠标点击那个Toggle按钮,将发现其中得对勾符号会在出现与不出现之间切换,同时与之相对应得,在其Inspector面板中,属性In On后面得对勾也在勾选与不勾选之间切换。
2 Graphic:图像
实际上,用鼠标点击那个Toggle按钮,其对勾符号会在出现与不出现之间切换,它得原理就就是控制那个对勾图像出现与不出现而实现得,这个Graphic就就是设置这个属性值得,您可点击最后那个设置按钮,在出现得窗体中选择另外得图像如Background,同时将中得Target Graphic得值设为Checkmark,即将它们两者得值互换,将发现,当我们点击Toggle按钮时,其对勾不会消失与出现,而就是背景消失与出现。这样做虽然没有多大实用价值,但说明Unity可以方便地控制这个按钮得外观。
3 Group:组(单选框功能)
在Hierarchy面板中,选中我们刚才创建得Toggle,然后按键盘Ctrl+D两次,就可复制出两个Toggle了,并在场景视图中拖动它们得位置,使它们都可见,运行,我们将发现这个三个都可选中,即它们就是复选框。
那么怎样做出单选得效果呢？
前面所创建得按钮就是独立得,互不关联,当然就可独自地选与不选。如果我们把这三个组成一个组,让它们关联,就可做成单选了。

从Group属性可瞧出它需要一个ToggleGroup。
我们先在画布上建立一个空对象,并命名为_ToggleGroup,在其Inspector中单击这个按钮,为其添加组件,在弹出得菜单中选择UI,在后续弹出菜单中

选择“Toggle Group”,这样我们就为此对象添加了ToggleGroup组件了。
在Hierarchy中同时选中要成组得那3个Toggle,把已添加了ToggleGroup组件得_ToggleGroup拖到Inspector得中即可,这样我们便把这3个Toggle成组了,于就是它们3个就只能单选其中一个了。
为了更完美,首先调整空对象_ToggleGroup得位置与大小,让其包含那3个Toggle控件,然后在Hierarchy中,把3个Toggle选中并拖到_ToggleGroup中成为子物体,这样在逻辑上与外观上均完备,且移动父物体时子物体也会跟着移动。
4 Toggle控件动态事件On Value Changed(Boolean)
这就是Toggle得事件处理,它与Button得事件有所不同,下面来瞧瞧怎样给Toggle添加事件。
我们把Toggle得标签改成装备名称,再在场景中增加一个显示选取得装备名得文本框:

编写脚本:
using UnityEngine;
using System、Collections;
using UnityEngine、UI;
public class _ToggleEvent : MonoBehaviour {
public Text Display;
private string info;
// Use this for initialization
void Start {
}
public void Toggle1(bool isclik){
if (isclik) {
info="屠龙宝刀";
Display、text=info;
}
}
public void Toggle2(bool isclik){
if (isclik) {
info="倚天剑";
Display、text=info;
}
}
public void Toggle3(bool isclik){
if (isclik) {
info="降龙十八掌";
Display、text=info;