UnityGUI系统之Toggle、Scrollbar

一、Toggle

1、Toggle组件是一个开关组件，通常用于控制声音的开关,背包系统等，关卡难度的选择等。

2、Toggle组件的基本组成：

Background :指定控件的背景颜色
Checkmark ：勾选的图形背景的颜色
Label :控件的文字

3、Toggle组件的基本属性

Interactable ：是否激活Toggle组件，勾选则是激活

Transitionl : 设置Toggle的不同状态样式，其实Toggle组件和Button组件类似，所有这里的设置和Button组件的设置一样。

Is On ：设置Toggle组件是否默认勾选，勾选则组件是默认勾选的。

Graphic :设置勾选时的图标样式.

Group : 用于分组，处于同一组的Toggle控件同时只能勾选一个。Toggle控件的Group属性中添加同一个带有Toggle Group组件的对象表示这几个Toggle控件属于同一个组

运行结果：

3、Toggle控件的事件回调函数：
Toggle的回调函数没有返回值，但有一个Bool值参数，当Toggle控件被勾选时则Unity会自动调用事件函数，并传递一个true值，当Toggle没有勾线时则传递false。

public void ToggleTest(bool test)
    {
        if (test == true) {
            print("勾选了控件 ："+test);
        }

        if (test == false) {
            print("没有勾线控件 ："+test);
        }

    }

运行结果 ：

二、Scrollbar

1、Scrollbar是一个滚动条组件，通常用于滑动滚动条来实现显示区域的滚动。

2、滚动条的组成：

Scrollbar :滚动条的背景样式
Handle :滚动条上按钮的样式

3、Scrollbar的基本属性：

Interactable ：是否启用Scrollbar组件，勾选则是启用

Transition ：设置滚动条上按钮的基本属性

Hadle Rect ：设置按钮的Image组件

Direction : 设置滚动条的滑动方向

Left To Right :从左到右

Bottom To Top :从下往上

Value :滚动条当前滚动值。

Size :设置滚动条上按钮的大小

4、滚动条的事件回调
滚动条的事件回调函数没有返回值，但有一个float类型的值，Unity会把当前滚动条滚动的值传递给回调函数。

    public void ScrollTest(float vual)
    {
        print ("当前值为" + vual);
    }

运行结果：

三、通过Scrollbar组件制作滚动效果的实现

在实现滚动效果之前我们需要使用组件：
Mask组件 ：这个组件的作用是将对显示在父物体上层的子物体显示区域进行裁剪，当超出父物体显示区域的子物体部分就会被裁剪掉不可见 。

列如 ：

Image作为Panel的子物体但Image的显示区域大于Panel，所有Image超出的部分都被裁剪掉了。

ScrollRect组件 ：这个组件的作用是使在其上层的物体具有滑动的功能，只需要将需要在父控件区域滑动的控件指定到这个面板中。

Horizontal 、 Vettical :设置是否能够左右和上下滑动。

Movement Type :设置物体的滑动方式：
Unity3D提供了几种方式：

Unrestricted :自由滑动不受限制，可以滑动到任何地方去。

Elastic :弹性滑动，使可视区域保持在滚动范围类。当内容超出滚动区域时，会将内容弹回来显示在可视区域。

Elasticity :当选择为Elastic模式时，则有这个选项用于设置回弹时的力量大小，值越大，回弹力越小。回弹速度越慢。

Clamped : 禁止滑动

Inertia :设置物体滑动的时候是否具有惯性，即物体在没有受力的时候继续运动。

Deceleration Rate : 设置物体在靠惯性运动时的让物体如何停止运动，值为0时则立即停止运动，值为1时永远不停止运动。

Horizontal Scrollbar、Vettical Scrollbar ：设置水平滚动条空间与垂直滑动条

控件组成为：

四、ScrollRect组件的事件回调

在这个回调函数中会传递Scrollbar中按钮在整个滑动条中的位置信息，参数类型为 Vector2D类型，当控件没有超出父控件区域时则通常为[0,1],通过这个值将子控件分为三个区域，0 0.5 1 都代表一个区域。

public void ScorllTest(Vector2 vec2)
    {
        print("X坐标为："+vec2.x);
        print("Y坐标为：" + vec2.y);
    }
}

我们限制了在上下方向移动，所以Y一直为零
运行结果：