网络知识 娱乐 【Unity3D-UGUI系列】(八)InputField 输入框组件详解

【Unity3D-UGUI系列】(八)InputField 输入框组件详解

推荐阅读

  • CSDN主页
  • GitHub开源地址
  • Unity3D插件分享
  • 简书地址
  • 我的个人博客
  • QQ群:1040082875

大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。

一、前言

首先,介绍一个UGUI,NGUI是UGUI的前身,Unity开发团队将NGUI的开发团队收到自己开发团队下,并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点:

  • 灵活
  • 快速
  • 可视化

对于开发者来说有很多的优点,比如说:

  • 效率高
  • 实现效果好
  • 易于使用和拓展
  • 与Unity编辑器的兼容性高

这是本系列文章的第八篇:
【Unity3D-UGUI系列】(一)Canvas 画布组件详解
【Unity3D-UGUI系列】(二)Text文本组件详解
【Unity3D-UGUI系列】(三)Button 按钮组件详解
【Unity3D-UGUI系列】(四)Image 图片组件详解
【Unity3D-UGUI系列】(五)RawImage 显示纹理组件详解
【Unity3D-UGUI系列】(六)Panel 容器组件详解
【Unity3D-UGUI系列】(七)Dropdown 下拉菜单组件详解
【Unity3D-UGUI系列】(八)InputField 输入框组件详解
【Unity3D-UGUI系列】(九)Scrollbar 滚动条组件详解
【Unity3D-UGUI系列】(十)Slider 滑动条组件详解
【Unity3D-UGUI系列】(十一)Toggle 开关组件详解
【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解

二、InputField 输入框组件介绍

InputField 输入框组件是一个用来输入内容的组件。

通常用来输入账号、密码、聊天信息,或者输入参数等情况。

在Unity的Hierarchy视图中选择“Create→UI→Input Field”新建一个输入框组件:
在这里插入图片描述
在Hierarchy视图中,可以看到InputField的层级结构:
在这里插入图片描述
InputField子对象有两个Text,Placeholder用来提示用户输入的占位符,Text用来输入内容。

三、InputField 输入框组件属性

接下来详细的看一下InputField 输入框组件的属性:
在这里插入图片描述
Image组件已经介绍过了,可以忽略,主要了解Input Field组件:
Interactable、Transition、Navigation跟Button组件是相似的,Button教程中有详细解释。

属性功能
TextComponent用来管理输入的文本组件
Text输入的内容
Character Limit字符限制类型,可以限制最大字符数的值。
Content Type内容类型,定义输入内容接受/限制的字符类型
Line Type行类型。单行、多行,多行回车换行
Placeholder占位符,用来提示输入的内容,当点击输入框后会隐藏
Caret Blink Rate输入框上的光标的闪烁频率
Caret Width输入框上的光标的宽度
Custom Caret Color自定义光标颜色
Selection Color选中文本的背景颜色
Hide Mobile Input隐藏移动输入内容
Read Only是否只读
On Value Changed监听事件

InputField 输入框组件主要就是为了管理输入内容的组件,可以控制输入的文本的长度,类型显示等。

下面就详细介绍一下InputField组件的输入类型。

四、InputField 输入框组件的字符类型

在这里插入图片描述
一共有以下几种类型:

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

这几个就没啥好说的,在这里插入图片描述

主要讲一下自定义:

在这里插入图片描述
Line Type:行类型,允许输入单行或者多行,或者Enter 键来新建行,继续输入
在这里插入图片描述
Input 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键盘上带有“.” 空格键旁边的键,适合键入搜索词

Character Validatior:字符验证类型,有整数、小数、字母数字、名字、Email等

在这里插入图片描述
按需设置咯

如果上面还不满足你的设置,想要更加严格的限制,那么请往下看。

五、代码限制输入字符

比如说用正则表达式来判断输入的字符串是否符合格式,符合格式就不管,不符合格式就把赋值输入的字符串减一位的字符串,也就相当于删除掉最后一位

关于正则表达式的应用可以看我另一篇文章:文章链接

5-1、限制输入的字符串0-9 a-f A-F

using System.Text.RegularExpressions;
using UnityEngine;
using UnityEngine.UI;

public class Input_Test : MonoBehaviour
{
    InputField m_InputField;

    private void Awake()
    {
        m_InputField = GetComponent<InputField>();
        m_InputField.onValueChanged.AddListener(OnInputFieldValueChang);
    }

    private void OnInputFieldValueChang(string inputInfo)
    {
        Regex reg = new Regex("^[A-Fa-f0-9]+$");
        if (reg.IsMatch(inputInfo))
        {
            m_InputField.text = inputInfo;
        }
        else
        {
            if (m_InputField.text == "")
            {
                m_InputField.text = "";
            }
            else
            {
                m_InputField.text = inputInfo.Substring(0, inputInfo.Length - 1);
            }
        }    
    }
}

在这里插入图片描述