Unity自学之路（3）——利用Toggle制作分页选项卡面板

效果如下

了解UGUI 中的Toggle 和Toggle Group

步骤
1.
新建一个Image，命名为“ Plane 1”，在该Image下新建一个相同尺寸的Image子组件，两个UI Image都选择UGUI自带的BackGround 为Source Image（方便学习）
改变两个Image的颜色，以便区分

2.
在父物体上用Add Compenent 新建一个Toggle 组件，Graphic 选择该父物体的子物体。这个时候开始运行可以发现点击Toggle 可以改变组件的颜色

3.
第二步骤已经实现后，Ctrl + D 复制两个 “ Plane 1 ”，分别命名为“Plane 2 ”，“Plane 3“
这个时候运行可以发现三个Toggle 均可以实现点击改变颜色

4.
为了实现类似开关的效果，三个选项卡中只能有一个被选上，在UI界面上新建一个新的Image，不需要显示图片，添加一个Toggle Group组件，同时将Plane 1,2,3全部移动到Toggle Group 组件下。
再把该组件拖给所有Plane 1,2,3 的 Toggle 中的Group字段上，这个时候就完成了开关的制作，此时运行可以看到点击完所有PLANE 之后就达成了我们要的效果，但是一开始的话所有选项卡都是开的。

5..
将2号，3号选项卡的Toggle 的Value（就是is on）关掉，这个时候一开始就只有第一个选项卡是开着的。

6.
新建一个Image 作为选项卡显示的面板，复制三份同时改变成不同颜色，用于区分。
在每个Plane的Toggle下的On Value Change(Boolean) 新建一个改变Value的方法，
把对应的选项面板拖到Gameobject 框里，方法选择GameObject 中的SetActive，这样Plane 的 Value 值就对应了选项面板的SetActive的 Value。
最后把第二个，第三个选项面板隐藏，点击运行，就实现了简陋的分页选项卡面板的制作。