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

效果如下
Unity自学之路(3)——利用Toggle制作分页选项卡面板_第1张图片

了解UGUI 中的Toggle 和Toggle Group

步骤
1.
新建一个Image,命名为“ Plane 1”,在该Image下新建一个相同尺寸的Image子组件,两个UI Image都选择UGUI自带的BackGround 为Source Image(方便学习)
改变两个Image的颜色,以便区分
这里写图片描述

Unity自学之路(3)——利用Toggle制作分页选项卡面板_第2张图片

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

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

Unity自学之路(3)——利用Toggle制作分页选项卡面板_第3张图片

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

Unity自学之路(3)——利用Toggle制作分页选项卡面板_第4张图片

Unity自学之路(3)——利用Toggle制作分页选项卡面板_第5张图片

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

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

Unity自学之路(3)——利用Toggle制作分页选项卡面板_第6张图片

你可能感兴趣的:(u3d)