Unity 3D UGUI Toggle用法教程

简介: UGUI Toggle用法教程本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar ——...

UGUI Toggle用法教程


本文提供全流程,中文翻译。

Chinar 坚持将简单的生活方式,带给世人!

(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例)



Chinar —— 心分享、心创新!

助力快速理解 UGUI Toggle 组件用法

为新手节省宝贵的时间,避免采坑!


Chinar 教程效果:
这里写图片描述



全文高清图片,点击即可放大观看 (很多人竟然不知道)


1

Description —— 说明


我们在项目开发的时候,有时需要一个按钮,来模拟 / 控制开关

此时,如果用 Button 的话,作为开发者还需要自己写一些判定逻辑

来告诉电脑,这个 Button 按钮是打开、还是关闭


众所周知,作为程序员、开发者都是比较懒的

能写10行代码实现的功能,绝不写11行,才是一个标准程序员的信仰!

由此: Toggle 组件诞生了,方便且简单的解决了上述问题

用法上和 Button 几乎没有区别,且动态的了模拟现实中开关按钮,为开发者提供了一个良好的解决方案

举个栗子黑白88
由简入深,下面我们先来了解下 Toggle 组件

附上开关组教程—— Unity 3D UGUI Toggle Group用法教程


2

Create Toggle —— 创建开关组件


强大的 Unity 在降低开发难度的路上,真是越走越远,甩的同行看不见屁股(有点夸张了)

Unity 提供了非常简单的创建 Toggle 方式:


我们只需要右键点击层次列表→ UI Toggle 即可完成创建

( 也可以自己搭建自己的模板,然后挂载 Toggle 组件是一样的 )

运行就可以直接看效果
举个栗子黑白88
这里写图片描述


3

Custom Template —— 可自定义调节模板


如图,可自由调节颜色/自由更换布局或是图片
举个栗子黑白88
这里写图片描述


4

Toggle —— 组件说明


Toggle 组件与 Button 不同之处:

1. Graphic :用来控制 Toggle 开关图片的显示/隐藏

2. IsOn :用来表示 Toggle 开关状态

3. Group :用来表示 Toggle 所属开关组/群(后边会讲到)

其他几乎完全一致
举个栗子黑白88
这里写图片描述


5

OnChangeValue —— 值改变时调用


当我们将需要调用的方法,手动添加到 OnChangeValue

发现跟 Button 一样,每点一下都会调用一次方法
举个栗子黑白88
手动添加监听方法:

using UnityEngine;


/// <summary>
/// Chinar专用测试类
/// </summary>
public class ChinarDemo : MonoBehaviour
{
    /// <summary>
    /// 绑定监听事件方法
    /// </summary>
    public void ListenInFunction()
    {
        print("调用");
    }
}

如果 代码动态添加监听,就无需在界面 OnChangeValue 手动添加

using UnityEngine;
using UnityEngine.UI;


/// <summary>
/// Chinar专用测试类
/// </summary>
public class ChinarDemo : MonoBehaviour
{
    void Start()
    {
        //找到组件,动态添加,Lambda表达式,精简!
        //与手动添加效果一致
        GameObject.Find("Toggle").GetComponent<Toggle>().onValueChanged.AddListener(isOn => print("调用"));
    }
}

运行/测试结果:
这里写图片描述


6

OnChangeValue IsOn —— (开关)控制监听调用


Toggle 组件与 Button 不同之处:

上边说到: IsOn :用来表示 Toggle 开关状态

那么当我们将需要调用的方法,进行开关的逻辑判定,手动添加到 OnChangeValue

就跟 Button 不一样了,不是每次都会调用,具体取决于函数逻辑

注意: IsOn 默认状态,就是运行后 开关按钮(Toggle)的默认状态
举个栗子黑白88
手动添加监听方法:

using UnityEngine;


/// <summary>
/// Chinar专用测试类
/// </summary>
public class ChinarDemo : MonoBehaviour
{
    /// <summary>
    /// 监听方法:可手动/动态绑定
    /// </summary>
    /// <param name="isOn"></param>
    public void OnClick(bool isOn)
    {
        if (isOn)
        {
            print("开");
        }
        else
        {
            print("关");
        }
    }
}

如果 代码动态添加监听,就无需在界面 OnChangeValue 手动添加

using UnityEngine;
using UnityEngine.UI;


/// <summary>
/// Chinar专用测试类
/// </summary>
public class ChinarDemo : MonoBehaviour
{
    void Start()
    {
        //找到组件,动态添加监听,Lambda表达式,精简!
        GameObject.Find("Toggle").GetComponent<Toggle>().onValueChanged.AddListener(isOn => print(isOn ? "开" : "关"));
    }
}

运行/测试结果:
这里写图片描述


7

Attention IsOn/Graphic —— 注意 IsOn!


注意: IsOn 默认状态,就是运行后 开关按钮(Toggle)的默认状态

Graphic:开关替换图片,可根据需求自由设定

IsOn True/False 决定图片是否显示/隐藏
举个栗子黑白88
这里写图片描述
至此:Toggle组件用法教程结束


支持

May Be —— 搞开发,总有一天要做的事!


拥有自己的服务器,无需再找攻略!

Chinar 提供一站式教程,闭眼式创建!

为新手节省宝贵时间,避免采坑!


先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


1 —— 云服务器超全购买流程 (新手必备!)

2 —— 阿里ECS云服务器自定义配置 - 购买教程(新手必备!)

3—— Windows 服务器配置、运行、建站一条龙 !

4 —— Linux 服务器配置、运行、建站一条龙 !





技术交流群:806091680 ! Chinar 欢迎你的加入


END

本博客为非营利性个人原创,除部分有明确署名的作品外,所刊登的所有作品的著作权均为本人所拥有,本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的,请及时和本博主进行联系,留言,Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的,使用时请注明文章或内容出处并注明网址
>

相关文章
|
10天前
|
图形学
Unity UGUI拖拽移动
本文介绍了两种UI拖拽实现方式:精准拖拽和克隆拖拽。精准拖拽通过计算鼠标点击点与UI中心的偏移量,使UI跟随鼠标移动,适用于需要精确控制的场景。代码中通过`IBeginDragHandler`、`IDragHandler`和`IEndDragHandler`接口实现拖拽逻辑。克隆拖拽则在拖拽时克隆一个UI对象,使其跟随鼠标移动,适合视觉效果需求较高的场景。代码中同样使用上述接口,并在拖拽结束时销毁克隆对象。具体实现可参考提供的代码示例。
|
10天前
|
图形学
Unity 获取鼠标位置下的UGUI或3D物体
本文总结了两种检测方法,分别用于UGUI和3D物体的检测。第一种方法`GetOverUIobj`专门用于检测鼠标悬停的UGUI元素,通过`GraphicRaycaster`实现。第二种方法`GetOverWordGameObject`则同时适用于UI和3D物体检测,利用`PhysicsRaycaster`进行射线检测。两者均返回悬停对象或null。
|
10天前
|
前端开发 图形学
unity UGUI跟随3D物体的坐标转换
在 Unity 中实现 UGUI 元素跟随 3D 物体,关键是将 3D 物体的世界坐标转换为屏幕或画布坐标。通过 Camera.WorldToScreenPoint 方法,可将 3D 物体位置映射到屏幕上,再更新 UGUI 元素的位置。代码示例展示了如何使用该方法,使 UGUI 图像跟随 3D 模型,并提供文字显示、图像和线条的显示/隐藏功能。
|
11天前
|
图形学
Unity UGUI实现鼠标拖动图片
在 Unity UGUI 中实现鼠标拖动图片功能,主要涉及事件检测、坐标转换和物体位置更新。根据鼠标移动量更新图片位置。代码示例展示了如何通过这些步骤实现拖动效果。
|
6月前
|
图形学 开发者 存储
超越基础教程:深度拆解Unity地形编辑器的每一个隐藏角落,让你的游戏世界既浩瀚无垠又细节满满——从新手到高手的全面技巧升级秘籍
【8月更文挑战第31天】Unity地形编辑器是游戏开发中的重要工具,可快速创建复杂多变的游戏环境。本文通过比较不同地形编辑技术,详细介绍如何利用其功能构建广阔且精细的游戏世界,并提供具体示例代码,展示从基础地形绘制到植被与纹理添加的全过程。通过学习这些技巧,开发者能显著提升游戏画面质量和玩家体验。
303 3
|
6月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
448 0
|
6月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
337 6
|
6月前
|
图形学 缓存 算法
掌握这五大绝招,让您的Unity游戏瞬间加载完毕,从此告别漫长等待,大幅提升玩家首次体验的满意度与留存率!
【8月更文挑战第31天】游戏的加载时间是影响玩家初次体验的关键因素,特别是在移动设备上。本文介绍了几种常见的Unity游戏加载优化方法,包括资源的预加载与异步加载、使用AssetBundles管理动态资源、纹理和模型优化、合理利用缓存系统以及脚本优化。通过具体示例代码展示了如何实现异步加载场景,并提出了针对不同资源的优化策略。综合运用这些技术可以显著缩短加载时间,提升玩家满意度。
557 5
|
5月前
|
测试技术 C# 图形学
掌握Unity调试与测试的终极指南:从内置调试工具到自动化测试框架,全方位保障游戏品质不踩坑,打造流畅游戏体验的必备技能大揭秘!
【9月更文挑战第1天】在开发游戏时,Unity 引擎让创意变为现实。但软件开发中难免遇到 Bug,若不解决,将严重影响用户体验。调试与测试成为确保游戏质量的最后一道防线。本文介绍如何利用 Unity 的调试工具高效排查问题,并通过 Profiler 分析性能瓶颈。此外,Unity Test Framework 支持自动化测试,提高开发效率。结合单元测试与集成测试,确保游戏逻辑正确无误。对于在线游戏,还需进行压力测试以验证服务器稳定性。总之,调试与测试贯穿游戏开发全流程,确保最终作品既好玩又稳定。
275 4
|
5月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
306 3