使用NGUI的Anchor实现对齐，按钮事件脚步

在将不同的UI元素放置到Root中时，你可能会遇到这样的问题：某些UI元素会莫名其妙地改变位置，导致原本排列整齐且对齐的UI布局变得混乱。

这时，就需要用到NGUI的Anchor脚本了，该脚本在实际开发中应用十分广泛。

Anchor脚本简介

简单来说，Anchor脚本的主要功能是实现GUI的对齐。下面以前一章制作的登录界面为例进行说明。

在登录界面中，为每个UI元素都添加了一个UIAnchor脚本。添加方式有两种：可以通过菜单栏添加，也可以在Inspector面板的“Add Component”选项中添加，具体操作可参考相关界面。

Anchor脚本的参数解析

下面详细介绍Anchor脚本的参数：

• Container：如果不设置该参数，默认会以上面的UICamera作为对齐目标。若设置了Container，例如将其设置为sprite（这里的sprite是登录界面的背景），那么后续的offset设置将以该sprite为目标进行移动。
• Side：表示中心点，共有上、下、左、右等8个中心点可供选择。你可以自行进行调试，观察不同设置下的效果。
• Relative Offset：相对位移。从最左边移动到最右边时，x的值仅从0变化到1。
• Pixel Offset：像素位移，即按照像素值进行移动。

实践出真知，在了解了这些参数的含义后，你可以亲自进行测试。

另外，带有UISprite脚本的元素也会涉及到Anchor相关设置。后面的四个参数具体含义如下：

• Target's Left：表示左边边界以UIRoot的左边为准，并加上100个像素。无论窗口如何变化，该sprite的四个边界始终与Root的四个边界保持100、 -50、100、 -50的距离。你可以自己进行测试，以便更好地理解。

你可以尝试添加label、button、sprite等UI元素，进一步熟悉Anchor脚本的使用。

按钮事件脚本

接下来，我们创建一个名为UIDataHandler.cs的脚本，代码如下：

using UnityEngine;
using System.Collections;

public class UIDataHandler : MonoBehaviour
{
public UIInput nameInput;
public UIInput psInput;
public GameObject loginBtn;
public GameObject registerBtn;
public UILabel tipLabel;

void Start ()
{
// 侦听按钮事件
UIEventListener.Get(loginBtn).onClick = clickHandler;
UIEventListener.Get(registerBtn).onClick = clickHandler;
}

void clickHandler(GameObject go)
{
if(go.name == "loginButton")
{
Debug.Log("登录：" + nameInput.label.text + "," + psInput.label.text);
tipLabel.text = "用户名：" + nameInput.label.text + ",密码：" + psInput.label.text;
}
if (go.name == "registerButton")
{
Debug.Log("注册：" + nameInput.label.text + "," + psInput.label.text);
tipLabel.text = "用户名：" + nameInput.label.text + ",密码：" + psInput.label.text;
}
}

void Update ()
{
// 可根据需求添加更新逻辑
}
}

将该脚本挂载在UI Root上，然后分别为脚本中的参数赋值。运行测试，在input中输入内容，点击按钮后，你就可以在控制台看到相应的输出信息。

如果你需要最新版本的NGUI，可以通过以下链接进行下载： http://pan.baidu.com/s/1nt1JtcX