NGUI 3.5教程(七)Input 输入框

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/38332089

写在前面:

本文将用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,在手机里,点击输入框后,会自动调用手机的虚拟键盘,之后进行输入。

时间: 2024-10-09 19:41:49

NGUI 3.5教程(七)Input 输入框的相关文章

NGUI input输入框【转载见图片水印】

1)在Project面板中,搜索"Control",也就是搜索控件.之后,会发现NGUI的一堆控件. (2)找到 Simple Input Field,拖拽到层级面板下面.我这里把它直接拖拽到UI Root下面了. 在game视图中,会出现这个控件,如下: (3)美化输入框.我们的美术肯定不会对这种样式的输入框满意,那么我们就要替换掉它的样式,其实就是给控件换一张底图. 选中输入框,在inspector面板里更改 Atlas 和 Sprite,以修改底图.如果有不明白怎么建立atlas

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例 原文地址:http://www.tasharen.com/?page_id=185 NGUI下载地址:点我传送 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a New UI,会打开UI创建向导. 4.在创建向导中你能更改UI的基本参数.现在我们选Default layer,点击Create Your UI 按钮.5.就这

Laravel教程 七:表单验证 Validation

Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就不 说废话了吧,直接进入Form Validation的部分吧.几乎在每一个web应用当中都会有表单,而有表单基本就离不开表单验证.在laravel中,其实可以说是有两种方式来进行表单验证:使用Request和使用Validation.下面将分开讲这两部分的内容,而且我会更着重第一种,也更推荐大家使

无废话ExtJs 入门教程七[登陆窗体Demo:Login]

无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 &l

NGUI全面实践教程(大学霸内部资料)

NGUI全面实践教程(大学霸内部资料)   试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国内NGUI最新教程,以全新的3.8.0为基础,讲解NGUI的使用.内容不仅全面该函NGUI的各个组件,还详细讲解各项高级功能,以及自带工具. 目  录 第1章  学习NGUI前的准备 1 1.1  NGUI的购买/下载和导入 1 1.1.1  找到并了解NGUI的相关信息 1 1.1.2  导入NG

微信小程序组件解读和分析:十、input输入框

input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <view class="content"> type:有效值:text 感觉没什么区别 <input  placeholder="type=text" type=

input输入框只能输入正整数

input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.le

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

去除Input输入框中边框的方式

我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上时,需要用 outline:medium;来消除边框,具体代码如下 .table_box2{ height: 30px; width: 180px; border: none; float: left; zoom:1; outline: medium; 需特别注意点一点,在这里尽量不要使用borde