Unity：UGUI笔记(一)——三大基础控件、组合控件

写在前面：

写本系列(自用)的目的是回顾已经学过的知识、记录新学习的知识或是记录心得理解，方便自己以后快速复习，减少遗忘。这里只有代码相关部分，没有面板部分。

一、三大基础控件

1、Image

(1)RectTransform

在Hierarchy窗口右键->UI->创建Image对象。

UGUI中位置信息是继承了Transform的RectTransform：

可以直接通过父类装子类的方式使用RectTransform：

void Start()
{print((this.transform as RectTransform).sizeDelta);
}

(2)Image

可以直接获取Image对象的脚本，就可以点出Inspector窗口上的所有信息：

其实在代码里常用的信息一般是修改Image关联的图片，因此这里只演示部分。

可以通过img.sprite修改Image关联的图片，img.color修改Image叠加的图片，.sizeDelta可以修改图片大小。

void Start()
{Image img = this.GetComponent<Image>();img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");(transform as RectTransform).sizeDelta = new Vector2(200, 200);img.color = Color.red;
}

运行前：

运行后：

2、Text

(1)text的使用

在Hierarchy窗口右键->UI->Legacy->Text创建老版本Text对象。

同样的，Text大多数都在Inspector窗口配置即可，代码一般只会修改Text文本内容：

void Start()
{Text txt = this.GetComponent<Text>();txt.text = "hhhhh";
}

运行后：

(2)富文本

如下所示，在之前NGUI也有提过。

3、RawImage

一般Image关联的是精灵图片，RawImage关联的是大图片，可以是Sprite类型、Texture类型。RawImage用于背景图。在Hierarchy窗口右键->UI->创建RawImage对象。

RawImage一般也很少用代码修改，可以直接.texture修改RawImage的图像，.uvRect修改位置信息。

void Start()
{RawImage rawImage = this.GetComponent<RawImage>();rawImage.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");rawImage.uvRect = new Rect(0, 0, 1, 1);
}

二、组合控件

1、Button

(1)代码修改参数

可以在Hierarchy窗口右键->UI->Legacy->Button创建老版本Button对象。

代码修改Button的场景不多，和上文三个组件相同，也是获取Button脚本点出面板参数进行修改。

其中，.interactable控制的是按钮是否激活。如果是true为激活，按钮可以按下；如果是false按钮会变灰，不能响应点击。

.transition控制的是按钮状态变化（鼠标经过、按下）时的效果，设置为None就没有任何效果。

void Start()
{Button btn = this.GetComponent<Button>();btn.interactable = true;btn.transition = Selectable.Transition.None;
}

(2)事件函数

事件函数有两种添加方式。Button事件在按钮点击时会调用事件函数，在按钮内部完成一次按下抬起才算完成了一次按钮点击。

第一种方式为代码拖曳。在脚本中书写public函数（注意必须是public，private函数不能拖曳响应）。然后在Inspector窗口中关联即可：

void Start()
{Button btn = this.GetComponent<Button>();
}//在按钮内部完成一次按下抬起才算完成了一次按钮点击
//拖曳代码
public void ClickBtn()
{print("按钮点击");
}

也可以通过关联代码的方式：可以直接使用lambda表达式也可以直接为事件添加函数：

void Start()
{Button btn = this.GetComponent<Button>();btn.onClick.AddListener(ClickBtn2);btn.onClick.AddListener(() =>{print("按钮点击3");});
}private void ClickBtn2()
{print("按钮点击2");
}

移除事件的方式：注意，这样并不会移除拖曳添加的事件。

void Start()
{Button btn = this.GetComponent<Button>();btn.onClick.RemoveListener(ClickBtn2);btn.onClick.RemoveAllListeners();
}

2、Toggle

(1)代码修改参数

可以通过右键->UI->Toggle创建一个Toggle：

同样的，可以获取Toggle脚本后，通过代码控制Inspector窗口上的值。

其中最常用的API是tog.isOn，可以获取当前Toggle是否被选择，这个值也可以被打印出来。

void Start()
{Toggle tog = this.GetComponent<Toggle>();tog.isOn = true;print(tog.isOn);
}

如果想制作Toggle单选框，即多个Toggle为一组，可以选择ToggleGroup。创建一个父对象（可以是空对象），为其挂载Toggle Group脚本：

之后就可以将所有需要作为单选框的Toggle设置为该对象的子对象（这一步主要是为了方便管理，不设置为父对象也可以）。然后在每个子对象的Inspector页面上将父对象拖入至Group处：

这样，这些子对象中就只能有一个Toggle被选择了。

Allow Switch Off勾选项的作用是，是否允许一个Toggle都不选择，如果勾选了Allow Switch Off，那么就允许，如果没勾选就是不允许。

在代码中，togGroup.ActiveToggles()可以获取当前所有被选择（激活）的Toggle对象，这样就能通过遍历得到所有被选择的对象。如下：

void Start()
{Toggle tog = this.GetComponent<Toggle>();ToggleGroup togGroup = this.GetComponent<ToggleGroup>();togGroup.allowSwitchOff = false;foreach(Toggle item in togGroup.ActiveToggles()){print(item.name + " " + item.isOn);}
}

(2)事件函数

Toggle的事件函数是onValueChanged，书写方式和Button一样，一种是代码拖曳，一种是直接通过代码添加。直接通过代码添加的方式会更加常用，这里不过多赘述这两种方式。

需要注意的是，toggle的事件选择函数必须传入一个bool参数，这个参数代表的就是当前Toggle是否被选中：

void Start()
{Toggle tog = this.GetComponent<Toggle>();tog.onValueChanged.AddListener((isOn) =>{print("状态改变2" + isOn);});
}//必须要这个bool参数，拖曳时一定要选择动态的
public void ChangeValue(bool isOn)
{print("状态改变" + isOn);
}

3、InputField

(1)代码修改参数

InputField是输入框，可以通过Create-UI-Legacy-InputField创建一个输入框：

其中Enter text是提示词，一般不修改。在输入框中，一般会通过代码获取的就是输入框的内容，可以通过input.text获取。

void Start()
{InputField input = this.GetComponent<InputField>();print(input.text);input.text = "123";
}

(2)事件函数

输入框有两个事件函数，一个是改变输入内容时调用的事件函数onValueChanged，一个是结束输入时调用的事件函数onEndEdit。同样也是有两种方式：代码拖拽和事件添加：

void Start()
{InputField input = this.GetComponent<InputField>();input.onValueChanged.AddListener((str) =>{print("改变的输入内容2" + str);});input.onEndEdit.AddListener((str) =>{print("结束输入时的内容2" + str);});}public void ChangeInput(string str)
{print("改变的输入内容" + str);
}public void EndInput(string str)
{print("结束输入时的内容" + str);
}

需要注意的是，在拖拽事件函数时，需要选择Dynamic处的函数。

4、Slider

(1)代码控制

Create-UI-Slider即可创建一个Slider。

一般只会通过代码获取Slider当前的值。

void Start()
{Slider s = this.GetComponent<Slider>();print(s.value);
}

(2)事件函数

Slider的事件函数是onValueChanged，必须传入float参数，该参数表示Slider当前的值。

void Start()
{Slider s = this.GetComponent<Slider>();s.onValueChanged.AddListener((v) =>{print(v);});
}//必须传入float参数
public void ChangeValue(float v)
{print(v);
}

5、ScrollBar

(1)代码控制

ScrollBar一般配合ScrollView使用。右键Create-UI-Scrollbar即可创建一个ScrollBar。

一般不太会通过代码设置ScrollBar的参数。

void Start()
{Scrollbar sb = this.GetComponent<Scrollbar>();print(sb.value);print(sb.size);
}

(2)事件函数

ScrollBar的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个float参数，代表当前拖动条的位置。

void Start()
{Scrollbar sb = this.GetComponent<Scrollbar>();sb.onValueChanged.AddListener((v) =>{print(v);});
}public void ChangeValue(float v)
{print(v);
}

6、ScrollView

(1)代码控制

右键Create-UI-ScrollView即可创建一个ScrollView。

可以看出，ScrollView上有两个ScrollBar。这两个ScrollBar可以在Scroll Rect脚本中删除。

需要注意的是ScrollView上挂载的脚本名字稍微有点变化，为Scroll Rect。可以通过.content.sizeDelta改变ScrollView内容部分的大小，可以拖动多少都是根据这个尺寸来决定的。

.normalizedPosition表示滚动区域当前滚动的位置。

void Start()
{ScrollRect sr = this.GetComponent<ScrollRect>();//改变内容的大小，具体可以 拖动多少都是根据它的尺寸来的sr.content.sizeDelta = new Vector2(200, 200);sr.normalizedPosition = new Vector2(0, 0.5f);
}

(2)事件函数

ScrollView的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个Vector2参数，代表当前滚动区域上滚动的位置。

void Start()
{ScrollRect sr = this.GetComponent<ScrollRect>();sr.onValueChanged.AddListener((Vector2 vec) =>{});
}public void ChangeValue(Vector2 vec)
{print(vec);
}

7、Dropdown

(1)代码控制

Dropdown是下拉列表，可以通过Create-UI-Legacy-InputField创建一个下拉列表。

可以通过.value来获得当前选择的索引值，.options[dd.value].text可以获得当前选择索引值的内容，例如Option A。

可以通过.options.Add()添加新的选择项。括号内的选项可以这样创建new Dropdown.OptionData(选项名)

void Start()
{Dropdown dd = this.GetComponent<Dropdown>();print(dd.value);print(dd.options[dd.value].text);dd.options.Add(new Dropdown.OptionData("123123"));
}

(2)事件函数

Dropdown的事件函数是onValueChanged，同样有两种使用方式，代码拖曳和直接通过代码添加。需要注意的是，必须传入一个int参数，代表当前选择的选项。

void Start()
{Dropdown dd = this.GetComponent<Dropdown>();dd.onValueChanged.AddListener((int value) =>{print(value);});
}public void ChangeValue(int value)
{print(value);
}