【UI界面开发】基本组件——开关

摘要

• 本章是学习和总结UGUI中的开关（Toggle）知识的内容。
• 为了更好地阐述自己的观点，在本文章中尝试从“自制模仿”的角度进行分析Toggle的一些常用功能

Toggle基本要素

• 对于一个Toggle，它最大的特点在于有开/关两个状态，对应于布尔值的true/false。
• 因此一个基本的Toggle必然在每次交互下其状态在true/false两个值之间切换，并且该值能够被外界知晓，以便外界根据开关情况进行特定行为。
• 同样地，在组件执行事件处理时，也应该将开关状态作为参数代入进去。

UGUI之Toggle

Unity预设Toggle组成分析

分析

• 以上是场景中Toggle物体的展开图。可以看到它由三级结构构成。
• 需要注意的是，Toggle本身是一个只挂载了Toggle组件的无渲染物体，或者称空物体。
• Background本身是作为一张打底的图片，它的作用在于交互上的表现切换
• Label是一个文本组件，它负责显示文本信息，和Toggle本身功能可以无关
• 而Checkmark则是表现Toggle特点的一个重要物体。它会在toggle开状态时激活，关状态是隐藏。是表现toggle开关状态的重要部分

总结

• 可以看出，UGUI的预设UI——Toggle由基本的背景、开关状态显示图、文本框三个部分组成，其中关键的部分是随着开关状态进行显示和隐藏的Image。

Inspector窗口参数

分析

• 如图所示，我们可以将组件参数以Is On为边界分为上下两个部分。其中上部分与Button组件的内容完全一致，而下半部分则是Toggle组件特有的部分。
• 我们可以看到上半部分的Target Graphic参数，它引用的是Background。Graphic是Unity的一个图形渲染接口，它可以获取任何可以被渲染的组件，并按一定规则进行渲染。因此Background物体是Toggle用于体现Button的基本交互视效的工具。
• 再看下部分，重要的参数Is On表明它的开关状态。在游戏界面中则表现为Checkmark是否处于激活显示状态。可以看到下方的Graphic引用了Checkmark，它表示将该物体作为渲染对象来作为Is On的表现。同样的我们可以将Label拖拽进去，这样当开的时候显示文本，关的时候隐藏文本。
• Group是表现”单选框组“的重要参数，它能够将多个Toggle组件设置为一组，在一组中有且只有一个组件可以处于开状态。这里涉及到另外一个组件，因此不在这里赘述。

总结

• 从参数列表中可以了解到，我们可以把Toggle当成特殊的Button，它的基本功能与Button相同，并在Button的基础上延伸——存在开关状态。因此它的事件函数一定是带着布尔参数的。

Toggle常用成员分析

1. onValueChanged : 提供事件监听的注册和移除方法，可以通过代码的方式在开关状态转换时进行处理。
2. isOn：可以动态获取和修改Toggle的开关状态
3. group：可以动态获取或指派group

自制Toggle

这里只进行粗略地实现，只实现基本功能，一些细节则不具体完成，如动态设置isOn时，随时调整图片的显示状态等。

实现Button部分的交互

• 根据分析可知，button交互分为失焦、聚焦、点击、选中、禁用五个基本状态，分别用五种颜色来表示。通过IPointerExit,IPointerEnter,IPointerDown,IPointerUp,IPointerClick五个接口来实现。
• 因为涉及到选中，考虑到在UGUI的Button中点击其他Button，被选中的Button会取消选中，因此可以用一个静态成员来指代当前选中对象。
• 禁用则是用一个布尔值来控制。

实现Toggle特定的交互

• toggle特殊的在于isOn，group以及带布尔参数的事件处理函数。这里只实现isOn和事件
• isOn只需要使用布尔成员，在点击事件即IPointerClick方法中对其值进行翻转即可。根据值来设置图片的显示。
• 事件处理则可以声明带参委托，在点击事件中进行呼叫调用。

源码

public class CToggle : MonoBehaviour, IPointerEnterHandler, IPointerUpHandler, IPointerExitHandler, IPointerDownHandler, IPointerClickHandler
{
   
        #region Inspector Setting
        [SerializeField] private bool interactivable;
        [SerializeField] private Image targetImage;
        [SerializeField] private Text targetText;
        [SerializeField