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

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

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值