零基础入门 21： UGUI Inputfield

因为一些外部原因，以后文章的发布只会在公众号内推送，取消了在蛮牛专栏的文章更新，望蛮牛小伙伴周知，关注微信公众号，可以第一时间收到新分享的推送通知。

经过这么多期的UGUI组件介绍之后，UGUI主题的入门分享也慢慢进入尾声，所剩下的组件也只有Inputfield，Panel和ScrollView了，今天给大家分享的是Unity里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的分享内容啦。大家是否掌握了呢？

有问题的同学可以加我的QQ或者给我留言。

ヾ(￣▽￣)Bye~Bye~