UGUI Inputfield

InputField是我们俗称的文本输入框。下图是游戏内的inputField使用之处。

下面就进入正题来讲解下这个Inputfield组件


首先我们在Unity里创建一个新的InputFiled。来看下他的子对象以及组件内容。

从上图可以看的出来,inputField的子对象内容是非常简单的,就一个placeHolder和Text这两个对象。

再来看一下这个组件的属性内容

来介绍下这个组件内容的意思

TextComponent:文字组件

Text:输入的文本

CharacterLimit:字符数限制

ContentType:可以选择的内容类型(如密码、首字符大写等类型)

LineType:显示的行类型

Placeholder:占位符组件

Caret Blink Rate:光标闪烁速率

Caret Width:光标宽度

Custom Caret Color:自定义光标颜色

Selection Color:选中颜色

Hide Mobile Input:手机端隐藏输入

ReadOnly:只读

以上就是inputField这个组件的内容。

最开始的游戏内效果图所示,placeHolder的文本内容就是默认的请输入新昵称,在有文本输入后placeholder的内容被自动清空。而新的输入文本内容会在Text这个组件上显示出来。

在知道这些以后,我们把默认的PlaceHodler内容进行修改。

剩下的属性面板里的内容我就不带着大家一一尝试了。

接下来就到了我们代码使用InputField阶段了。在实际项目中我们会根据inputField拿到玩家的文本输入内容,1是进行存储,2是进行校验,但是校验这件事看具体的文案需求了。比如说敏感字替换之类的需求。

好的,我们依然是创建一个脚本公开一个InputField变量,然后挂载到Canvas上,并且把编辑器内创建的inputField进行关联来完成我们的第一步操作。

好的,完成以上两步之后,我们打开脚本内的Start函数,然后看一下InputField都能点出什么属性出来。

从上图可以看出来,基本上属性面板里有的都可以在这里点出来,其次还有一些变化的事件可以用来监听。

为了配合InputFiled的获取用户输入的文本,我们创建一个按钮,作用是点击按钮的时候,打一句日志,把当前inputFiled的Text文本输出出来。

第一步,脚本内公开一个btn

第二步在Unity内创建一个btn,调整合适位置后,将btn拖动到canvas的脚本上关联即可。

第三步,在脚本内完成对按钮的点击事件处理,点击按钮的时候通过InputField.text拿出当前用户的输入文本内容。

第四步,就是回到unity里运行之后查看结果咯

我们先什么都不输入,日志结果,用户输入内容:后面应该是空的,什么都没有

然后我们随便输入一些内容,之后就会发现占位符的内容会被用户输入内容覆盖,然后点击按钮,显示玩家输入内容。

知道了如何获取玩家输入内容后,还需要掌握一件事,就是对文本输入框的事件监听。

InputField组件经过版本迭代,api修改之后,现在留有3个事件以供使用者操作。

执行顺序如下:

onValidateInput:有字符插入

onValueChanged:文本框内容变化

onEndEdit:结束编辑

我们可以通过监听这几个事件来完成对需求的实现,比如说我们可以监听字符插入事件,来判断是否当前字符属于敏感字,以及之后的操作处理。

有一点需要知道的,就是OnValueChanged这个事件,是在OnValidateInput这个事件执行之后才会执行。所以我们可以控制OnValidateInput这个事件的返回值来控制文本输入。

回到Mono里,我们实现这几个事件。

第一个实现结束编辑的

第二个实现输入框内容变化的事件

第三个实现有字符插入事件

上面的这几个事件应该都还比较好理解,第1个是编辑结束后,拿到的编辑结束的事件,我们输出了日志,可以拿到输入完成后的文本输入框内容。

第2个是内容变化的事件,我们也输出了日志,来显示变化后的输入框内容

第3个是有字符插入的事件,3个参数分别是text,charIndex,addedChar

text是插入这个字符之前的文本输入框内容

charIndex是插入的这个字符的下标

addedChar是本次插入的这个字符

我们在使用中可以根据addedChar进行利用,比如我们判断如果addedChar这个插入的字符内容是敏感字,就直接return回1个*即可。

现在我们加上对插入字符的判断,加入限制,比如,我们增加1个限制,当输入靠的时候,把靠这个字符换成*。

准备工作就绪了,我们切回到Unity来查看一下效果吧。

好了,以上就是今天InputField的分享内容啦。大家是否掌握了呢?

ヾ( ̄▽ ̄)Bye~Bye~

(0)

相关推荐

  • CSS强制不换行

    white-space: nowrap; 这个CSS属性大家估计不怎么用,其作用就是强制不换行 语法: white-space : normal | pre | nowrap  取值: normal  ...

  • 火山中文编程学习笔记008:注释的使用方法

    在火山中文编程中,注释主要分为单行注释和多行注释,单行注释用符号 // 表示,多行注释用-或者=表示,格式为-注释内容- 或者=注释内容= 可以使用以下方式定义火山程序中的注释: A. 任何定义型成员 ...

  • WPS还能这么玩!无意间发现的隐藏功能...

    在帮学员解决问题的时候,对方水平比较差,理解慢点,边教边等边玩WPS.突然间发现了几个好用的功能,跟着卢子一起来看看. 1.清除特殊字符 特殊字符,WPS分为空格.换行符.单引号和不可见字符4种.有的 ...

  • word中如何去掉表格保留内容

    萝北的老干部2018-04-08 22:35 word实用技巧之word中如何去掉表格保留内容 材料/工具 word2010 方法 1 打开要编辑的word文档 合并报表软件excel选择勤哲Exce ...

  • java学习——59.文本编辑组件

    Java中的文本编辑组件主要有:JTextField(文本行).JPasswordField(密码行).JTextArea(文本区). 1.JTextComponet文本编辑组件类     JText ...

  • unity UGUI九宫格纹理拉伸的使用

    转载自注明: https://blog.csdn.net/andyhebear/article/details/50476802 本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸 ...