文章目录

• 摘要
• Toggle基本要素
• UGUI之Toggle
• • Unity预设Toggle组成分析
  • • 分析
    • 总结
  • Inspector窗口参数
  • • 分析
    • 总结
  • Toggle常用成员分析
• 自制Toggle
• • 实现Button部分的交互
  • 实现Toggle特定的交互
  • 源码

摘要

• 本章是学习和总结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] private Color normalColor;
        [SerializeField] private Color highlightColor;
        [SerializeField] private Color pressedColor;
        [SerializeField] private Color selectColor;
        [SerializeField] private Color disableColor;

        [SerializeField] private bool IsOn;
        [SerializeField] private Image toggleGrapics;
        #endregion

        #region callBack Methods

        private void Awake()
        {
            if (interactivable)
            {
                if (targetImage != null)
                    targetImage.color = normalColor;
                if (targetText != null)
                    targetText.color = normalColor;
            }
            else
            {
                if (targetImage != null)
                    targetImage.color = disableColor;
                if (targetText != null)
                    targetText.color = disableColor;
            }

            if (isOn)
                toggleGrapics.gameObject.SetActive(true);
            else
                toggleGrapics.gameObject.SetActive(false);

        }

        //聚焦
        public void OnPointerEnter(PointerEventData eventData)
        {
            if (!Interactivable) return;
            //聚焦时，颜色变为高亮色
            if (targetImage != null)
                targetImage.color = highlightColor;
            if (targetText != null)
                targetText.color = highlightColor;
        }

        //失焦
        public void OnPointerExit(PointerEventData eventData)
        {
            if (!Interactivable) return;
            if (targetImage != null)
                targetImage.color = normalColor;
            if (targetText != null)
                targetText.color = normalColor;
        }

        //点下
        public void OnPointerDown(PointerEventData eventData)
        {
            if (!Interactivable) return;
            if (targetImage != null)
                targetImage.color = pressedColor;
            if (targetText != null)
                targetText.color = pressedColor;
        }
        //释放
        public void OnPointerUp(PointerEventData eventData)
        {
            if (!Interactivable) return;

            if (targetImage != null)
                targetImage.color = selectColor;
            if (targetText != null)
                targetText.color = selectColor;
        }
        //点击
        public void OnPointerClick(PointerEventData eventData)
        {
            isOn = !isOn;
            if (isOn)
                toggleGrapics.gameObject.SetActive(true);
            else
                toggleGrapics.gameObject.SetActive(false);

            onValueChanged?.Invoke(isOn);
        }
        #endregion

        #region code read-in references
        //点击委托
        public Action<bool> onValueChanged;
        //是否可交互
        public bool Interactivable { set => interactivable = value; get => interactivable; }
        //控制的渲染对象
        public Image TargetImage { set => targetImage = value; get => targetImage; }
        public Text TargetText { set => targetText = value; get => targetText; }

        //普通状态的颜色
        public Color NormalColor { set => normalColor = value; get => normalColor; }
        //聚焦状态的颜色
        public Color HighlightColor { set => highlightColor = value; get => highlightColor; }
        //点击状态的颜色
        public Color PressedColor { set => pressedColor = value; get => pressedColor; }
        //选中状态的颜色
        public Color SelectColor { set => selectColor = value; get => selectColor; }
        //禁用状态的颜色
        public Color DisableColor { set => disableColor = value; get => disableColor; }

        public bool isOn { get => IsOn; set => IsOn = value; }
        public Image grapics { get => toggleGrapics; set => toggleGrapics = value; }
        #endregion



}

标签：界面,color,targetImage,Toggle,targetText,组件,UI,null,public
来源： https://blog.csdn.net/weixin_45764934/article/details/123098457