cocos UI控件几乎都继承自widget

最新推荐文章于 2024-12-11 23:45:29 发布

ylwdi

最新推荐文章于 2024-12-11 23:45:29 发布

阅读量1.3k

点赞数 1

分类专栏： COCOSX2D+lua开发

COCOSX2D+lua开发专栏收录该内容

9 篇文章

订阅专栏

游戏开发中，经常会使用到很多有关界面的控件，这些都属于UI控件。

看了一下cocos里面的各种控件，几乎所有UI控件的基类都继承Widget类，目前看是这样，这个类是节点类的一种，若要自定义UI控件，继承这个类是必须的。

Widget类里包含了：

FocusDirection 控件焦点方向

PositionType 布局系统中的控件位置类型

SizeType 布局系统中的控件尺寸类型

TouchEventType 触摸事件类型

TextureResType 纹理资源类型

BrightStyle 控件的高亮属性

ccWidgetTouchCallback 控件触摸事件回调

ccWidgetClickCallback 控件点击事件回调

ccWidgetEventCallback 空间用户定制事件等(与CocosStudo一起使用)

同时还包含了这些属性的各种相关方法，功能十分强大，由于太多不一一列出来，有兴趣可以查看官方API。

那这些控件要怎样排版呢？这个时候就涉及到Layout类，一般来说，我们称其为页面视图控件，每一个页面是一个Layout类。

Layout类中的常用方法

static Layout* create() //创建一个Layout对象

virtual void addChild(Node * child) //向其添加一个子节点，一般添加控件Widget的子类

void setBackGroundImage(const std::string& fileName,TextureResType=UI_TEX_TYPE_LOCAL) 设置页面背景图

void setBackGroundColor(const Color3B& color) //设置背景颜色 ※相对的还有get方法

void setBackGroundColor(const Color3B& startColor,const Color3B& endColor) //设置背景颜色，参数一是开始时颜色，参数二是结束时背景颜色 ※相对的还有获取2个状态颜色的get方法

void setBackGroundImageColor(const Color3B& color) //设置背景图像的颜色 ※相对的还有get方法

void removeBackGroundImage() //删除背景图像

const Size& getBackGroundImageTextureSize() //获取背景图像尺寸

除了可以自定义UI控件外，Cocos2dx原本就已经为我们准备了一套简单易懂功能齐全的UI控件。

以下列表只列出常用的方法，更多其他方法可以查询官网API

1、文本标签控件-Text

该控件可以在屏幕上显示指定文本内容，跟LabelTTF很像。

static Text* create //默认创建对象方法

void setText(const std::string& text) //设置此控件显示的文本内容

const std::string& getStringValue() //获得显示文本内容

void setFontSize(int size) //设置此控件显示文本时采用的字体尺寸

void setFontName(const std::string& name) //设置控件采用的字体式样，参数是样式字体名

void setTextAreaSize(const Size& size) //设置控件文本区域的尺寸

void setTextHorizontalAlignment(TextHAlignment alignment) //设置控件水平个对齐方式

void setTextVerticalAlignment(TextVAlignment alignment) //设置控件垂直个对齐方式

建立示例：

auto text = Text::create();

text->setFontName("fonts/starcraft.ttf");

text->setText("text");

text->setFontSize(40);

text->setPosition(300,300); //接下来的省略这个步骤

addChild(text);

2、按钮控件-Button

该控件可以在屏幕上添加必要的按钮

static Button* create() //创建一个Button对象，跟MenuItem很像

void loadTextures(const std::string& normal,const std::string& selected,const std::string& disabled="",TextureResType texType=UI_TEX_TYPE_LOCAL) //为按钮加载纹理，参数一是控件未选中时图片路径，参数二是被选中时的，参数三是被禁用状态下的图片，参数四表示才用纹理类型。参数有两个，一个是UI_TEX_TYPE_LOCAL表示直接才用路径文件，UI_TEX_TYPE_PLIST由Plist文件加载纹理

void setPressedActionEnabled(bool enabled) //设置按钮被按下时是否变大

void setTitleText(const std::string& text) //设置按钮显示文本

void setTitleColor(const Color3B& color) //设置文本颜色

void setTitleFontSize(float size) //设置显示的文本字体尺寸

void setTitleFontName(const std::string& fontName) //设置按钮显示的文本字体样式

void addTouchEventListener(Ref* target,SEL_TouchEvent selector) //来自父类的方法，要使按钮按下后制定执行任务，必须为其添加监听器。

建立示例：

auto * button = Button::create();

button->setTitleText("有种按我");

button->setTitleFontSize(16);

button->loadTextures("pic/button1.png","pic/button2.png","",UI_TEX_TYPE_LOCAL);

button->addTouchEventListener(this,toucheventselector(Layer::buttonEvent));//添加监听

buttonEvent(Object * pSender,TouchEventType type){监听回调函数

switch(type){

case ui::TOUCH_EVENT_BEGAN: //当按钮被按下时

......;

case ui::TOUCH_EVENT_MOVED: //手指在按钮上移动时

......;

case ui::TOUCH_EVENT_ENDED: //按钮抬起时

......;

case ui::TOUCH_EVENT_CANCELED: //按钮取消时

......;

}}

3、静态图像控件-ImageView

该控件可以用于游戏画面中一些静态物体的显示，跟静态经历相似。

static ImageView* create() //创建一个对象

void loadTexture(const std::string& fileName,TextureResType texType=UI_TEX_TYPE_LOCAL) //为图像显示控件加载纹理，参数一是文件路径，而是采用类型。

建立示例：

auto imageView = ImageView::create();

imageView->loadTexture("pic/bg.png",UI_TEX_TYPE_LOCAL);

4、自定义字体文本控件-TextAtlas

该控件跟LabelAtlas非常相似，通过预渲染所有字符的纹理来绘制字符串

static TextAtlas* create() //创建一个对象

void setProperty(const std::string& stringValue,const std::string& charMapFile,int itemWidth,int itemHeight,const std::string& startCharMap) //初始化字符串，参数一为要显示字符串，参数二是字体图偏，参数三是字体宽度，参数四是字体高度，参数五是字体起始字符

void setString Value(const std::string& value) //设置字符串文本

const std::string& getStringValue() //获取文本字符串

建立示例：

auto textAtlas = TextAtlas::create();

textAtlas->setProperty("0123456789","fonts/number.png",16,30,"0");

5、位图文本控件-TextBMFont

类似LabelBMFont,通过fnt字体坐标文件来进行文本渲染。

static TextBMFont* create() //创建一个TextBMFont对象

void setFntFile(const std::string& fileName) //设置显示文本所采用的字体式样文件路径

void setText(const std::string& value) //设置显示文本

const std::string& getStringValue() //获取文本字符串

建立示例：

auto textBMFont = TextBMFont::create();

textBMFont->setFntFile("fonts/dd.fnt");

textBMFont->setText("0123465");

6、进度条控件-LoadingBar

显示进度加载时使用，没有设置进度条最大值的方法。

static LoadingBar* create() //创建一个对象

void setDirection(LoadingBarType dir) //设置进度条进度加载的方向，参数有LoadingBarTypeLeft和LoadingBarTypeRight。

int getDirection() //获取进度条加载方向

void loadTexture(const std::string& texture,TextureResType texType=UI_TEX_TYPE_LOCAL) //为进度条加载纹理，参数一是加载纹理图片的路径，参数二是才用纹理类型。

void setPercent(int percent) //设置进度条加载百分比

int getPercent() //获取加载百分比

建立示例：

auto loadingBar = LoadingBar::craete();

loadingBar->loadTexture("pic/bar.png",UI_TEX_TYPE_LOCAL);

loadingBar->setPercent(50);

7、拖拉条控件-Slider

该控件用于游戏中需要拖拉调节某项值的大小的情况，比如拖拉声量大小等。

static Slider* create() //创建一个对象

void loadBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL) //为未进行拖拉时的进度条加载纹理，参数一是加载纹理图片的路径，参数二是采用纹理类型。

void loadProgressBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL) //为正在拖拉时的进度条加载纹理，参数一是加载纹理图片路径，参数二是采用纹理类型。

void loadSlidBallTexture(const std::string& normal,const std::string& pressed,const std::string& disabled,TextureResType texType=UI_tEX_TYPE_LOCAL)　//为拖拉条上的游标加载纹理，参数一是游标没被选中时图片路径，参数二是被按下时的图片路径，参数三是被禁用时的图片路径，参数四是纹理类型。

void

void setPercent(int percent) //设置拖拉条百分比

int getPrecent //获取进度条百分比

void addEventListenerSlider(Ref* target，SEL_SlidPercentChangedEvent selector) //为拖拉条设置监听，参数一指向带有事件处理方法的对象指针，参数二是指向对应的处理方法的指针

建立示例：

auto slider = Slider::Create();

slider->loadBarTexture("pic/sliderTrack.png");

slider->loadSlidBallTextures("pic/sliderBall1.png","pic/sliderBall2.png","",UI_tEX_TYPE_LOCAL);

slider->loadProgressBarTexture("pic/sliderProgress.png");

slider->adddEventListenerSlider(this,Sliderpercentchangedselector(Layer::sliderBarEvent)); //添加监听器

sliderBarEvent(Oject* pSender,SliderEventType type){ //监听函数参数

if(type == SLIDER_PERCENTCHANGED){