zoukankan      html  css  js  c++  java
  • uGUI练习(九) Toggle Button

    练习目标

    练习单选框,多选框

    Toggle Group:Toggle容器

    Toggle:单一的选项

    练习步骤

    1、创建一个Panel,命名TogglePanel,添加Toggle Group组件,可以看到ToggleGroup面板十分的简洁,那看来Toggle触发的事件要在child下完成了.

    image

    TogglePanel属性面板

    2、在TogglePanel下创建两个Toggle,命名ToggleRed,ToggleBlue,默认创建的Toggle,是这样的

    image

    属性面板如下( 属性标注出了可以拦截的事件):

    image

    3、在步骤1说过,ToggleGroup并没有提供可设置的属性,所以触发事件要在Toggle下完成了,通过观察Toggle,发现了下面这个事件

    image

    Toggle事件示例

    4、所以需要我们自己写脚本,来处理Toggle事件啦,创建ToggleScene.cs 绑定在TogglePanel上,

    using UnityEngine;
    using System.Collections;
    using UnityEngine.UI;
    
    public class ToggleScene : MonoBehaviour {
        public Toggle toggle1;
        void Start()
        {
            toggle1.onValueChanged.AddListener(OnValueChanged);
        }
    
        void OnValueChanged(bool check)
        {
            Debug.Log(check);
        }
    }

    单选框效果

    把Toggle1赋给脚本中的toggle1,Ctrl+P 运行

    image

    选择不同的Toggle,可以看到控制台Log

    image

    Toggle切换Panel效果

    下面使用Toggle来切换Panel,效果如下所示

    Toggle Button

    步骤

    1、继续上面的步骤,添加两个Panel,命名Red Panel ,Blue Panel,把这两个Panel叠在一起(位置和大小相同,颜色不同),隐藏其中一个

    image

    修改示例代码

    2、修改ToggleScene.cs

    using UnityEngine;
    using UnityEngine.UI;
    
    public class ToggleScene : MonoBehaviour
    {
        [SerializeField]
        private GameObject bluePanel, redPanel;
        [SerializeField]
        private Toggle toggleRed, toggleBlue;
    
        void Start()
        {
            toggleRed.onValueChanged.AddListener(OnValChangedRed);
            toggleBlue.onValueChanged.AddListener(OnValChangedBlue);
        }
    
        void OnValChangedRed(bool check)
        {
            bluePanel.SetActive(!check);
            redPanel.SetActive(check);
        }
        void OnValChangedBlue(bool check)
        {
            bluePanel.SetActive(check);
            redPanel.SetActive(!check);
        }
    }

    3、把ToggleScene绑定在 Toggle Panel上,并赋好值,按Ctrl+P 运行,即可切换Panel

    image

  • 相关阅读:
    Google androd性能优化经典
    java Linkedhashmap源码分析
    android smali代码注入 实战一
    开源库ActiveAndroid + gson使用
    android开源项目:图片下载缓存库picasso
    第四次博客作业-结对项目
    第九次作业
    第八次作业
    软件工程第三次作业——关于软件质量保障初探
    第七次作业
  • 原文地址:https://www.cnblogs.com/zhaoqingqing/p/3974777.html
Copyright © 2011-2022 走看看