Unity自定义UI组件(四)双击按钮、长按按钮

最近在看UGUI源码的时候想到群里有人问过该怎么在Unity中实现按钮双击，有一个种简单的办法，就是写一个脚本进行挂到Button的游戏物体上，

对Button点击的两次时差来判断是否双击成功，但是那个代码总是随着我们切换工程可能还要再写一遍，而且那样编写的代码的事件监听也比较

麻烦一些。下面我们将一种更为方便创建，容易监听，像UGUI提供的Button一样便捷，并且在不同的工程之间可以完全复用。

主要内容

1.双击按钮
2.长击按钮

实现效果

实现方法

1.在UnityEngine.UI下一个DefaultControls类型，其中提供了创建UGUI中Text、Image、Button等所有的UI组件的公有方法只需要调用就可以生成一个UI组件。利用这个公有方法，我们就可以一键创建我们想要的双击按钮和长击按钮了。我们新建一个类在Editor文件夹下，用来创建这两种按钮。

public class SpringGUIMenuOptions
{
[MenuItem("GameObject/UI/Buttons/DoubleClickButton" , false , 2065)]
public static void AddDoubleClickButton( MenuCommand menuCommand )
{
GameObject dcButton = SpringGUIDefaultControls.CreateDoubleClickButton(GetStandardResources());
//这个方法对创建的UI进行配置
//比如创建唯一的名字
//根据是否选中画布创建父级
//是UGUI源码的一部分，我们只需要复制到我们脚本中来即可，稍后我会附上源码
PlaceUIElementRoot(dcButton,menuCommand);
}

[MenuItem("GameObject/UI/Buttons/LongClickButton" , false , 2066)]
public static void AddLongClickButton( MenuCommand menuCommand )
{
GameObject lcButton = SpringGUIDefaultControls.CreateLongClickButton(GetStandardResources());
PlaceUIElementRoot(lcButton,menuCommand);
}
}

2.新建一个非Eidtor类型SpringGUIDefaultControls，仿造UnityEngine.UI.DefaultControls下面生成UI组件的方法写入CreateDoubleClickButton和CreateLongClickButton方法。其中DoubleClickButton.cs和LongClickButton.cs是这个两个按钮实现的关键部分。

public class SpringGUIDefaultControls
{
public static GameObject CreateDoubleClickButton( Resources resources )
{
GameObject dcButton = DefaultControls.CreateButton(convertToDefaultResources(resources));
dcButton.name = "DoubleClickButton";
dcButton.transform.FindChild("Text").GetComponent<Text>().text = "双击按钮";
Object.DestroyImmediate(dcButton.GetComponent<Button>());
dcButton.AddComponent<DoubleClickButton>();
return dcButton;
}

public static GameObject CreateLongClickButton( Resources resources )
{
GameObject lcButton = DefaultControls.CreateButton(convertToDefaultResources(resources));
lcButton.name = "LongClickButton";
lcButton.transform.FindChild("Text").GetComponent<Text>().text = "长击按钮";
Object.DestroyImmediate(lcButton.GetComponent<Button>());
lcButton.AddComponent<LongClickButton>();
return lcButton;
}
}

注意

这些代码我们也可以直接写到SpringGUIMenuOptions.AddDoubleClickButton和AddLongClickButton方法中，代码如下，但是我们按照UGUI的方式拆分到两个类中方便以后我们拓展其他的UGUI组件。

[MenuItem("GameObject/UI/Buttons/DoubleClickButton" , false , 2065)]
public static void AddDoubleClickButton( MenuCommand menuCommand )
{
GameObject dcButton = DefaultControls.CreateButton(GetStandardResources());
PlaceUIElementRoot(dcButton,menuCommand);
dcButton.name = "DoubleClickButton";
dcButton.transform.FindChild("Text").GetComponent<Text>().text = "双击按钮";
Object.DestroyImmediate(dcButton.GetComponent<Button>());
dcButton.AddComponent<DoubleClickButton>();
}

3.下面是编写DoubleClickButton和LongClickButton的关键代码，直接继承至Button类型，重写OnPointerDown()、OnPointerUp()、OnPointerExit()。利用System.DateTime对点击的时间进行记录，然后计算点击时，小于400ms算是双击成功，600ms算是长击成功。因为是继承Button类型，所以我们还能保留Button按钮点击时的效果包括颜色的渐变，以及我们也可以监听onClick单击方法。具体如下：

//双击按钮
[AddComponentMenu("UI/DubleClickButton")]
public class DoubleClickButton : Button
{
[Serializable]
public class DoubleClickedEvent : UnityEvent {}

[SerializeField]
private DoubleClickedEvent m_onDoubleClick = new DoubleClickedEvent();
//这个是双击成功后激活的事件
public DoubleClickedEvent onDoubleClick
{
get { return m_onDoubleClick; }
set { m_onDoubleClick = value; }
}

private DateTime m_firstTime;
private DateTime m_secondTime;

private void Press()
{
if (null != onDoubleClick )
onDoubleClick.Invoke();
resetTime();
}

public override void OnPointerDown(PointerEventData eventData)
{
base.OnPointerDown(eventData);
// 按下按钮时对两次的时间进行记录
if (m_firstTime.Equals(default(DateTime)))
m_firstTime = DateTime.Now;
else
m_secondTime = DateTime.Now;
}

public override void OnPointerUp(PointerEventData eventData)
{
base.OnPointerUp(eventData);
// 在第二次鼠标抬起的时候进行时间的触发,时差小于400ms触发
if (!m_firstTime.Equals(default(DateTime)) && !m_secondTime.Equals(default(DateTime)))
{
var intervalTime = m_secondTime - m_firstTime;
float milliSeconds = intervalTime.Seconds * 1000 + intervalTime.Milliseconds;
if (milliSeconds < 400)
Press();
else
resetTime();
}
}

public override void OnPointerExit(PointerEventData eventData)
{
base.OnPointerExit(eventData);
resetTime();
}

private void resetTime()
{
m_firstTime = default(DateTime);
m_secondTime = default(DateTime);
}
}

//长按按钮
[AddComponentMenu("UI/LongClickButton")]
public class LongClickButton : Button
{
[Serializable]
public class LongClickEvent : UnityEvent {}

[SerializeField]
private LongClickEvent m_onLongClick = null;
public LongClickEvent onLongClick
{
get { return m_onLongClick; }
set { m_onLongClick = value; }
}

private DateTime m_firstTime = default(DateTime);
private DateTime m_secondTime = default(DateTime);

private void Press()
{
if( null != onLongClick)
onLongClick.Invoke();
resetTime();
}

public override void OnPointerDown(PointerEventData eventData)
{
base.OnPointerDown(eventData);
if(m_firstTime.Equals(default(DateTime)))
m_firstTime = DateTime.Now;
}

public override void OnPointerUp(PointerEventData eventData)
{
base.OnPointerUp(eventData);
// 在鼠标抬起的时候进行事件触发，时差大于600ms触发
if(!m_firstTime.Equals(default(DateTime)))
m_secondTime = DateTime.Now;
if (!m_firstTime.Equals(default(DateTime)) && !m_secondTime.Equals(default(DateTime)))
{
var intervalTime = m_secondTime - m_firstTime;
int milliSeconds = intervalTime.Seconds * 1000 + intervalTime.Milliseconds;
if (milliSeconds > 600) Press();
else resetTime();
}
}

public override void OnPointerExit(PointerEventData eventData)
{
base.OnPointerExit(eventData);
resetTime();
}

private void resetTime()
{
m_firstTime = default(DateTime);
m_secondTime = default(DateTime);
}
}

4.如何使用以上写好的代码

public class Program : MonoBehaviour
{
private void Start ()
{
GameObject.Find("Canvas/DoubleClickButton").GetComponent<DoubleClickButton>().onDoubleClick.AddListener( () =>
{
Debug.Log("双击");
});
GameObject.Find("Canvas/LongClickButton").GetComponent<LongClickButton>     ().onLongClick.AddListener(( ) =>
{
Debug.Log("长击");
});
}
}

后续拓展

通过这段时间对UGUI源码的理解，其实我们可以在UGUI源码的基础上进行添加新的功能和自己可利用的组件。比如我们最常见的目录树，

UGUI没有提供基础的，所以我们可以就常见的需求进行整合然后编写出来。后续的文章我会对UGUI源码进行剖析，

并编写一些可能常用的到的UI组件。

GitHub GitGub地址 https://github.com/ll4080333/Untiy

CSDN CSDN地址 http://blog.csdn.net/qq_29579137