零基础入门 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~

原文发布于微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin)

原文发表时间:2017-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端_Web

前端路由相关实现

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1032
来自专栏大内老A

ASP.NET:创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入,并通过Validation...

3258
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

1312
来自专栏前端下午茶

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

2792
来自专栏用户2442861的专栏

chrome调试工具常用功能整理

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

961
来自专栏JAVA高级架构开发

使用 CodeMirror 打造属于自己的在线代码编辑器

写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,...

4070
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

9087
来自专栏Python疯子

给Mac系统浏览器扩展翻译功能

Google Chrome可以即时翻译网页。可是,如果你用惯了Safari,不想安装Google Chrome,又需要对外文网页即时翻译,那么,请看下面:

9213
来自专栏崔庆才的专栏

腾讯云上Selenium用法示例

在上一节我们学习了 PhantomJS 的基本用法,归根结底它是一个没有界面的浏览器,而且运行的是 JavaScript 脚本,然而这就能写爬虫了吗?这又和Py...

8130
来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

903

扫码关注云+社区

领取腾讯云代金券