Unity_UI_NGUI_组合控件1

Unity_UI

Unity_NGUI_组合控件

1.Button(按钮控件)

1.1 Button的作用与使用场景

• Button控件是UI交互中最常用的控件之一，用于响应用户的点击操作。
• 通常是基于三大基础控件添加组件的方法，创建一个按钮要为按钮组件的父对象添加碰撞器
• 按钮可以触发各种游戏事件，如开始游戏、暂停、设置、返回等。
• 支持多种状态显示：普通、悬停、按下、禁用等状态。

1.2 Button常用属性

基础属性

• Tween Target：按钮控制的目标对象，一般是3个基础控件之一，会自动设置。
• Drag Over：拖拽悬停状态设置。
• Transition：过渡效果设置。

Colors(颜色设置)

按钮各状态颜色设置，包括以下状态：

• Normal：普通状态颜色
• Hover：鼠标悬停状态颜色
• Pressed：按下状态颜色
• Disabled：禁用状态颜色
• Default：默认状态颜色

Sprites(图片设置)

按钮各状态图片设置，包括以下状态：

• Normal：普通状态图片
• Hover：鼠标悬停状态图片
• Pressed：按下状态图片
• Disabled：禁用状态图片
• Pixel Snap：自动设置原始大小（复选框）

OnClick(点击事件)

点击按钮响应脚本设置：

• 可以添加多个事件响应
• 支持拖拽脚本组件到事件槽
• 可以设置参数传递

按钮监听方式

1. 拖曳方法（Inspector面板设置）

• 在Button组件的OnClick事件面板中直接拖拽目标对象
• 选择要调用的方法，适合简单的UI交互
• 优点：操作简单，可视化程度高
• 缺点：不够灵活，难以动态修改

2. 代码控制事件监听（更灵活）

// NGUI按钮监听
public class ButtonController : MonoBehaviour
{
    public UIButton button;
    
    void Start()
    {
        // 添加点击事件监听
        button.onClick.Add(new EventDelegate(OnButtonClick));
    }
    
    void OnButtonClick()
    {
        Debug.Log("按钮被点击");
    }
}

// Unity UI按钮监听
public class UnityButtonController : MonoBehaviour
{
    public Button button;
    
    void Start()
    {
        // 添加点击事件监听
        button.onClick.AddListener(OnButtonClick);
    }
    
    void OnButtonClick()
    {
        Debug.Log("按钮被点击");
    }
}

代码监听的优势：

• 可以动态添加/移除事件
• 支持复杂的逻辑控制
• 便于调试和维护
• 可以实现条件性的事件绑定

2.Toggle(开关控件)

2.1 Toggle的作用与使用场景

• Toggle控件是UI交互中的开关控件，用于实现复选框、单选框等功能。
• 通常用于设置选项、开关功能、多选/单选等场景。
• 支持两种状态：开启(On)和关闭(Off)。
• 可以单独使用，也可以组合使用实现单选功能。

2.2 Toggle常用属性

基础属性

• Tween Target：开关控制的目标对象，一般是3个基础控件之一，会自动设置。
• Drag Over：拖拽悬停状态设置。
• Transition：过渡效果设置。
• Group：分组设置，用于实现单选功能。

Colors(颜色设置)

开关各状态颜色设置，包括以下状态：

• Normal：普通状态颜色
• Hover：鼠标悬停状态颜色
• Pressed：按下状态颜色
• Disabled：禁用状态颜色
• Default：默认状态颜色

Sprites(图片设置)

开关各状态图片设置，包括以下状态：

• Normal：普通状态图片
• Hover：鼠标悬停状态图片
• Pressed：按下状态图片
• Disabled：禁用状态图片
• Pixel Snap：自动设置原始大小（复选框）

OnValueChanged(值变化事件)

开关状态变化响应脚本设置：

• 可以添加多个事件响应
• 支持拖拽脚本组件到事件槽
• 可以设置参数传递
• 响应开关的开启/关闭状态变化

2.3 Toggle状态说明

// Toggle状态枚举
public enum ToggleState
{
    Off,        // 关闭状态
    On          // 开启状态
}

2.4 Toggle脚本控制示例

using UnityEngine;
using UnityEngine.UI;

public class ToggleController : MonoBehaviour
{
    private Toggle toggle;
    
    void Start()
    {
        // 获取Toggle组件
        toggle = GetComponent<Toggle>();
        
        // 添加值变化事件监听
        toggle.onValueChanged.AddListener(OnToggleValueChanged);
        
        // 设置初始状态
        SetToggleState(false);
    }
    
    // 开关状态变化响应
    void OnToggleValueChanged(bool isOn)
    {
        Debug.Log($"开关状态：{(isOn ? "开启" : "关闭")}");
        // 在这里添加具体的游戏逻辑
    }
    
    // 设置开关状态
    void SetToggleState(bool isOn)
    {
        toggle.isOn = isOn;
    }
    
    // 获取当前状态
    bool GetToggleState()
    {
        return toggle.isOn;
    }
}

2.5 Toggle使用技巧

2.5.1 开关状态管理

• 状态切换：根据游戏逻辑动态设置开关状态
• 视觉反馈：通过颜色和图片变化提供用户反馈
• 音效配合：状态变化时播放音效增强体验

2.5.2 开关事件处理

// 多种事件处理方式
public class AdvancedToggle : MonoBehaviour
{
    void Start()
    {
        Toggle toggle = GetComponent<Toggle>();
        
        // 方式1：通过Inspector面板添加事件
        // 方式2：通过代码添加事件
        toggle.onValueChanged.AddListener((isOn) => {
            Debug.Log($"Lambda表达式方式：{isOn}");
        });
        
        // 方式3：添加带参数的事件
        toggle.onValueChanged.AddListener(OnToggleValueChangedWithParam);
    }
    
    void OnToggleValueChangedWithParam(bool isOn)
    {
        Debug.Log($"开关状态变化，参数：{isOn}");
    }
}

2.5.3 开关组功能

// 单选功能实现
public class ToggleGroupController : MonoBehaviour
{
    public Toggle[] toggles;
    public ToggleGroup toggleGroup;
    
    void Start()
    {
        // 设置ToggleGroup
        foreach (Toggle toggle in toggles)
        {
            toggle.group = toggleGroup;
        }
        
        // 监听组变化
        toggleGroup.onValueChanged.AddListener(OnGroupValueChanged);
    }
    
    void OnGroupValueChanged(Toggle activeToggle)
    {
        Debug.Log($"选中的开关：{activeToggle.name}");
    }
}

3.Input(输入框控件)

3.1 Input的作用与使用场景

• Input控件是UI交互中的文本输入控件，用于接收用户输入的文本信息。
• 通常用于用户名输入、密码输入、聊天框、搜索框等场景。
• 支持多种输入类型：标准文本、密码、数字、邮箱等。
• 可以设置输入验证、字符限制、键盘类型等功能。

3.2 Input常用属性

基础属性

• Label：关联的文本组件，用于显示输入框的标签或提示信息。
• Starting Value：开始默认显示的内容，设置输入框的初始文本。
• Saved As：若此处填写内容，会使用PlayerPrefs将输入内容作为此处填写的该key的值进行存储，一般不使用。

颜色设置

输入框各状态颜色设置，包括以下状态：

• ActiveTextColor：选中激活时颜色，设置输入框获得焦点时的文本颜色。
• Inactive Color：未选中失活时颜色，设置输入框失去焦点时的文本颜色。
• Caret Color：插入光标的颜色，设置文本光标（闪烁的竖线）的颜色。
• Selection Color：选中文字的背景颜色，设置文本被选中时的高亮背景颜色。

输入类型设置

• InputType：输入类型设置
  • Standard：默认模式，普通文本输入
  • Auto Correct：自动更正，自动修正拼写错误
  • Password：密码输入，输入内容不可见

验证设置

• Validation：输入验证设置
  • None：无限制，可以输入任何字符
  • Integer：只能输入整数
  • Float：可以输入浮点数
  • Alphanumeric：只能输入字母和数字
  • Username：用户名格式验证
  • Name：姓名格式验证
  • Filename：文件名格式验证

移动端设置

• Mobile Keyboard：手机键盘模式
  • Default：默认键盘
  • ASCII Capable：英文键盘
  • Numbers And Punctuation：数字符号键盘
  • URL：网址输入键盘
  • Number Pad：数字键盘
  • Phone Pad：手机号码键盘
  • Name Phone Pad：姓名电话键盘
  • Email Address：邮箱地址键盘

其他设置

• Hide Input：键盘下隐藏输入框，在移动端键盘弹出时隐藏输入框本身。
• On Return Key：完成键（回车键）做什么操作
  • Default：默认操作
  • Submit：结束输入
  • New Line：换行
• Character Limit：最大可输入字符数，限制输入框的最大字符数量。

事件设置

• OnSubmit：输入完成时响应脚本，当用户完成输入（如按回车键）时触发。
• OnChange：输入变化时响应脚本，当输入内容发生变化时触发。

3.3 Input状态说明

// Input状态枚举
public enum InputState
{
    Normal,     // 普通状态
    Focused,    // 获得焦点状态
    Disabled    // 禁用状态
}

3.4 Input脚本控制示例

using UnityEngine;
using UnityEngine.UI;

public class InputController : MonoBehaviour
{
    private InputField inputField;
    
    void Start()
    {
        // 获取InputField组件
        inputField = GetComponent<InputField>();
        
        // 添加事件监听
        inputField.onValueChanged.AddListener(OnInputValueChanged);
        inputField.onEndEdit.AddListener(OnInputEndEdit);
        
        // 设置初始值
        SetInputValue("请输入内容");
    }
    
    // 输入内容变化响应
    void OnInputValueChanged(string value)
    {
        Debug.Log($"输入内容变化：{value}");
        // 在这里添加输入验证逻辑
    }
    
    // 输入完成响应
    void OnInputEndEdit(string value)
    {
        Debug.Log($"输入完成：{value}");
        // 在这里添加提交逻辑
    }
    
    // 设置输入框内容
    void SetInputValue(string value)
    {
        inputField.text = value;
    }
    
    // 获取输入框内容
    string GetInputValue()
    {
        return inputField.text;
    }
    
    // 清空输入框
    void ClearInput()
    {
        inputField.text = "";
    }
}

3.5 Input使用技巧

3.5.1 输入验证

// 输入验证示例
public class InputValidator : MonoBehaviour
{
    public InputField inputField;
    
    void Start()
    {
        inputField.onValueChanged.AddListener(ValidateInput);
    }
    
    void ValidateInput(string value)
    {
        // 验证邮箱格式
        if (IsValidEmail(value))
        {
            Debug.Log("邮箱格式正确");
        }
        else
        {
            Debug.Log("邮箱格式错误");
        }
    }
    
    bool IsValidEmail(string email)
    {
        try
        {
            var addr = new System.Net.Mail.MailAddress(email);
            return addr.Address == email;
        }
        catch
        {
            return false;
        }
    }
}

3.5.2 密码输入处理

// 密码输入示例
public class PasswordInput : MonoBehaviour
{
    public InputField passwordField;
    
    void Start()
    {
        // 设置密码输入类型
        passwordField.contentType = InputField.ContentType.Password;
        
        passwordField.onEndEdit.AddListener(OnPasswordSubmit);
    }
    
    void OnPasswordSubmit(string password)
    {
        Debug.Log($"密码输入完成，长度：{password.Length}");
        // 在这里添加密码验证逻辑
    }
}