Unity UI -- (5)增加基础按钮功能
分析分析一些常见UI
良好的UI设计会清晰地和用户沟通。用户知道他们能和屏幕上哪些东西交互,哪些不能。如果他们进行了交互,他们也要清楚地知道交互是否成功。换句话说,UI要提供给用户很多反馈。
我们可以来看看在Unity里或者在计算机上的任何应用程序:
将鼠标悬停在一个按钮上,会发生什么?
选择一个按钮会发生什么?
当一个物体被选中,你是怎么知道它被选中的?
下面是一些实例:

如果按钮本身是深色的,则通常会让其变成浅色。



编辑按钮的颜色转换
Unity允许我们控制按钮的颜色反馈,以便更好地和用户沟通。
1. 保持Settings Button游戏物体处于选中状态,在Button组件中定位到Transition属性。这个属性默认值应该是Color Tint。

下图展示了Color Tint方式的默认颜色配置:

Highlighted Color: 对比Normal Color,只有一点点灰(具体数值可以点击颜色条查看)。当用户悬停在按钮上时的颜色。
Pressed Color:更加醒目的灰色。用户按住按钮时的颜色(比如鼠标按下不放)。
Selected Color:和Highlighted Color一样的颜色。当用户点击了按钮后的颜色,如果用户再次点击了其它按钮或屏幕的空白处,则按钮会恢复到Normal Color。本案例中这个颜色没有什么作用,因为后面我们实现的功能是当设置按钮被点击后,按钮会隐藏。
Disabled Color:深灰色。当按钮被禁用时的颜色。本案例中不涉及这种颜色的使用。
Color Multiplier:增加按钮上颜色色调的效果。如果我们有一个深色按钮或半透明按钮,这个属性会比较有帮助。
2. 运行场景,和设置按钮进行交互看看效果。
在Play模式中,可以尝试去改改这些颜色,看看效果。
增加On Click事件的action
接下来我们让应用能响应用户的点击。本案例中,用户可以通过点击设置按钮进入设置菜单界面。
当用户点击了设置按钮时,设置菜单会出现。


1. 在Hierarchy中,激活Title Text和Settings Button游戏物体,关闭Settings Menu游戏物体(可以右键点击此物体选择Toggle Active state,也可以选中游戏物体后在Inspector中的勾选或去勾选最上面的复选框)。



On Click是一个UnityEvent。UnityEvents可以在特定事件发生时,触发任意数量的动作。在本案例中,“Event”是指按钮的点击。
3. 选择“+”按钮,添加一个新的动作。

在设置按钮被点击时让设置菜单出现
为一个UnityEvent选择一个功能有两步:
1. 选择我们要执行功能的物体。
2. 从这个物体中选择一个我们想要执行的功能。
默认情况下,Object字段没有赋值,显示的是None(Object)。由于我们想要的是设置菜单出现,因此我们要将它赋值到这里。
1. 在Hierarchy中,点击并拖拽Settins Menu游戏物体到前面说的空Object字段。

2. 在No Funtion处的下拉菜单中选择GameObject > SetActive(bool)。当我们在这个菜单中进行查看时,实际是浏览了在这个物体上关联的脚本中的可用的功能方法。

现在我们会注意到,在Settings Menu物体右边会出现一个小的复选框。

3. 将这个复选框勾选上,表示我们会传递true到SetAcive()函数,让设置菜单变为Active。

让标题和设置按钮消失
当我们点击设置按钮时,我们同时希望标题和设置按钮也消失。这可以通过和上一小节中的类似的方法实现。添加两个On Click的功能函数,分别选择Settings Button和Title Text物体,并且这次将SetActive的参数设置为false即可。

挑战一下,实现从设置菜单点击退出按钮后返回标题界面的功能。返回标题界面后,需要重新显示标题和设置按钮。