Unity入门操作_UGUI_Toggle_027

Toggle开关，当我们创建它后

可发现它也为一个复合型控件

它有Background与Label两个子控件，而Background控件中还有一个Checkmark子子控件，如果我们将其拖散可清楚地看见，

Background

是一个图像控件，而其子控件Checkmark

也是一个图像控件，其Label控件

是一个文本框，它们与我们所讲的控件是一致的，我们通过改变它们所拥有的属性值，即可改变Toggle的外观，如颜色、字体等等。下面来看看Toggle的一些重要属性。
Is On：目前是处于开还是关。用鼠标点击那个Toggle按钮，将发现其中的对勾符号会在出现与不出现之间切换，同时与之相对应的，在其Inspector面板中，属性In On后面的对勾也在勾选Is On与不勾选Is On之间切换。

Graphic：图像。用鼠标点击那个Toggle按钮，其对勾符号会在出现与不出现之间切换，它的原理就是控制那个对勾图像出现与不出现而实现的，这个Graphic就是设置这个属性值的，你可以通过设置

Group：组（单选框功能）
在Hierarchy面板中，选中我们刚才创建的Toggle，然后按键盘Ctrl+D两次，就可复制出两个Toggle了，并在场景视图中拖动它们的位置，使它们都可见，运行，我们将发现这个三个都可选中，即它们是复选框。如果我们把这三个组成一个组，让它们关联，就可做成单选了。

从Group属性可看出它需要一个ToggleGroup。我们先在画布上建立一个空对象，并命名为_ToggleGroup，在其Inspector中单击
AddComponent这个按钮，为其添加组件，在弹出的菜单中选择UI，在后续弹出菜单中
选择“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

如图，当我们点击顶部不同的标签时，下部的内容区域会显示对应的内容版面。
在画布上创建一个空对象，命名为Lable，创建一个Image，布局上Lable在上面，Image在下面，如下图：

在Lable中创建三个子控件，它们均为Toggle，命名为Toggle1、Toggle2、Toggle3，并调整它们的Background与Checkmark，使其看起来像按钮：

详细制作过程

Background是背景，是未被选中时表现出来的图景。首先在场景视图中将其大小调大，使其与整个按钮形状一样大，然后在其Inspector视图中的Image组件里设置Source Image或Color属性值，这里为了简便，我们将其Color值设为较暗的灰度色，用于它未被选中时展现出来的颜色。

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有内置的许多方法的，这里我们选择第二项GameObject：

选择上边的动态方法：SetActive，设置结果如下图：

这个事件的运行机理是：当Toggle1的选中状态发生改变时（注意是状态发生改变，选中时会产生事件，那么由选中到取消选中，也会产生事件），所挂接的对象Page1会被**或失效。
根据这个原理，Toggle2的事件委托对象为Page2，Toggle3的事件委托对象为Page3，这样就实现了当我们点击顶部不同的标签时，下部的内容区域会显示对应的内容版面了，如下图：