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

一、NGUI的Anchor实现对齐

在将不同的UI元素放置到Root中时，我们可能会遇到一个问题：某些UI元素会莫名其妙地移动位置，导致原本排列整齐、对齐的UI布局变得混乱。此时，就需要用到NGUI的Anchor脚本，该脚本在实际开发中应用非常普遍。

1. Anchor的基本功能

简单来说，Anchor的主要作用是实现GUI的对齐功能。下面以之前开发的登录界面为例进行说明。

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

2. Anchor脚本的参数解析

接下来，详细介绍Anchor脚本的参数：

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

3. 另一种Anchor情况

带有UISprite脚本的元素也存在类似Anchor的设置。其后面的四个参数含义如下： 以“Target's Left”为例，它表示左边边界以UIRoot的左边为准，并在此基础上加上100个像素。无论窗口如何变化，这个Sprite的四个边界始终与Root的四个边保持100、 -50、100、 -50的像素距离。建议大家亲自进行测试，以便更好地理解这些参数的作用。

大家可以尝试添加Label、Button、Sprite等UI元素，进一步熟悉Anchor的使用。

二、按钮事件脚本

1. 脚本创建

创建一个名为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 ()
{
}
}

2. 脚本使用

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