美文网首页
[unity进阶]魔改toggle教程实现选中修改文字颜色[原创

[unity进阶]魔改toggle教程实现选中修改文字颜色[原创

作者: 吉凶以情迁 | 来源:发表于2022-07-20 17:05 被阅读0次

    首先,我们要魔改后实现如下效果


    image.png

    默认的样式可能不适合正常的场景,
    默认的toggle在层级视图中会包含如下组件,Background,Checkmark,Label

    image.png

    在检查器中可以看到多了一个Toggle,也就是说要自定义集成toggle则需要继承Toggle实现。
    并且目标图形已经指定好了Background, 代表了未选中颜色
    checkmark代表选中颜色,


    image.png

    可以通过清除图形选择none,只设置颜色


    image.png

    这里能实现上面的样子,但是文字颜色却无法修改,修改文字颜色方式也多种多样,这里采用干掉默认的toggle然后替换成自己的toggle,

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.EventSystems;
    using UnityEngine.UI;
    namespace UnityEngine.UI
    {
    
        public class ToggleExtend : Toggle
        {
            /*        public int colorInt2;
                    [Header("TextColor")]*/
            [SerializeField]
            [Tooltip("checkText")]
            public Text text;
            [SerializeField]
            [Tooltip("textCheckColor")]
            private Color textCheckColor;
            [Tooltip("unCheckColor default use current color")]
            public Color normalColor;
    
    
            private void OnValueChange(bool isOn)
            {
                print("oncheck ison:" + isOn);
                //这里根据isOn做修改
                if (textCheckColor != null)
                {
    
                    text.color = isOn ? textCheckColor : normalColor;// textCheckColor : normalColor;
                }
            }
            protected override void Start()
            {
                base.Start();
                if (this.text != null)
                {
                    if (normalColor == null)
                    {
                        this.normalColor = text.color;
    
                    }
                    this.onValueChanged.AddListener(OnValueChange);
    
                }
                /*  this.onValueChanged.AddListener(delegate {
                  });*/
                //this.group.
                //ToggleValueChanged(m_Toggle);
            }
    
    
    
            protected override void OnDestroy()
            {
                onValueChanged.RemoveListener(OnValueChange);
                base.OnDestroy();
            }
    
    
    
        }
    }
    
    

    写完之后,替换之前的toggle,变成了如下


    image.png

    但是public和序列化并没有显示,原因是编辑器识别到并非继承Mono的情况下默认不会显示自定义的字段??

    新建一个类

    
    using UnityEditor;
    using UnityEngine.UI;
    
    
    
    
    [CustomEditor(typeof(ToggleExtend), false)]
    public class MyToggleEditor : Editor
    {
    }
    
    
    
    

    在注解这里指定ToggleExtend就ok了,
    然后再一次替换 , 其中源图像就是 checkmark对应,
    目标图像,则是把Background拖动过去。

    image.png

    另外补充一点,
    normalColor 正常文本的颜色 默认选中项目必须设置,其他的可不用设置,会自动识别之前并没有设置好的,这和其它开发不一样,但是也只能这么理解。
    我在写代码中发现一个问题,代码设置的红色,运行之前编辑器显示的并非红色,运行后就把编辑器变成红色了,无语的是退出编辑器依然是红色,这。。。

    相关文章

      网友评论

          本文标题:[unity进阶]魔改toggle教程实现选中修改文字颜色[原创

          本文链接:https://www.haomeiwen.com/subject/srfyirtx.html