Unity UGUI InputField 中文详解-Chinar

Chinar blog ：www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI InputField组件

---

本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能

Chinar —— 心分享、心创新！ 助力快速掌握 Unity UGUI InputField 组件的使用 为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：

---

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Presentation —— 介绍

• InputField 组件是一个用来管理输入的组件
• 我们通常用来输入用户的账号，密码，或者聊天时输入文字,等等输入逻辑…

1.1 Attribute —— 属性

我们创建一个 InputField 组件看一下它的属性：

在 Unity 的 Hierarchy 面板上右键–>UI–>InputField


选中创建的 InputField 对象，可以看到它的子物体有两个 Text对象

• Placeholder ：用来提示用户的占位符
• Text ：用来输入内容

然后我们看 Input Field 属性

下面看一下每个属性的详细功能

属性	功能
TextComponent	用来管理输入的文本组件
Text	输入的内容 ( 我们可以在代码中用 InPutField.text 获取到 )
Character Limit	字符限制类型，可以限制最大字符数的值。
Content Type	内容类型，定义输入内容接受/限制的字符类型
Line Type	行类型。单行、多行，多行回车换行
Placeholder	占位符，用来提示输入的内容，当点击输入框后会隐藏
Caret Blink Rate	输入框上的光标的闪烁频率
Selection Color	选中文本的背景颜色
Hide Mobile Input (iOS only)	隐藏移动输入内容，仅IOS有用

---

1.2 Content Type —— 内容类型

属性	功能
Standard	标准，可以输入任何字符
Auto corrected	自动更正，可以自动更正用户输入，并建议输入内容
Integer Number	整数，只允许输入整数
Decimal Number	十进制数，仅允许输入数字和小数点后一位
Alphanumeric	字母数字，允许字母和数字。无法输入符号
Name	名称(支持中文)自动将每个单词的首字母大写。(用户可以使用Delete键绕过大小写规则 )
Email Address	电子邮件地址，允许您输入最多包含一个@符号的字母数字字符串
Password	密码：用 * 表示输入的字符，从而隐藏输入内容。(允许符号)
Pin	用 * 号表示输入的字符。仅允许输入整数
Custom	自定义：允许自定义行类型、输入类型、默认键盘类型、字符验证

---

1.2.1 Line Type —— 行类型

属性	功能
Single Line	单行 ：仅允许文本在一行上
Multi Line Submit	多行自动换行 ：允许文本使用多行。仅在一行写满后使用新行
Multi Line Newline	多行回车新建行 ：用户可以随时通过按 Enter 键来新建行，继续输入

---

1.2.2 Custom —— 自定义

使用此选项，我们可以完全按照我们的需求来自定义输入逻辑、用户输入方式

• Line Type 上面介绍过了，这里来介绍下面的三个选项
• Input Type 与 Character Vlidation 中的内容在 Content Type 中包含，不再解释
• Keyboard Type：它可以在用户选中输入框时，调出不同类型的键盘

Keyboard Type 属性	功能
Default	目标平台的默认键盘
ASCLL Capable	带标准ASCII键的键盘。
Numbers And Punctuation	键盘与数字和标点符号键
URL	键盘与URL输入键
Number Pad	键盘与标准数字键
Phone Pad	键盘与适合键入电话号码的布局
NamePhone Pad	键盘与字母数字键
Email Address	带有适合键入电子邮件地址的其他键的键盘
Nintendo Network Account	带有网络账号键的键盘
Social	键盘与常用于社交媒体上的符号键，如Twitter
Search	键盘上带有“.” 空格键旁边的键，适合键入搜索词

---

2

Exemple —— 例子

我们来实现一个小 Demo：获取用户的账号密码：简单的搭建一个用户输入界面

• 两个 InputField 输入框分别命名： Account 和 Password

• 一个 Button 按钮

我们将密码的输入框的Content Type 改为 Password

为了测试：创建一个脚本挂在到相机上

using UnityEngine;
using UnityEngine.UI;


public class ChinarInputField : MonoBehaviour
{
    public InputField Account;//账号输入框
    public InputField Password;//密码输入框

    /// 

    /// 初始化输入框
    /// 
    void Start()
    {
        Account = GameObject.Find("Account").GetComponent<InputField>();
        Password = GameObject.Find("Password").GetComponent<InputField>();
    }

    /// 

    /// 绑定到登录按钮上
    /// 
    public void Login()
    {
        print("账号："+Account.text+"  密码："+Password.text);
    }
}

运行后，打印输出：

至此：您已完美征服了 UGUI - InputField

其他组件请继续学习，贴心的 Chinar 为您准备了 UGUI 全套教程

---

Unity UGUI 完整系列教程 (Chinar中文图解)

---

支持

May Be —— 开发者，总有一天要做的事！

拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程 使有限时间 具备无限可能！

---

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)

Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

---

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: [email protected]

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址