Cocos2d-x的常用UI控件

11个月前 (03-07) xiaohongmao cocos2d 0评论 已收录 875℃

GUI 控件我们大致可以分为两类,**普通控件** 和 容器控件,普通控件指的是一些常用的控件,如 UIButton,UILabel,UISlider 和 UITextField 等控件,而容器控件如 UILayout,UIScrollView,UIListView,UIPageView 等,这些容器控件都有一个特点,它可以作为容器,包含其它控件,虽然所有的控件都能够包含其它控件,但有些控件的职责非常单一,如按钮标签等,并不经常向其添加其它控件。以下详细介绍容器控件的使用方法。

使用ui控件,需要在文件里加上

 

Widget类的枚举TouchEventType,表示触摸事件的类型,枚举值为:

 

 

1.九宫格

     九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。一般用来做按钮和弹出框。

原理:绘制时会遵循下面的规则:保持4个角部分不变形单向拉伸4条边双向拉伸中间部分

 

注意:设置九宫格属性后应将缩放属性值都设置为1,否则图片仍然会出现失真。

 

可以用Scale9Sprite类生成一个支持九宫格的精灵,创建方法同Sprite

2.EditBox文本编辑框

   编辑框一般用来做信息的输入。

 

经测试 setMaxLength()setInputMode()等函数    只在手机上有效

 

创建方法:

 

用九宫格精灵创建一个固定大小的编辑框

size:按钮的大小

normalSprite:正常情况下显示的纹理

pressedSprite:选中之后显示的纹理

disabledSprite:禁用之后显示的纹理

 

 

设置输入文本的字体和大小

pFontName:输入的文本的字体文件

FontSize:  输入文本的字体大小

 

设置输入文本的颜色

color:    输入文本的颜色

 

设置提示文本的字体颜色

color:    提示文本的颜色

 

设置提示文本的内容

pText:提示文本的内容

 

设置提示文本的字体和大小

pFontName:提示文本的字体文件

FontSize:  提示文本的字体大小

 

设置编辑框允许输入的最大长度。

maxLength: 最大长度

 

定义了可以输入的文本类型

inputMode:   输入的文本类型

InputMode 枚举类型:

    ANY用户可以输入任何文本,包括换行符。

    EMAIL_ADDRESS允许用户输入一个电子邮件地址。

    NUMERIC 允许用户输入一个整数值。

    PHONE_NUMBER 允许用户输入一个电话号码

    URL 允许用户输入一个url

    DECIMAL 允许用户输入一个实数即浮点型

    SINGLE_LINE 除了换行符以外,用户可以输入任何文本

 

设置编辑框的输入标识

inputFlag:  定义如何显示和格式化输入文本

InputFlag 枚举类型有:

    PASSWORD :表明输入的文本是保密的数据,任何时候都应该隐藏起来

    SENSITIVE :表明输入的文本是敏感数据, 它禁止存储到字典或表里面,也不能用来自动补全和提示用户输入。 一个信用卡号码就是一个敏感数据的例子。

    INITIAL_CAPS_WORD :这个标志的作用是设置一个提示,在文本编辑的时候,是否把每一个单词的首字母大写。

    INITIAL_CAPS_SENTENCE :这个标志的作用是设置一个提示,在文本编辑,是否每个句子的首字母大写。

    INITIAL_CAPS_ALL_CHARACTERS:自动把输入的所有字符大写。

 

 

设置编辑框的键盘的Return类型

 

设置编辑框控件的代理类

pDelegate:   代理类

文本框的本身带有4个键盘编辑事件:

 

当点击编辑框的时候执行此函数

 

当编辑框对象编辑时失去焦点后调用的函数

 

当编辑框的内容改变的时候执行

 

当编辑框的Return按钮被按下,或者编辑框键盘以外的区域被点击时所调用。

 

4上面个键盘编辑事件写在代理类EditBoxDelegate中,故在创建时就必须公有继承其事件代理类EditBoxDelegate

 

3.text文本

   可以添加触摸事件和对齐方式的文本。

创建方法

 

 

textContent:要显示的内容

fontName:   字体文件

fontSize:   字体大小

 

 

设置文本的水平对齐方式

 

    TextHAlignment 枚举类型:

         LEFT:左对齐

       CENTER:中心对齐

        RIGHT:右对齐

 

设置文本的垂直对齐方式

 

     TextVAlignment  枚举类型:

         TOP:顶部对齐

      CENTER:中心对齐

      BOTTOM:底部对齐

 

设置是否允许触摸

enable     是否允许触摸 

 

回调函数参数:( Ref *sender,Widget::TouchEventType type);

 

 

4.Button按钮

     该控件提供了函数来设置文本按钮的显示宽高、字体、字号、对齐方式、文本内容、是否缩进等属性。

创建方法:

 

创建按钮

normalImage 正常状态纹理。

selectedImage 选中状态纹理。

disableImage 禁用状态纹理

texType       纹理资源类型

 

 

是否启用九宫格渲染

able   是否启动九宫格渲染

 

设置按钮文本

text   文本内容

 

 

回调函数内容参数:(Ref *sender, Widget::TouchEventType type)

 

5.Slider滑动条

  一般用来做音量的调节等。

创建方法:

 

创建一个滑动条

 

设置进度条的底图资源

 

设置滑动的滚轮的纹理

normal        正常状态纹理。

pressed    选中状态纹理。

disableImage 禁用状态纹理

texType       纹理资源类型

 

 

设置进度条显示完全之后背景纹理

fileName     纹理的名字

 texType     纹理资源类型

 

回调函数参数:(Ref *sender, Slider::EventType type)

 

6.loadingbar进度条

创建方法:

 

使用一个纹理和一个进度百分比创建一个LoadingBar

textureName   LoadingBar背景纹理

percentage    进度条的初始百分比

 

注意:loadingbar 更新事件用的是,小写的update()函数为系统默认的更新函数,会每帧都调用更新屏幕

  void update(float f)         参数必须为float型

 

需要执行scheduleUpdate()函数,才会每帧执行update函数

 

7.CheckBox复选框

创建方法:

 

使用一些图片来创建一个复选框

backGround           背景普通状态纹理。

backGroundSelected 背景选中状态纹理。

cross               勾选选中状态纹理

backGroundDisabled 背景禁用状态纹理。

frontCrossDisabled 勾选禁用状态纹理。

texType              纹理资源类型

 

回调函数参数个数:(Ref *sender, CheckBox::EventType type)

8.ListView列表框

lListViewLayout的一个子类,实现了在触摸屏上的滚动层。该控件提供了列表层的裁切、显示区域宽高、背景色透明度、填充色、图片资源等。

创建方法:

 

创建一个空的ListView

 

改变ListView的滚动方向。

 

dir     滚动方向

 

Direction Direction::VERTICAL  意味着垂直滚动,

Direction::HORIZONTAL          意味着水平滚动。

 

 

设置回弹效果

enabled   是否回弹

 

fileName     纹理的名字

 texType     纹理资源类型

 

 

开启背景图像scale9的渲染模式。

able       是否开启

 

插入一个自定义项到ListView的尾部。

item  一个Widget*项目

 

9.PageViewImageView 翻页

PageViewl

PageViewLayout的一个子类,实现了在触摸屏上的滚动层。该控件提供了滚动层的裁切、显示区域宽高、背景色透明度、填充色、图片资源等。

创建方法:

 

创建一个空的PageView

 

添加一个页面切换时的回调函数,当页面切换时被调用。

 

PageView的最后插入一页。

page 被插入的页

 

回调函数参数(Ref *sender, PageView::EventType type)

 

PageView里添加页面,必须通过Layout来添加,可以在Layout::addChild()函数里添加控件。

 

ImageVie

ImageView 是显示图片的小控件

使用方法类似于Sprite

 

10.测试图片滑动ScrollView

lScrollViewLayout的一个子类,实现了在触摸屏上的滚动层。该控件提供了触摸层的裁切、显示区域宽高、背景色透明度、填充色、图片资源等。

创建方法:

 

创建一个空的ScrollView

 

改变滚动视图的方向

dir     滚动方向

Direction Direction::VERTICAL  意味着垂直滚动,

Direction::HORIZONTAL          意味着水平滚动。

ScrollView::Direction::NONE    意味着禁止滚动

ScrollView::Direction::BOTH       意味着既可以垂直滚动也可以水平滚动

 

设置回弹效果

enabled   是否回弹

 

设置内部布局容器的尺寸大小,内部容器的尺寸必须大于等于滚动视图的尺寸

 

通过addChild(Node* child)来添加里边的组件

 

博主

这货来去如风,什么鬼都没留下!!!

相关推荐

嗨、骚年、快来消灭0回复。