UGUI（五）- Button

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的实用技巧~~