UGUI源代码之Toggle—增加显隐控制

以下内容是根据Unity 2020.1.01f版本进行编写的

1、目的

有时候，一些单选框或复选框会有选中状态，选中状态下不仅显示勾，而且选框底图的选中状态也需要显示。但是Unity中的Toggle组件没有这个功能，Unity实现勾的显示方式是渐隐渐显，而不是节点的显隐，因此，想尝试增加控制节点显隐的功能
 

2、参考

本文参考Unity官方的UGUI源代码
Github地址：https://github.com/Unity-Technologies/uGUI
 

3、代码阅读

首先看下ToggleEditor类：

SerializedProperty m_OnValueChangedProperty;
SerializedProperty m_TransitionProperty;
SerializedProperty m_GraphicProperty;
SerializedProperty m_GroupProperty;
SerializedProperty m_IsOnProperty;

protected override void OnEnable()
{
base.OnEnable();

m_TransitionProperty = serializedObject.FindProperty("toggleTransition");
m_GraphicProperty = serializedObject.FindProperty("graphic");
m_GroupProperty = serializedObject.FindProperty("m_Group");
m_IsOnProperty = serializedObject.FindProperty("m_IsOn");
m_OnValueChangedProperty = serializedObject.FindProperty("onValueChanged");
}

public override void OnInspectorGUI()
{
base.OnInspectorGUI();
EditorGUILayout.Space();

serializedObject.Update();
EditorGUI.BeginChangeCheck();
EditorGUILayout.PropertyField(m_IsOnProperty);
if (EditorGUI.EndChangeCheck())
{
    Toggle toggle = serializedObject.targetObject as Toggle;
    ToggleGroup group = m_GroupProperty.objectReferenceValue as ToggleGroup;

    toggle.isOn = m_IsOnProperty.boolValue;

    if (group != null && toggle.IsActive())
    {
        if (toggle.isOn || (!group.AnyTogglesOn() && !group.allowSwitchOff))
        {
            toggle.isOn = true;
            group.NotifyToggleOn(toggle);
        }
    }
}
EditorGUILayout.PropertyField(m_TransitionProperty);
EditorGUILayout.PropertyField(m_GraphicProperty);
EditorGUI.BeginChangeCheck();
EditorGUILayout.PropertyField(m_GroupProperty);
if (EditorGUI.EndChangeCheck())
{
    Toggle toggle = serializedObject.targetObject as Toggle;
    ToggleGroup group = m_GroupProperty.objectReferenceValue as ToggleGroup;
    toggle.group = group;
}

EditorGUILayout.Space();

// Draw the event notification options
EditorGUILayout.PropertyField(m_OnValueChangedProperty);

serializedObject.ApplyModifiedProperties();
}

其中，选择checkmark显示方式的属性叫Toggle Transition：

但是这里只是看到了Toggle在Inspector面板的布局代码，没有看到实际的操作代码，因此跳转到Toggle脚本（省略号……为省略的代码）：

/// <summary>
/// Display settings for when a toggle is activated or deactivated.
/// </summary>
public enum ToggleTransition
{
    /// <summary>
    /// Show / hide the toggle instantly
    /// </summary>
    None,

    /// <summary>
    /// Fade the toggle in / out smoothly.
    /// </summary>
    Fade
}

[Serializable]
/// <summary>
/// UnityEvent callback for when a toggle is toggled.
/// </summary>
public class ToggleEvent : UnityEvent<bool>
{}

/// <summary>
/// Transition mode for the toggle.
/// </summary>
public ToggleTransition toggleTransition = ToggleTransition.Fade;
……
public bool isOn
{
    get { return m_IsOn; }

    set
    {
        Set(value);
    }
}
……
void Set(bool value, bool sendCallback = true)
{
    if (m_IsOn == value)
        return;

    // if we are in a group and set to true, do group logic
    m_IsOn = value;
    if (m_Group != null && IsActive())
    {
        if (m_IsOn || (!m_Group.AnyTogglesOn() && !m_Group.allowSwitchOff))
        {
            m_IsOn = true;
            m_Group.NotifyToggleOn(this, sendCallback);
        }
    }

    // Always send event when toggle is clicked, even if value didn't change
    // due to already active toggle in a toggle group being clicked.
    // Controls like Dropdown rely on this.
    // It's up to the user to ignore a selection being set to the same value it already was, if desired.
    PlayEffect(toggleTransition == ToggleTransition.None);
    if (sendCallback)
    {
        UISystemProfilerApi.AddMarker("Toggle.value", this);
        onValueChanged.Invoke(m_IsOn);
    }
}
/// <summary>
/// Play the appropriate effect.
/// </summary>
private void PlayEffect(bool instant)
{
    if (graphic == null)
        return;

#if UNITY_EDITOR
    if (!Application.isPlaying)
        graphic.canvasRenderer.SetAlpha(m_IsOn ? 1f : 0f);
    else
#endif
    graphic.CrossFadeAlpha(m_IsOn ? 1f : 0f, instant ? 0f : 0.1f, true);
}
……

在这里看到，Toggle Transition是一个枚举类型的属性，其中只有none和fade选项。当isOn为True时，调用Set函数。在Set函数中，调用PlayEffect函数来实现checkmark节点图片的渐隐渐显效果，其实现方式是通过改变graphic的透明度实现的，因此，如果能接受性能消耗的话，可以直接在此节点上挂载Mask组件，那么此节点下的子节点一样可以实现渐隐渐显效果

如果不使用Mask组件（使用Mask组件会至少增加1个Draw Call），我们可以增加一个Toggle Transition的选项SetActive，当Toggle Transition设置的选项为SetActive时，我们直接控制节点的显示和隐藏
 

4、准备修改UGUI源代码

 
请看这篇：UGUI源代码之修改源代码的前期准备
 
已经准备过的同学可以跳过
 
 

5、自定义实现Toggle对CheckMark节点的显隐控制（重点部分）

增加枚举类型Toggle Transition的选项：

public enum ToggleTransition
{
    /// <summary>
    /// Show / hide the toggle instantly
    /// </summary>
    None,

    /// <summary>
    /// Fade the toggle in / out smoothly.
    /// </summary>
    Fade,

    /// <summary>
    /// Sets the checkmark's gameobject active true / false
    /// </summary>
    SetActive
}

最后只需要在Set函数中增加判断，若Toggle Transition属性为SetActive，则控制节点显示或隐藏：

void Set(bool value, bool sendCallback = true)
{
    if (m_IsOn == value)
        return;

    // if we are in a group and set to true, do group logic
    m_IsOn = value;
    if (m_Group != null && IsActive())
    {
        if (m_IsOn || (!m_Group.AnyTogglesOn() && !m_Group.allowSwitchOff))
        {
            m_IsOn = true;
            m_Group.NotifyToggleOn(this, sendCallback);
        }
    }

    // Always send event when toggle is clicked, even if value didn't change
    // due to already active toggle in a toggle group being clicked.
    // Controls like Dropdown rely on this.
    // It's up to the user to ignore a selection being set to the same value it already was, if desired.
    PlayEffect(toggleTransition == ToggleTransition.None);

    if(toggleTransition == ToggleTransition.SetActive)
    {
        graphic.gameObject.SetActive(value);
    }

    if (sendCallback)
    {
        UISystemProfilerApi.AddMarker("Toggle.value", this);
        onValueChanged.Invoke(m_IsOn);
    }
}

 

6、最终效果

toggle结构

可以看到，当Toggle Transition属性为Fade时，中间的圆没有变化，因为选中状态的圆挡住了非选中状态的圆，所以当Toggle Transition属性为SetActive时，非选中状态的圆就能显示了
 

7、项目工程源代码

https://github.com/CHJ-Self/MyUGUI
 
 
 
 

大佬们找到问题欢迎拍砖~
另外，小伙伴们有什么想实现的效果也可以在评论区提出来哦~