Unity入门操作_UGUI_Toggle_027

Toggle开关,当我们创建它后
这里写图片描述
可发现它也为一个复合型控件
这里写图片描述
它有Background与Label两个子控件,而Background控件中还有一个Checkmark子子控件,如果我们将其拖散可清楚地看见,
Unity入门操作_UGUI_Toggle_027_第1张图片
Background
这里写图片描述
是一个图像控件,而其子控件Checkmark
这里写图片描述
也是一个图像控件,其Label控件
这里写图片描述
是一个文本框,它们与我们所讲的控件是一致的,我们通过改变它们所拥有的属性值,即可改变Toggle的外观,如颜色、字体等等。下面来看看Toggle的一些重要属性。
Is On:目前是处于开还是关。用鼠标点击那个Toggle按钮,将发现其中的对勾符号会在出现与不出现之间切换,同时与之相对应的,在其Inspector面板中,属性In On后面的对勾也在勾选Is On与不勾选Is On之间切换。

Graphic:图像。用鼠标点击那个Toggle按钮,其对勾符号会在出现与不出现之间切换,它的原理就是控制那个对勾图像出现与不出现而实现的,这个Graphic就是设置这个属性值的,你可以通过这里写图片描述设置
Unity入门操作_UGUI_Toggle_027_第2张图片
Group:组(单选框功能)
在Hierarchy面板中,选中我们刚才创建的Toggle,然后按键盘Ctrl+D两次,就可复制出两个Toggle了,并在场景视图中拖动它们的位置,使它们都可见,运行,我们将发现这个三个都可选中,即它们是复选框。如果我们把这三个组成一个组,让它们关联,就可做成单选了。
这里写图片描述
从Group属性可看出它需要一个ToggleGroup。我们先在画布上建立一个空对象,并命名为_ToggleGroup,在其Inspector中单击
AddComponent这个按钮,为其添加组件,在弹出的菜单中选择UI,在后续弹出菜单中Unity入门操作_UGUI_Toggle_027_第3张图片
选择“Toggle Group”,这样我们就为此对象添加了ToggleGroup组件了。在Hierarchy中同时选中要成组的那3个Toggle,把已添加了ToggleGroup组件的_ToggleGroup拖到Inspector的
这里写图片描述
中即可,这样我们便把这3个Toggle成组了,于是它们3个就只能单选其中一个了。为了更完美,首先调整空对象_ToggleGroup的位置与大小,让其包含那3个Toggle控件,然后在Hierarchy中,把3个Toggle选中并拖到_ToggleGroup中成为子物体
这里写图片描述
这样在逻辑上与外观上均完备,且移动父物体时子物体也会跟着移动。
Toggle控件动态事件On Value Changed(Boolean)
这里写图片描述

标签页面TagPage
Unity入门操作_UGUI_Toggle_027_第4张图片
如图,当我们点击顶部不同的标签时,下部的内容区域会显示对应的内容版面。
在画布上创建一个空对象,命名为Lable,创建一个Image,布局上Lable在上面,Image在下面,如下图:
Unity入门操作_UGUI_Toggle_027_第5张图片
在Lable中创建三个子控件,它们均为Toggle,命名为Toggle1、Toggle2、Toggle3,并调整它们的Background与Checkmark,使其看起来像按钮:
Unity入门操作_UGUI_Toggle_027_第6张图片
详细制作过程
Unity入门操作_UGUI_Toggle_027_第7张图片
Background是背景,是未被选中时表现出来的图景。首先在场景视图中将其大小调大,使其与整个按钮形状一样大,然后在其Inspector视图中的Image组件里设置Source Image或Color属性值,这里为了简便,我们将其Color值设为较暗的灰度色,用于它未被选中时展现出来的颜色。
Unity入门操作_UGUI_Toggle_027_第8张图片
Checkmark是选中时表现出来的图景,默认是一个对钩,同理首先在场景视图中将其大小调大,使其与整个按钮形状一样大,这样一来,Checkmark与Background一样大,两个重叠起来了,当未选中时,表现出来的是Background的景象,选中后表现出来的是Checkmark的景象。对于Checkmark的调整,然后在其Inspector视图中的Image组件里设置Source Image或Color属性值,这里为了简便,将Image组件里的Source Image属性设为空None,即去掉那个对钩图像,并将其Color值设为较亮的灰度色,用于它被选中时展现出来的颜色。

这三个按钮状的Toggle按设计思路应该为单选,所以按以前所学的知识,需设置它们的Group属性值为Lable ,同时,对于它们的Is On属性,第一个Toggle的保持勾选,另两个去掉勾选,即使开始时,第一个处于默认选中状态。

在Image上创建三个为空的子控件,分别命名为Page1、Page2、Page3,并调整它们的大小,使其与Image一样大,位置上与Image重叠。再在Page1、Page2、Page3上各自创建一个Text子控件,也调整它们的大小大致与Image相当,且位置上也与Image重叠,并分别输入要显示的文本内容。这三个Text是重叠在一起的,显示时,其内容也会重叠,如果我们只勾选第一个Text的父控件Page1的 ,另两个去掉勾选,那么显示时会默认显示第一个,另两个处于未激活状态,不会显示出来,自然就不会发生显示的重叠了。

最后一步我们来实现当我们点击顶部不同的标签时,下部的内容区域会显示对应的内容版面。也许你会认为这要用到脚本,实际上有更简便的方法,当然会离不开事件处理机制的。下面以Toggle1为例,选中它,在其Inspetctor视图中,单击:
这里写图片描述
中的“+”号,为其添加事件,如下图:
这里写图片描述
委托事件处理对象,这里我们把Page1拖给 None(Object)如下图
这里写图片描述
指定事件处理方法:
Unity入门操作_UGUI_Toggle_027_第9张图片
虽然我们没有编写自己的脚本,但Unity有内置的许多方法的,这里我们选择第二项GameObject:
Unity入门操作_UGUI_Toggle_027_第10张图片
选择上边的动态方法:SetActive,设置结果如下图:
这里写图片描述
这个事件的运行机理是:当Toggle1的选中状态发生改变时(注意是状态发生改变,选中时会产生事件,那么由选中到取消选中,也会产生事件),所挂接的对象Page1会被激活或失效。
根据这个原理,Toggle2的事件委托对象为Page2,Toggle3的事件委托对象为Page3,这样就实现了当我们点击顶部不同的标签时,下部的内容区域会显示对应的内容版面了,如下图:
Unity入门操作_UGUI_Toggle_027_第11张图片

你可能感兴趣的:(Unity)