关于Unity中UI中的Slider,Toggle和InputField等节点

一、Slider节点

1.创建一个Canvas

2.对Canvas进行一些初始化操作

3.创建一个Image的UI节点在Canvas下面作为子节点

4.把Image铺满整个Canvas,把宽高设置为640X960

5.创建一个Slider的UI节点在Canvas下面作为子节点

6.Slider滑动条可以修改宽高,背景颜色,已经拉伸颜色,圆钮样式

7.修改滑动条背景Slider--> Background,指定图片或颜色。

8.修改滑动条进度的颜色Slider-->Fill Area-->Fill,指定图片或颜色。

9.修改滑动点与按钮一样Slider-->Slider组件-->Transition-->颜色/图片/动画/过度效果+各种状态的样子

10.滑动的值被改变: 抛出on value Change事件。可以写一个监听器来捕捉事件

(1)写一个Game_scane脚本,挂载到Canvas节点下面

(2)Game_scane脚本中写一个方法,参数记得是float类型的:

    public void on_slider_value_change(float per) {
Debug.Log(per);
}

这样会输出当前的滑动条的值

(3)获得当前滑动条的进度值[0, 1],可以修改这个值[min, max];

11.设置Slider的初始值

(1)写一个Game_scane脚本,挂载到Canvas节点下面

(2)Game_scane脚本中写:

public class game_scene : MonoBehaviour {
  Slider slider;
 void Start () {
  // 把这个精度条设置成80%
  this.slider = this.transform.Find("Slider").GetComponent<Slider>();
 this.slider.value = 0.8f;
}

12.输出最小最大的滑动范围

public class game_scene : MonoBehaviour {
  Slider slider;
 void Start () {
   this.slider = this.transform.Find("Slider").GetComponent<Slider>();
  Debug.Log(this.slider.minValue + "-" + this.slider.maxValue);
}


二、Toggle节点

1.创建一个Canvas

2.对Canvas进行一些初始化操作

3.创建一个Toggle的UI节点在Canvas下面作为子节点

4.节点的Rect Transform大小是响应点击的范围

5.修改背景Toggle-->Background,指定图片或颜色。

6.修改字Toggle-->Label,修改字。

7.修改勾选框的样式Toggle-->Background-->Checkmark,颜色或图片。

8.修改滑动点与按钮一样Toggle-->Toggle组件-->Transition-->颜色/图片/动画/过度效果+各种状态的样子。

9.获得勾选框的值isOn。True或者False。

10.Toggle勾选过渡渐变,没选则没有渐变。

11.Interactable勾选时可以改变勾选框的值,不勾选不能改变。

12.每次修改勾选框的值,抛出on value change事件;

(1)写一个Game_scane脚本,挂载到Canvas节点下面

(2)Game_scane脚本中写一个方法,参数记得是bool类型的:

    public void on_toggle_value_change(bool is_on) {
Debug.Log(is_on);
}

这样在改变勾选框的时候会输出True或者False。

13.设置Toggle的是否可以勾选

(1)写一个Game_scane脚本,挂载到Canvas节点下面

(2)Game_scane脚本中写:

public class game_scene : MonoBehaviour {
Toggle toggle;
void Start () {
this.toggle = this.transform.Find("Toggle").GetComponent<Toggle>();
this.toggle.interactable = false;
}

运行后发现组件Toggle的Interactable属性勾选框空了,而且Game视图中的勾选框不能选。此时如果在运行时手动打钩Interactable,Game视图中的勾选框就又可以点击了。

14.编程实现 男女选择,二选一。

(1)创建一个空节点check_sex

(2)创建两个子Toggle节点在check_sex节点下

(3)更改这两个Toggle节点的Label为male和famale,并调整一下宽高,使得有效点击区域小一点

(4)创建一个脚本叫做check_male的,挂载在check_sex节点下。

public class check_male : MonoBehaviour {
public Toggle female;//记得把female节点拖进去
public Toggle male;//记得把male节点拖进去 // Use this for initialization
void Start () {
this.male.isOn = true;
this.female.isOn = false;
} // Update is called once per frame
void Update () { } public void on_male_click(bool is_on) {
if (is_on) {
this.female.isOn = false;
}
else {
this.female.isOn = true;
}
} public void on_female_click(bool is_on) {
if (is_on) {
this.male.isOn = false;
}
else {
this.male.isOn = true;
}
}
}

把这两个监听器的方法分别添加在male和famale的事件监听中

三、InputField节点

1.修改Input的背景图片。

2.修改输入的提示: InputField-->Placeholder-->Text

3.设置和修改内容:  InputField-->Text-->Text

4.设置是否可编辑: InputField-->Interactable;

5.设置选择字的时候的颜色:InputField-->Input Field-->Selection Color

6.设置不能修改:InputField-->Input Field-->read Only

7: 当编辑改变的时候 抛出 value change事件。   

8: 当回车的时候,抛出input end 事件。

9.两个事件的触发函数,记得把他们添加到InputField节点下

    public InputField editbox;
void Start () {
this.editbox.text = "Hi";
} // 当编辑的文本改变的时候调用;
public void on_edit_value_change(string str) {
Debug.Log("on_edit_value_change" + str);//这里的str不是在Game视图里面输入的字符串,而是在Inspector视图面板填的传入的参数
} public void on_end_edit_click(string value) {
Debug.Log("on_end_edit_click:" + value);//这里的value就是在Game视图里面输入的字符串
}
上一篇:openssl创建自己的CA certificate


下一篇:迷你MVVM框架 avalonjs 0.95发布