NGUI制作表格

在项目开发中，我需要使用 NGUI 制作表格，为此查找了相关资料。现在将制作过程分享给有需要的同学。

前几天，我使用 NGUI 制作了一个表格，效果如下（此处可插入表格效果图片）。具体制作过程是参照 NGUI 自带的第七个 Demo（Example 7 - Scroll View (Panel)）完成的，大家可以仔细研究这个示例。

一、表格的整体制作思路

总体上，我们使用 Scroll View 和 Scroll Bar 来制作表格。对于表格中的 item 对象，我选择使用 button，这样做的好处是方便实现点击操作以及处理其他相关事务。关于 NGUI 的详细使用方法，这里不做赘述，大家可以在网上查找一些 NGUI 的教程文档进行学习。

二、点击对象颜色变化的实现

当点击对象时，我们希望它出现被选中的颜色变化，取消选中状态时则恢复默认颜色。实现方法是直接改变 UIButton 的 defaultColor 值，恢复默认颜色可以直接调用 ResetDefaultColor() 方法。以下是相关代码示例：

// 设置选中对象默认的颜色变化
_secondClickObject.GetComponent<UIButton>().defaultColor = new Color(21f / 255f, 122f / 255f, 2f / 255f, 1f);
// 恢复第一次选中对象默认的颜色
_firstClickObject.GetComponent<UIButton>().ResetDefaultColor();

三、双击登入功能的实现

由于 NGUI 已经对双击事件进行了封装，我们可以直接调用 OnDoubleClick() 方法来实现双击登入功能。

四、第一次点击对象与第二次点击对象的交换

为了实现第一次点击对象与第二次点击对象之间的交换，我们声明了两个点击对象的实例，通过这两个实例来实现不同对象之间的来回切换。以下是具体的代码实现：

/// <summary>
/// 判断点击对象
/// </summary>
/// <param name="item">选中的 item 对象</param>
public void SelectItem(GameObject item)
{
// 当前选中 item 对象
GameData.CurrGameObejct = item;
// 判断两次选择的对象，第一次选择的，第二次选择的
if (_firstClickObject == null)
{
_firstClickObject = item;
// 设置选中对象默认的颜色变化
_firstClickObject.GetComponent<UIButton>().defaultColor = new Color(21f / 255f, 122f / 255f, 2f / 255f, 1f);
if (_secondClickObject != null)
{
// 恢复第二次选中对象默认的颜色
_secondClickObject.GetComponent<UIButton>().ResetDefaultColor();
_secondClickObject = null;
}
return;
}
else
{
_secondClickObject = item;
// 设置选中对象默认的颜色变化
_secondClickObject.GetComponent<UIButton>().defaultColor = new Color(21f / 255f, 122f / 255f, 2f / 255f, 1f);
// 恢复第一次选中对象默认的颜色
_firstClickObject.GetComponent<UIButton>().ResetDefaultColor();
_firstClickObject = null;
}
}

五、界面的添加与修改

在制作表格的过程中，我们还需要进行界面的添加和修改操作。添加界面的效果如下（此处可插入添加界面的图片），修改界面的效果如下（此处可插入修改界面的图片）。

六、源文件下载

最后，为大家提供源文件的下载地址（附可执行 exe 文件）：点击下载。