制作复选框(Toggle)

怎样判断是否应当使用复选框

  复选框,就是对一个选项做上一个标记,表示这个选项已经被选中了。在游戏中,复选框一般用来做一些选项的控制,这种选项一般都只有两种答案:是和否。例如,单击一下开启音乐的复选框,这个复选框上就打了一个勾,然后音乐在游戏中就会开发;如果再单击一下,则这个勾会取消掉,然后音乐相会在游戏中关闭。这就是复选框最常见的用法。

  要判断是否要使用复选框时,可以遵循以下规律。

    (1)该功能只有两种选择状态:是、否。

    (2)该功能同一时间只能激活且必须激活一种选择状态。

    (3)该功能的两种状态为互斥关系,如果选择了一种状态,则自动关闭另一种状态。

  复选框其实就是一个开关,可以通过单击它来切换打开和关闭。一般开关的应用包括了选项勾选和页签。页签是复选框功能的一个高级应用。

创建复选框

  1.第一种方法:使用NGUI做好的预设。

  2.第二种方法:自己拼装复选框控件。

    (1)通过Unity顶部NGUI菜单Create中选择创建一个Sprite,然后设置它的图片,让这个Sprite作为复选框的底框。

    (2)因为需要这个复选框来接收单击事件,所以为这个底框Sprite制作一个BoxCollider,方法可以使用Unity顶部NGUI菜单中Attach->BoxCollider。

    (3)需要为这个复选框创建一个复选框的核心组件:UIToggle,选中底框后,通过选择AddComponent->NGUI->Interaction->UIToggle为这个复选框的底框附加一个UIToggle组件。

    (4)在这个底框的Sprite下面创建一个新的、表示选中状态的Sprite,比如一个勾。

    (5)将这个表示选中状态的Sprite拖动到底框UIToggle组件中StateTransition模块下的Sprite选项中,然后将底框的UIToggle组件中的Starting State勾上。

  一般情况下,会在复选概况的旁边写上一些文字,表示这个复选框代表的什么选项,即在底框物体下面创建一个Label作为子物体,然后调整位置即可。

复选框的核心组件UIToggle

  1.Group

    开关组的设置。默认为0,表示没有开关组。

    当有多个Toggle的Group星等且都不为0的时候,表示它们在同一个开关组当中,同一个开关组内的开关只允许打开一个。

    当一个Toggle不属于某一个开关组,既Group为0时,它就属于一个独体开关,可以通过自身来进行开关,当它属于某一个开关组时,就无法通过单击自身来进行开启和关闭了,因为一个开关组内必须要有一个开关是出于开启状态,它必须通过开关组内部的过个Toggle之间的切换来进行关闭和开启。

  2.Starting State

    是否初始状态,如果选中,则为初始状态,不选中则不是。

    这个设置项的意义在于:当开关是一个独立开关(Group为0)时,勾选Starting State意味着在初始状态下,开关属于开启状态。当开关属于一个开关组时,勾选Starting State则意味着在初始状态下,这个开关组中初始处于代开状态的为这一个开关。

    当一个开关组中有一个以上的开关都勾选了Starting State时,则以这个组中排在最后的一个勾选了Starting State的Toggle为默认开启的开关。

  3.State Transition 模块

    这个模块是为了设置勾选的时候的一些关联UI表现。

    Sprite是设置选中状态下要显示出来的Sprite。设置的方法为,将表示选中的Sprite拖动到这个选项中即可。

    Animation是设置状态切换时的动画。

    Transition是选择开关切换时的一个平滑效果,里面提供了两种选项进行选择:Smooth和Instant,如果选择Smooth,则在进行开关切换时,表示选中的那个Sprite的消失和出现会显示得更加平滑一些;如果选择Instant,则开关切换时,表示选中的那个Sprite的消失和出现会瞬间出现。

  4.On Value Change

    这里是设置当前开关状态改变时触发的函数。

时间: 2024-08-08 09:40:53

制作复选框(Toggle)的相关文章

使用CSS3制作酷炫防苹果复选框 自行测试!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ ba

单选复选框的制作

一.选择框 在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选. 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.当type="radio"时,为单选框

可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1,准备工作:VS2015 (15对WPF的支持变得异常的好,调试模式下允许自动更改属性.),随VS发布的Blend,几个基础类: 1 public class RelayCommand : ICommand 2 { 3 #region Fields 4 5 readonly Action<object

制作带复选框的ListView控件

实现效果: 知识运用   ListView控件的GridLines //设置是否在ListView控件中显示网格线 public bool GridLines{get;set} 和CheckBoxes属性 //设置listView控件中各数据项是否显示复选框 public bool CheckBoxes{get;set} 以及ListViewItem数据项的Checked属性 //判断是否选中此数据项中的复选框 public bool Checked{get;set} 实现代码: private

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

3种炫酷CSS3复选框checkbox动画特效

这是一款效果非常炫酷的CSS3复选框checkbox动画特效.这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果. 在线预览   源码下载 使用方法 HTML结构 普通的HTML checkbox复选框控件的样式非常的平淡.在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效.通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效. 在这些复选框动画的DEMO中,使用的都是无序

样式化复选框(Styling Checkbox)

复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态  未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图:  blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力: input[type="checkbox&

关于textjs的tree带复选框的树

通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js (该文件中可以写一些触发事件) Ext.namespace('Ext.ysq');//Ext.namespace方法定义一个管理类的包,类似Java中定义的包名,目的是建立自己的一个对象名,方便管理,防止重复 Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree

Android实战之ListView复选框

项目中有用到复选框的例子,啊啊......在网上查找有关资料,大多都是过于繁琐,所以自己决定写个这个方面的demo... 先给个效果图: 在ListView中添加复选框主要注意以下几个问题: 1.ListView item与item中的控件抢焦点的问题(必须设置CheckBox不可点击和不能获取焦点,让ListView得到焦点) 2.ListView的setChoicMode(int choiceMode)选择模式():有choiceMode : CHOICE_MODE_NONE, CHOICE