一、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视图里面输入的字符串
}