UGUI Button 是 UI 与用户交互的控件之一,是最常用也是最重要的控件之一
创建 Button
在 Hierarchy 视图中右键 -> UI -> Button,创建一个 Button 控件。
Button 属性
属性 | 简述 |
---|---|
Interactable | 点击是否有效 |
Transition | 状态切换模式 |
Navigation | 导航 |
On Click | 点击事件 |
Interactable 如果勾选,点击按钮不会触发点击事件
Transition 按钮的状态有五种,此属性是指各状态(或状态切换)时的表现
源码中的枚举
public enum Transition
{
None = 0,
ColorTint = 1,
SpriteSwap = 2,
Animation = 3
}
//按钮的状态
protected enum SelectionState
{
Normal = 0,
Highlighted = 1,
Pressed = 2,
Selected = 3,
Disabled = 4
}
-
Color Tint:颜色切换模式
Target Graphic:默认图片,按钮要控制改变的组件
Normal Color:默认颜色
Highlighted Color:高亮颜色
Pressed Color:按下颜色
Selected Color:选中时(焦点)的颜色
Disabled Color:不可用颜色
Color Multiplier:颜色乘数0-1
Fade Duration:持续时间/过渡时间
-
Sprite Swap:图片切换模式
Target Graphic:按钮要控制改变的组件
Highlighted Sprite:高亮状态下的图片,鼠标放在按钮上(Hover状态)就会触发;手游中不存在Hover状态,可为空。
Pressed Sprite:按下状态下的图片,鼠标按下切换成该状态。
Selected Sprite:选中时(焦点)状态下的图片
Disabled Sprite:不可用状态下的图片,按钮禁用后显示的图片。
-
Animation 动画切换模式
此模式下,需要 Animator 组件,手动添加或点击下图添加
添加完后
Animation 模式下的五种状态与 Animator 中的各 State 对应
Navigation 导航。这里是 UI 中的元素导航,区别于地形中的寻路。用输入设备(如手柄、PC键盘等)的上下左右键来控制当前选中的 UI 控件,使之触于焦点状态
- Visualize 是用于在 Scene 视图中显示导航线。
UGUI 中的 Navigation 是基础功能组件,除 Button 外,SliderBar、Toggle 等 UI 组件中,也存在 Navigation 的实例
None:关闭导航
Automatic:自动识别最近的一个控件
Horizontal:水平方向导航到上/下一个控件
Vertical:垂直方向导航到上/下一个控件
Explicit:指定各方向键所导航到的控件
将控件中的 Selected Color 指定为 深色 , 如 红色,便于观察当前选中的 控件。下面是运行时通过 PC 键盘的上下左右键来控制导航的效果
Button 点击事件的注册
常用的有两种方法
先来写个脚本,脚本中的 ModifyRectTrans 函数先照抄,下一章会讲 RectTransform 组件
效果图
代码
using UnityEngine;
using UnityEngine.UI;
public class ButtonSample : MonoBehaviour
{
[SerializeField] private RectTransform m_RectTrans;
[SerializeField] private Button m_Button;
private bool m_Clicked;
void Start()
{
//如果 Button Event 采用 Inspector 面板指定,则注掉下面事件注册
//不带参数的事件注册
m_Button.onClick.AddListener(OnBtnClick);
//带参数的事件注册
m_Button.onClick.AddListener(
delegate
{
OnBtnClick("11111");
}
);
}
/// <summary>
/// 带参数事件
/// 如果在 Inspector 视图指定事件,事件方法必须为 public
/// </summary>
/// <param name="str"></param>
public void OnBtnClick(string str)
{
Debug.Log($"点击生效 {str}");
OnBtnClick();
}
/// <summary>
/// 不带参数事件
/// 如果在 Inspector 视图指定事件,事件方法必须为 public
/// </summary>
public void OnBtnClick()
{
m_Clicked = !m_Clicked;
ModifyRectTrans(m_Clicked);
}
void ModifyRectTrans(bool b)
{
if(b)
{
m_RectTrans.anchorMin = new Vector2(0, 1);
m_RectTrans.anchorMax = new Vector2(0, 1);
m_RectTrans.anchoredPosition = new Vector3(200, -100, 0);
}
else
{
m_RectTrans.anchorMin = new Vector2(0.5f, 0.5f);
m_RectTrans.anchorMax = new Vector2(0.5f, 0.5f);
m_RectTrans.anchoredPosition = Vector3.zero;
}
}
}
脚本挂在 Canvas 上(其他Gameobject上也行)并对脚本中变量拖拽赋值
Inspector 指定事件
上图中的两个方法是上文脚本代码中的事件方法,必须是 public 方法才会显示在菜单里
代码中添加监听事件
如上脚本代码中
void Start()
{
//如果 Button Event 采用 Inspector 面板指定,则注掉下面事件注册
//不带参数的事件注册
m_Button.onClick.AddListener(OnBtnClick);
//带参数的事件注册
m_Button.onClick.AddListener(
delegate
{
OnBtnClick("11111");
}
);
}
其他事件添加方法
-
挂载 EventTrigger 组件
-
代码实现 EventTrigger
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class EventTriggerSample : MonoBehaviour
{
[SerializeField] private Button m_Buttton;
private void Start()
{
SetTrigger();
}
void SetTrigger()
{
EventTrigger trigger = m_Buttton.transform.GetComponent<EventTrigger>();
EventTrigger.Entry entry = new EventTrigger.Entry();
//F12 点进去可以查看更多可绑定的事件类型
entry.eventID = EventTriggerType.PointerClick;//鼠标点击事件
entry.callback = new EventTrigger.TriggerEvent();
entry.callback.AddListener(OnBtnClick);
trigger.triggers.Add(entry);//所有在此EventTrigger中注册的函数。存再triggers
}
private void OnBtnClick(BaseEventData arg0)
{
Debug.Log("点击成功");
}
}
- 继承 IPointerXXXHandler
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class EventTriggerSample : MonoBehaviour, IPointerClickHandler
{
public void OnPointerClick(PointerEventData eventData)
{
Debug.Log($"点击成功 {eventData}");
}
}
欢迎关注公众号,定期分享Unity的实用技巧~~