UGUI--基础_基础组件_中

Color Tint：颜色变化

Highlighted Color：鼠标停留在响应区域内，图片的颜色。（高亮时的颜色）

Disabled Color：关闭Interactable后图片的颜色。（不可交互时的颜色）
Sprite Swap：图片变化

此时不再是变化图片颜色，可以直接显示其他图片。

13.交互组件：Button、Toggle、Slider、Scrollbar

Button的继承关系：public class Button : Selectable, IPointerClickHandler, ISubmitHandler, IEventSystemHandler

Toggle的继承关系：public class Toggle : Selectable, IPointerClickHandler, ISubmitHandler, ICanvasElement, IEventSystemHandler

Slider的继承关系：public class Slider : Selectable, IDragHandler, IInitializePotentialDragHandler, ICanvasElement, IEventSystemHandler

Scrollbar的继承关系：public class Scrollbar : Selectable, IBeginDragHandler, IDragHandler, IInitializePotentialDragHandler, ICanvasElement, IEventSystemHandler

Button的使用：

添加点击事件：GetComponent<Button>().onClick.AddListener(() => 点击方法);

Toggle的使用：

添加点击Toggle后bool值改变时的事件：GetComponent<Toggle>().onValueChanged.AddListener((bool值参数) => bool值改变的方法);

Slider的使用：（也是onValueChange）

GetComponent<Slider>().onValueChanged.AddListener((bool值参数) => bool值改变的方法);

Scrollbar的使用：（也是onValueChange，同上）

14Toggle Group

有时会有类似于单选或多选的需求，此时多个Toggle之间不再独立，需要一个Toggle Group组件统一管理它们。

创建一个空物体，然后添加Toggle Group组件：

其中：Allow Switch Off：是否允许子开关全部不勾选。如果不勾选此项，则子Toggle至少有一个需要勾选。

然后将相关Toggle设置为其子物体。结构如下：

Scene视图：

设置Toggle的Group：

Toggle Group可以简单解决单选和多选情况，但是如果遇到限制最大双选或三选之类的情形还是需要手动用代码控制。

15.Slider的简单应用：控制音量、进度条

进度条：

public class SliderApplicationTest : MonoBehaviour
    {
        private Slider mSlider;
        private void Start()
        {
            mSlider = GetComponent<Slider>();
            mSlider.value = 0f;
            StartCoroutine(ChangeValue());
        }
        private IEnumerator ChangeValue()
        {
            float progress = 0f;
            while (progress < 1.0f)
            {
                progress += 0.1f;
                //Slider平滑移动
                yield return new WaitUntil(() =>
                {
                    mSlider.value = Mathf.SmoothStep(mSlider.value, progress, 0.5f);
                    return progress - mSlider.value < 0.001f;
                });
            }
        }
    }

Slider进度条的背景图片，为了节省空间，图片可以使用一个经过九宫格切割的小圆片，然后拉伸而成。

16.Scrollbar和Slider的区别

Scrollbar：

Value：限制在0~1

Size：Scrollbar的Handle的大小

Number Of Steps：步数，0为连续。

区别在于：Scrollbar不能自定义Value的取值范围，但是可以自定义Handle的大小。

17.Scroll View滚动视图

Scroll View结构：

待显示的图片或文字需放在Content下，为其子节点。

滚动的时候实际上滚动的是Content内容框，如Scene视图：

Horizontal：勾选后，可以水平滚动。

Vertical：勾选后，可以竖直滚动。

Movement Type：移动类型，共有3种：

Unrestricted：不受限制的移动。
Elastic：有弹性的移动：滚动之后，若Content内容框超出Viewport框则会恢复，就像弹簧一样。

Elasticity：该值越大，形变恢复速度越慢；该值越小，形变恢复速度越快。
Clamped：截断的移动：Content内容框的滚动完全受到Viewport框的限制，无法超出，同时也无弹力。

Inertia：惯性，开启之后，滚动会有惯性效果。

Deceleration Rate：减速率，值越大惯性越大，值越小惯性越小。

Viewport：Scrollbar的视窗，自带有Mask组件，所以超出视窗部分不会显示。

Visibility：控制水平和竖直滚动条的显示隐藏。

Permanent：常驻显示，即不会隐藏。
Auto Hide：自动隐藏，会在运行时隐藏滚动条。
Auto Hide And Expand Viewport：自动隐藏的同时还会自动延伸Viewport的区域，直至充满Scrollbar。

18.Dropdown下拉列表

Game视图中的下拉列表：

下拉列表的结构：

Dropdown组件：

下拉列表由两部分组成：一部分是常驻显示的Label和Arrow；另一部分是只在点击Arrow后才会在下方显示的待选项框。
Dropdown List下拉列表中的元素是根据模板中的Item创建来的。在没有点击Arrow下拉箭头的时候，Dropdown List不会生成。
Dropdown组件中的Value值指的是下拉选项的索引值（由0开始）。
系统默认创建的下拉列表不包含Caption Image说明图片，如果需要需自行添加。

添加说明图片的方式：

step1：在常驻显示部分添加Image，调整好其大小方位，它就是常驻显示中显示说明图片的地方。

step2：在模板中的Item中添加Item Image，调整好其大小方位，它就是之后下拉框中每个下拉选项中显示说明图片的位置。

step3：将常驻显示中创建的Image拖拽到Dropdown组建中的Caption Image位置；将模板中的Item下的Item Image拖拽到Dropdown组件中的Item Image位置。

step4：在Dropdown组件中的Options内可以放置各个下拉选项想要显示的图片。同时加号键可以添加下拉项。（系统默认创建下拉项为3个）

19.InputField输入框

InputField输入框的结构：

Input Field组件：

Character Limit：字符限制，限制可输入字符数量，若为0则为无限制。

输入框的内容类型Content Type：

Standard：标准类型。可以输入任意字符。
Autocorrected：自动校正类型。只对移动端有效，若输入法有自动校正功能，则在输入此输入框时会启用输入法自带的自动校正功能。
Integer Number：限制只能输入整数。
Decimal Number：限制只能输入十进制（同上，也就是整数）。
Alphanumeric：限制只能输入字母和整数。
Name：限制只能输入汉字或者以大写字母开头的字母。
Email Address：几乎无限制。
Password：可输入任意字符，字符会替换为*隐藏起来。
Pin：会隐藏字符，但是限制只能输入整数。
Custom：自定义，如下图：

其中：

Line Type：行的类型有三种：
- Single Line：单行
- Multi Line Submit：多行，点击Enter键为提交输入框内容。
- Multi Line Newline：多行，但是点击Enter键为换行。
Input Type：输入类型有三种：
- Standard：标准输入，可输入任意字符。
- Auto Correct：自动校正（同上）。
- Password：密码，会隐藏输入字符。
Keyboard Type：键盘类型。

常用的是Default默认类型和Number Pad数字键盘，中数字键盘仅在移动端有效：移动端会自动弹出数字键盘供用户输入。

Character Validation：字符验证。

所有字符验证类型上文均有介绍，不再赘述。

Placeholder：为输入框显示提示文本。
Caret Blink Rate：输入框的插入符闪烁频率。
Caret Width：输入框的插入符宽度。
Custom Caret Color：自定义输入框插入符颜色。
Selection Color：选中输入文字时，输入文字上的填充颜色。
Hide Mobile Input：仅对IOS有效，不常用。
Read Only：是否只读，有时候在提交信息的时候，因为提交信息会有延迟，而在延迟的时候不希望用户能够更改待提交的信息，所以此时可以将输入框设定为只读，防止用户更改输入框的信息。
On Value Changed：在输入框值改变的时候响应。GetComponent<InputField>().onValueChanged.AddListener((value) => Debug.Log(value));
On End Edit：在提交输入框输入的信息后响应。GetComponent<InputField>().onEndEdit.AddListener((value) => Debug.Log(value));

20.Horizontal Layout Group水平布局

在Canvas画布下创建空物体，命名为”Horizontal Layout Group”，并添加Horizontal Layout Group组件。

组件默认值：

Padding：内间距。
Spacing：子项Item之间的间隔。
Child Alignment：子项的对齐方式。
Child Controls Size：控制子项的Size。如果勾选Width，则子项的宽度由水平布局组件决定，子项不可自行设置宽度。
Child Force Expand：子项是否充满整个布局。如果勾选，则子项不再受Spacing的影响而是自动计算合适的Item间隔，直至充满整个布局。

注意：

如果勾选Child Controls Size，子项会根据水平布局设置自动计算Size大小，然后Size变为只读不再可人工设置，此后如果取消勾选此项，Size大小也不会还原，只能通过撤销操作还原子项Size。
如果在勾选Child Controls Size的情形下不勾选Child Froce Expand则子项会不再显示。原因：布局组件控制子项Size，同时子项不再充满整个布局，则子项Size会被设置为默认值0。

水平布局结构：

Scene视图下的水平布局：

调整Horizontal Layout Group组件参数值，观察各个参数值的作用：

子项右中对齐，子项不再充满整个水平布局，所以此时子项间距Spacing产生作用了。

21.Grid Layout Group网格布局

网格布局可以替换水平、垂直布局。

Grid Layout Group组件：

Cell Size：网格布局组件的子项大小均由网格布局组件同一控制。
Spacing：子项间隔。
Start Corner：从哪个角开始排列，一般正常思维是从左上开始。
Start Axis：按什么轴排列。
Child Alignment：子项对齐方式。
Constraint：网格布局的约束，可以无约束得自由排列，或者限制最大行数或列数。

网格布局结构：

Scene视图：

22.Layout Element布局元素

Layout Element布局元素组件需要配合各类布局组件使用，Layout Element组件挂载在子项上，为子项在自动布局制定额外布局规则。

Ignore Layout：忽略布局组件的控制，从布局组件中剔除出来。
Min Width/Height：设置最小宽度/高度，无论布局空间是否足够，都必须满足设置的最小值。（最高优先级）
Preferred Width/Height：设置优先宽度/高度，在布局空间足够的条件下，设置此大小。（优先级小于”布局空间足够”；优先级低于布局组件中的Child Force Expand，所以要使此项有效，不得勾选布局组件中的Child Force Expand）
Flexible Width/Height：灵活的宽/高，此处设置的是权重值（比值），最小设置为1，不设置的时候默认为1。（优先级低于布局组件中的Child Force Expand，所以要使此项有效，不得勾选布局组件中的Child Force Expand）

注意：

Preferred Width/Height和Flexible Width/Height的优先级均低于布局组件中的Child Force Expand，所以要使此项有效，不得勾选布局组件中的Child Force Expand。
Min Width/Height在不勾选布局组件中的Child Force Expand时效果正常，在勾选布局组件中的Child Force Expand时，会先从整个布局的大小中剔除最小宽/高，然后再进行自动计算，最后剔除的最小宽/高会加回原子项中。例子如下：