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~