Unity UGUI(六)Toggle(开关/切换)

Toggle(Script)

   

Interactable可交互是否可点击
Transition过渡
  • None:无
  • Color Tint:颜色色彩
    • Target Graphic:目标图形
    • Normal Color:正常颜色
    • Highlighted Color:高亮颜色
    • Pressed Color:按下颜色
    • Selected Color:选择颜色
    • Disabled Color:已禁用颜色
    • Color Multiplier:色彩乘数
    • Fade Duration:淡化持续时间
  • Sprite Swap:精灵交换
    • Target Graphic:目标图形
    • Highlighted Sprite:高亮精灵
    • Pressed Sprite:按下精灵
    • Selected Sprite:选择精灵
    • Disabled Sprite:已禁用精灵
  • Animation:动画
    • Normal Trigger:正常触发
    • Highlighted Trigger:高亮触发
    • Pressed Trigger:按下触发
    • Selected Trigger:选择触发
    • Disabled Trigger:引禁用触发
    • Auto Generate Animation 自动生成动画
Navigation

导航

选中该按钮后可以用方向键比如WASD以及上下左右按键选择其他按钮,前提是导航目标按钮也开启了导航功能,可通过回车或者空格点击按钮响应点击事件

  • None:无
  • Horizontal:水平
  • Vertical:垂直
  • Automatic:自动
  • Explicit:显式
    • Select On Up:向上选择
    • Select On Down:向下选择
    • Select On Left:向左选择
    • Select On Right:向右选择
  • Visualize:可视化,把按键能够导航到的路径可视化,高亮的黄色箭头为当前按钮可导航到的目标
Is On是否开启此Toggle是否开启
Toggle Transition切换过渡
  • None:无
  • Fade:淡入淡出
Graphic图形

用鼠标点击那个Toggle按钮,其对勾符号会在出现与不出现之间切换,它的原理就是控制那个对勾图像出现与不出现而实现的,这个Graphic就是设置这个属性值的

Group

多个Toggle实现单选框功能:

为一物体添加ToggleGroup组件,然后将此物体添加到多个Toggle的Group里

On Value Changed(Boolean)值改变时(布尔)根据布尔值的变化,即是否开启,来实现对应的事件

自带Toggle

 

Toggle:空物体,带Toggle组件。

Background:图片,用作选择框底图。

Checkmark:图片,用作选择标记,即对勾。

Label:文本,用于文字说明。

代码设置与判定

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestUI : MonoBehaviour
{
    Toggle toggle;
    void Start()
    {
        toggle = gameObject.GetComponent<Toggle>();
        toggle.isOn = false;
    }

    void Update()
    {
        if (toggle.isOn == true)
        {
            Debug.Log("OK");
            toggle.isOn = false;
        }
    }
}

Toggle Group

游戏层级关系如下图: 

为Image添加Toggle Group组件。

将添加了Toggle Group组件的Image分别拖到Toggle1和Toggle2的Group位置。

Toggle1和Toggle2则实现单选效果。

绑定事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestUI : MonoBehaviour
{
    Toggle toggle;
    void Start()
    {
        toggle = GameObject.Find("Canvas/Toggle").GetComponent<Toggle>();
    }

    public void GetValue(bool b)
    {
        Debug.Log(b);
    }
}

 

你可以使用UnityToggle组件和事件来实现在点击Toggle切换子物体的颜色。首先,在子物体上添加一个Image组件,并将其颜色设置为默认颜色。然后在Toggle组件上勾选“Is On”属性,这样Toggle默认就是选中状态。接下来,在Toggle上添加一个Toggle组件,并在该组件的“On Value Changed”事件中添加一个事件处理程序。在事件处理程序中,你可以检查Toggle的选中状态,然后根据需要设置子物体的颜色。例如,以下代码将在Toggle选中时将子物体的颜色设置为红色,取消选中时将颜色设置回默认颜色: ```csharp public class ToggleColorController : MonoBehaviour { public Toggle toggle; public Image childImage; public Color defaultColor = Color.white; public Color selectedColor = Color.red; void Start() { // 设置子物体默认颜色 childImage.color = defaultColor; // 添加Toggle事件处理程序 toggle.onValueChanged.AddListener(OnToggleValueChanged); } void OnToggleValueChanged(bool isOn) { // 根据Toggle的选中状态切换子物体颜色 if (isOn) { childImage.color = selectedColor; } else { childImage.color = defaultColor; } } } ``` 在这个示例中,我们为Toggle组件添加了一个事件处理程序,并在Start方法中设置了子物体的默认颜色。在事件处理程序中,我们检查Toggle的选中状态,并根据状态切换子物体的颜色。最后,将Toggle组件和子物体的Image组件分别分配给变量toggle和childImage。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值