NGUI实现输入框和进度条
2015-10-17 17:11
260 查看
InputFiled
在UIroot下添加sprite(inputbg) 添加BoxCollider 和
UIInput脚本 作为输入框的背景, 在sprite下添加子物体label为占位符
![](http://img.blog.csdn.net/20151017171703208?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这是inputbg 的视图
![](http://img.blog.csdn.net/20151017172102132?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这是占位符label的显示视图
![](http://img.blog.csdn.net/20151017172421831?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下面是效果图
![](http://img.blog.csdn.net/20151017172456260?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20151017172516028?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(2).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(3).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(4).png)
进度条
在UIroot下添加sprite(bg) 添加UISlide组件
在sprite(pro)下添加sprite子物体
在子物体下添加sprite(hand )对象
在添加label子物体显示
其上下级关系为
![](http://img.blog.csdn.net/20151017172922556?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
bg的相关属性如下图 注意OnValueChange监听事件中拖入label 选择SetCurrentPercent 该方法直接显示比例换算完之后的百分数 个人感觉比UGUI方便多了
![](http://img.blog.csdn.net/20151017173234267?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
pro的相关属性 这里要注意将Type改为Tiled
![](http://img.blog.csdn.net/20151017173737450?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
hand的相关属性 滑动它可以改变进度
![](http://img.blog.csdn.net/20151017173858620?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
label只是单纯的用来显示百分比的进度
下面是效果图
当然 这些在NGUI内置的预设体中都有 个人觉得得知道它们如何完成的虽然很简单 就当加深印象,复习一遍好了 里面若有不当之处 还请指出 及时更改 多谢!!!
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(5).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(6).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(7).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(8).png)
在UIroot下添加sprite(inputbg) 添加BoxCollider 和
UIInput脚本 作为输入框的背景, 在sprite下添加子物体label为占位符
这是inputbg 的视图
这是占位符label的显示视图
下面是效果图
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(2).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(3).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(4).png)
进度条
在UIroot下添加sprite(bg) 添加UISlide组件
在sprite(pro)下添加sprite子物体
在子物体下添加sprite(hand )对象
在添加label子物体显示
其上下级关系为
bg的相关属性如下图 注意OnValueChange监听事件中拖入label 选择SetCurrentPercent 该方法直接显示比例换算完之后的百分数 个人感觉比UGUI方便多了
pro的相关属性 这里要注意将Type改为Tiled
hand的相关属性 滑动它可以改变进度
label只是单纯的用来显示百分比的进度
下面是效果图
当然 这些在NGUI内置的预设体中都有 个人觉得得知道它们如何完成的虽然很简单 就当加深印象,复习一遍好了 里面若有不当之处 还请指出 及时更改 多谢!!!
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(5).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(6).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(7).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(8).png)
![](file:///C:/Users/user/AppData/Local/Temp/enhtmlclip/Image(9).png)
相关文章推荐
- 第一篇 UEditor入门部署和体验
- leetcode : 4 Median of Two Sorted Arrays
- POJ 3368 Frequent values
- 【学习总结】UIGestureRecognizer(手势识别器)
- EasyUI - SplitButton 分割按钮
- Android中bluetooth的架构
- Android Bluetooth蓝牙开发\蓝牙协议\蓝牙通信例子_Android支持蓝牙4.0版本_BLE开发
- EasyUI - Menu 菜单
- UISearchBar自定义取消按钮
- 读《认知与设计:理解UI设计准则》第二章
- EasyUI - Messager消息框
- 使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- 63 Unique Paths II
- Java基础编程8-特殊流程控制语句-continue的用法
- IOS 轮播图(UIScrollView)
- UI基础控件
- UI - UITableViewControllerAndCustomCell
- EasyUI - Dialog 对话框
- 浅析Easyui Datagrid的Rownumber行号显示
- UIView基础知识