Unity UGUI InputField 中文详解-Chinar

Chinar blog www.chinar.xin

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

Unity UGUI InputField组件


本文提供全流程,中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新!

助力快速掌握 Unity UGUI InputField 组件的使用

为初学者节省宝贵的时间,避免采坑!

Chinar 教程效果:
在这里插入图片描述


文章目录

  • 1
    • Presentation —— 介绍
      • 1.1 Attribute —— 属性
      • 1.2 Content Type —— 内容类型
        • 1.2.1 Line Type —— 行类型
        • 1.2.2 Custom —— 自定义
  • 2
    • Exemple —— 例子
  • 支持
    • May Be —— 开发者,总有一天要做的事!


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

1

Presentation —— 介绍


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

1.1 Attribute —— 属性

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

Unity Hierarchy 面板上右键–>UI–>InputField
举个例子
Unity UGUI InputField 中文详解-Chinar_第1张图片
选中创建的 InputField 对象,可以看到它的子物体有两个 Text对象

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

然后我们看 Input Field 属性

Unity UGUI InputField 中文详解-Chinar_第2张图片
下面看一下每个属性的详细功能
举个例子

属性 功能
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 —— 内容类型

Unity UGUI InputField 中文详解-Chinar_第3张图片
举个例子

属性 功能
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 TypeCharacter Vlidation 中的内容在 Content Type 中包含,不再解释
  • Keyboard Type:它可以在用户选中输入框时,调出不同类型的键盘

Unity UGUI InputField 中文详解-Chinar_第4张图片
举个例子

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 输入框分别命名: AccountPassword

  • 一个 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 )


Chinar

END

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

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

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

你可能感兴趣的:(Unity,3D,UGUI,unity,ugui,Inputfield,unity,inputfield组件,InputField中文详解,Unity,UGUI,inputField中文教程,unity,ugui,输入框)