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