NGUI 3.5教程(七)Input 输入框

11 篇文章 4 订阅
 写在前面:   


    本文将用NGUI创建一个经过美化的输入框。
    欢迎大家纠错、拍砖!原创很辛苦,如有转载,请注明出处。


创建输入框

  在NGUI 3.5中,创建控件都可以通过【搜索】,然后【拖拽】实现(也是NGUI推荐的方法)。

(1)在Project面板中,搜索“Control”,也就是搜索控件。之后,会发现NGUI的一堆控件。


(2)找到 Simple Input Field,拖拽到层级面板下面。我这里把它直接拖拽到UI Root下面了。

在game视图中,会出现这个控件,如下:


(3)美化输入框。我们的美术肯定不会对这种样式的输入框满意,那么我们就要替换掉它的样式,其实就是给控件换一张底图。

选中输入框,在inspector面板里更改 Atlas 和 Sprite,以修改底图。如果有不明白怎么建立atlas和sprite的,请参照我前面的文章《NGUI 3.5教程(四)Atlas和Sprite(制作图片按钮)》。


(4)更改输入框的字体。由于我们要应用自定义字体,所以要把做好的字体,设置上。如果有不明白字体制作的,请参照我前面的文章《NGUI 3.5教程(六)Font字体》。


(5)修改文字在输入框中的位置。定义好字体、字体大小后,会发现,字在输入框里不居中了,有些偏。需要在Label下,调整Anchors:

方法二:可以把Anchors的Type设置为None,然后通过Transform来调整。


(6)运行,试试输入效果:



关于输入框需要注意的是:

1,如果没自定义字体,输入中文的时候为透明的(空白),无法显示。

2,如果字体超过输入框的大小,一样无法显示。

3,使用动态字体,会增加draw call。

4,在手机里,点击输入框后,会自动调用手机的虚拟键盘,之后进行输入。



  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值