Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局

Cocos2d-x 3.9教程

8. Cocos2d-x中的4种布局

Cocos2d-x中一共有4种布局:ABSOLUTE(绝对布局)、HORIZONTAL(水平布局)、VERTICAL(垂直布局)和RELATIVE(相对布局)。

注意,只有在绝对布局内部,组件使用setPosition()方法来指定其位置。另外三种布局中的组件,setPosition()方法将不起任何作用!必须通过布局本身和组件的setLayoutParameter()方法,来改变其布局的属性!

1.1. ABSOLUTE(绝对布局)

第一种绝对布局非常简单,也就是根据坐标确定每个内部组件的位置,也是我们平时使用的默认方式。

1.2. HORIZONTAL(水平布局)

1.2.1. 基本用法

第二种水平布局,属于线形布局LINEAR_LAYOUT的一种。所有组件只占一行,按顺序向右排列。效果如下:

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第1张图片

注意,上图中背后红色部分是布局覆盖的区域,组件可以排列到布局外面!

通过修改内部组件的布局参数,达到修改布局对齐样式的效果。

#include "ui/UILayout.h"

//布局1*****************************************

Layout *layout1 = Layout::create();

纯色

layout1->setBackGroundColorType(Layout::BackGroundColorType::SOLID);

layout1->setBackGroundColor(Color3B::RED);

 

//layout1->setBackGroundColorType(Layout::BackGroundColorType::GRADIENT);//渐变色

//layout1->setBackGroundColor(Color3B::RED, Color3B::BLUE);

//设置背景图片

//layout->setBackGroundImage("HelloWorld.png");

layout1->setContentSize(Size(800, 180));

layout1->setPosition(Vec2(50, 400));

layout1->setLayoutType(Layout::Type::HORIZONTAL);//水平布局,所有组件在一行

 

此时对layout1设定布局属性无效,因为布局属性是其作为组件时,相对容器的属性!

//LinearLayoutParameter *linerP = LinearLayoutParameter::create();

//linerP->setGravity(LinearLayoutParameter::LinearGravity::RIGHT);

//layout1->setLayoutParameter(linerP);

 

this->addChild(layout1);

 

Button *button1 = Button::create("button.png");

//除了绝对布局以外,setPosition将不起作用!

//button1->setPosition(Vec2(200, layout1->getContentSize().height / 2));

 

//设定button1组件在layout中的布局位置属性

LinearLayoutParameter *linerP1 = LinearLayoutParameter::create();

linerP1->setGravity(LinearLayoutParameter::LinearGravity::CENTER_VERTICAL);//垂直居中

button1->setLayoutParameter(linerP1);//按钮1使用该线形布局属性

layout1->addChild(button1);

 

Button *button2 = Button::create("button_normal.png");

//设定button2组件在layout中的布局位置属性

LinearLayoutParameter *linerP2 = LinearLayoutParameter::create();

linerP2->setGravity(LinearLayoutParameter::LinearGravity::BOTTOM);//贴下部排列

button2->setLayoutParameter(linerP2);//按钮1使用该线形布局属性

layout1->addChild(button2);

 

Button *button3 = Button::create("potentiometerButton.png");

//设定button3组件在layout中的布局位置属性

LinearLayoutParameter *linerP3 = LinearLayoutParameter::create();

linerP3->setGravity(LinearLayoutParameter::LinearGravity::TOP);//贴上部排列,默认属性,不用设定

button3->setLayoutParameter(linerP3);//按钮1使用该线形布局属性

layout1->addChild(button3);

 

//Button *button4 = Button::create("button.png");ayout1->getContentSize().height / 2));

 

//layout1->addChild(button4);

 

//Button *button5 = Button::create("button.png");

//layout1->addChild(button5);

 

//布局1*****************************************

最终效果如下:

 

注意,对于水平布局来讲,只能设定垂直方向的布局属性,比如上、中、下对齐。水平方向的对齐方式是无效的(如左、右)!

1.2.2. margin留白

若想在button1左边再空出100像素,则需要对layoutParameter设定margin(留白)。如:

linerP1->setMargin(Margin(100, 0, 0, 0));//左边“留白”100像素

效果如下:

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第2张图片

注意,对于水平布局,组件只能设定左、右方向的margin(留白),上、下方向留白是无效的!如下代码,对于button2来讲是无效的:

linerP2->setMargin(Margin(0, 0, 0, 100));//下边“留白”100像素。无效,水平排列布局只能设定左右margin!

1.2.3. 动态改变布局属性

比如我们若要在上述例子中的layout1中(水平布局),点下button1时,改变button2的margin,让其左边留白100像素。那么我们做如下改造:

layout1->setTag(1);//给layout1设定tag,方便在回调中找到

button2->setTag(100);//给button2设定tag,方便在回调中找到

button1->addClickEventListener(CC_CALLBACK_1(HelloWorld::onClicked, this));

void HelloWorld::onClicked(Ref* pSender)

{

//第一次getChild获得的是layout1,第二次getChild获得是button2

Button *button2 = (Button*)this->getChildByTag(1)->getChildByTag(100);

 

//给button2的laoutParmeter重新设置Margin

button2->getLayoutParameter()->setMargin(Margin(100, 0, 0, 0));

//让layout1重新进行布局(无此句不生效)

((Layout*)getChildByTag(1))->requestDoLayout();

}

注意最后一句代码,为了让layoutParameter动态的改变并生效,必须在改变后,调用其父节点、容器(button1的父节点是layout1)的requestDoLayout()方法。因为布局及参数在cocos2d-x中的设定,是在创建时初始化,在运行时产生效果的,设定布局属性是一种静态行为。因此,我们需要在运行时改变布局属性后,调用一下requestDoLayout(),让其重新进行布局。

另外需要注意的是,改变某个节点(比如button1)的布局属性,应当让其父节点更新布局信息!(重新布局其内部的子节点)

1.3. VERTICAL(垂直布局)

1.3.1. 基本用法

第三种垂直布局,属于线形布局LINEAR_LAYOUT的一种,所有组件在同一列,也就是每一行只有一个组件。效果如下:

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第3张图片

注意,跟水平布局类似,垂直布局中的每个组件往下排列,也可以排列到布局外面!

通过修改内部组件的布局参数,达到修改布局对齐样式的效果。

#include "ui/UILayout.h"

//布局2*****************************************

Layout *layout2 = Layout::create();

//纯色

layout2->setBackGroundColorType(Layout::BackGroundColorType::SOLID);

layout2->setBackGroundColor(Color3B::BLUE);

//设置背景图片

//layout2->setBackGroundImage("HelloWorld.png");

layout2->setContentSize(Size(800, 180));

layout2->setPosition(Vec2(50, 200));

layout2->setLayoutType(Layout::Type::VERTICAL);

//layout2->setLayoutParameter(LayoutParameter::Type::)

 

this->addChild(layout2);

{

Button *button1 = Button::create("button.png");

//设定button1组件在layout中的布局位置属性

LinearLayoutParameter *linerP1 = LinearLayoutParameter::create();

linerP1->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);//水平居中

button1->setLayoutParameter(linerP1);//按钮1使用该线形布局属性

layout2->addChild(button1);

 

Button *button2 = Button::create("button_normal.png");

//设定button2组件在layout中的布局位置属性

LinearLayoutParameter *linerP2 = LinearLayoutParameter::create();

linerP2->setGravity(LinearLayoutParameter::LinearGravity::RIGHT);//水平居中

button2->setLayoutParameter(linerP2);//按钮1使用该线形布局属性

layout2->addChild(button2);

 

Button *button3 = Button::create("potentiometerButton.png");

//设定button3组件在layout中的布局位置属性

LinearLayoutParameter *linerP3 = LinearLayoutParameter::create();

linerP3->setGravity(LinearLayoutParameter::LinearGravity::LEFT);//贴左部排列,默认属性,不用设定

layout2->addChild(button3);

}

//布局2*****************************************

最终效果如下:

 

1.3.2. margin留白

若想在button1上边再空出100像素,则需要对layoutParameter设定margin(留白)。如:

linerP1->setMargin(Margin(0, 100, 0, 0));//上边“留白”100像素

效果如下:

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第4张图片

上图中,button2button3会在button1的下面连续插入,所以会出layout的边界。

注意,对于垂直布局,组件只能设定上、下方向的margin(留白),左、右方向留白是无效的!如下代码,对于button2来讲是无效的:

linerP2->setMargin(Margin(0, 0, 100, 0));//右边“留白”100像素。无效,垂直排列布局只能设定上下margin!

1.3.3. 动态改变布局属性

与水平布局类似,详见8.2.3章节内容。

1.4. RELATIVE(相对布局)

1.4.1. 基本用法

第四种相对布局,所有组件之间按照相对位置和相对依存位置关系来排列。默认情况下,若无指定相对布局位置属性时,添加的组件会在布局左上角“堆叠”起来。效果如下:

 

我们使用相对布局时,必须设定每个组件的相对位置信息。对于水平、垂直布局,使用的是LinearLayoutParameter,而对于相对布局,则需使用RelativeLayoutParameter

#include "ui/UILayout.h"

//布局3*****************************************

Layout *layout3 = Layout::create();

//纯色

layout3->setBackGroundColorType(Layout::BackGroundColorType::SOLID);

layout3->setBackGroundColor(Color3B::YELLOW);

//设置背景图片

//layout3->setBackGroundImage("HelloWorld.png");

layout3->setContentSize(Size(800, 180));

layout3->setPosition(Vec2(50, 200));

layout3->setLayoutType(Layout::Type::RELATIVE);

 

this->addChild(layout3);

{

Button *button1 = Button::create("button.png");

button1->setPosition(Vec2(200, layout3->getContentSize().height / 2));

RelativeLayoutParameter * rp1 = RelativeLayoutParameter::create();

rp1->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT);

rp1->setMargin(Margin(30, 30, 0, 0));

rp1->setRelativeName("button1");//给组件布局属性设置一个名字,别人可以找到它

button1->setLayoutParameter(rp1);

layout3->addChild(button1);

 

Button *button2 = Button::create("button_normal.png");

button2->setPosition(Vec2(50, layout3->getContentSize().height / 2));

RelativeLayoutParameter * rp2 = RelativeLayoutParameter::create();

//在目标的上方,且右侧与目标右侧对齐

rp2->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_RIGHTALIGN);

rp2->setRelativeToWidgetName("button1");//设定当前组件要与哪个组件对齐

rp2->setRelativeName("button2");//给组件布局属性设置一个名字,别人可以找到它

button2->setLayoutParameter(rp2);

layout3->addChild(button2);

 

Button *button3 = Button::create("potentiometerProgress.png");

RelativeLayoutParameter * rp3 = RelativeLayoutParameter::create();

//组件在目标的右侧,下侧与目标的下侧对齐

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_BOTTOMALIGN);

rp3->setRelativeToWidgetName("button1");//设定当前组件要与哪个组件对齐

button3->setLayoutParameter(rp3);//给组件布局属性设置一个名字,别人可以找到它

 

layout3->addChild(button3);

}

//布局3*****************************************

最终效果如下:

 

1.4.2. margin留白

与线形布局类似,每个组件本身可以设定留白margin,来控制自身与其他组件之间的位置。

比如,我们把上图中粉色的button3,左侧与button1远离100像素:

 

而我们去掉button3的留白,让button1设定右侧留白100像素:

//rp3->setMargin(Margin(100, 0, 0, 0));

rp1->setMargin(Margin(30, 30, 100, 0));

是没有任何效果的:

 

原因是我们让button3主动去对齐button1,因此应当调整button3的margin来与button1对齐。而对于button1来讲,其并不知道button3的存在(即不知道谁与它对齐了),因此不应调整button1的margin来实现上述效果。

1.4.3. 组件之间的相对布局例举

下面例举一些组件之间的(下述例子都是button3相对于button1的布局),相对布局的属性和位置关系:

1. LOCATION_ABOVE_CENTER

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_CENTER);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第5张图片

2. LOCATION_ABOVE_LEFTALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_LEFTALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第6张图片

3. LOCATION_ABOVE_RIGHTALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_RIGHTALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第7张图片

4. LOCATION_BELOW_CENTER

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_CENTER);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第8张图片

5. LOCATION_BELOW_LEFTALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_LEFTALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第9张图片

6. LOCATION_BELOW_RIGHTALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_RIGHTALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第10张图片

7. LOCATION_LEFT_OF_BOTTOMALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_BOTTOMALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第11张图片

8. LOCATION_LEFT_OF_CENTER

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_CENTER);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第12张图片

9. LOCATION_LEFT_OF_TOPALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_TOPALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第13张图片

10. LOCATION_RIGHT_OF_BOTTOMALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_BOTTOMALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第14张图片

11. LOCATION_RIGHT_OF_CENTER

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_CENTER);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第15张图片

12. LOCATION_RIGHT_OF_TOPALIGN

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_TOPALIGN);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第16张图片

1.4.4. 组件与父节点(容器)之间的相对布局例举

下面例举一些组件之间的(下述例子都是button3相对于layout1的布局),相对布局的属性和位置关系:

1. CENTER_IN_PARENT

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);

 Cocos2d-x 3.9教程:8. Cocos2d-x中的4种布局_第17张图片

2. PARENT_BOTTOM_CENTER_HORIZONTAL

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_BOTTOM_CENTER_HORIZONTAL);

 

3. PARENT_LEFT_BOTTOM

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BOTTOM);

 

4. PARENT_LEFT_CENTER_VERTICAL

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL);

 

5. PARENT_RIGHT_BOTTOM

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM);

 

6. PARENT_RIGHT_CENTER_VERTICAL

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL);

 

7. PARENT_TOP_CENTER_HORIZONTAL

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL);

 

8. PARENT_TOP_LEFT

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT);

 

9. PARENT_TOP_RIGHT

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT);

 

最后需要注意,一个组件已经设定了父节点的相对布局对齐方式,那么其再设定与其他节点的对齐留白距离,是无效的:

rp3->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT);

rp3->setRelativeToWidgetName("button1");

rp3->setMargin(Margin(100, 0, 0, 0));//无效

button3->setLayoutParameter(rp3);

上述代码的结果,依然是button3在layout1的右上侧对齐:

 

1.4.5. 动态改变布局属性

与线形布局中水平布局类似,详见8.2.3章节内容。


你可能感兴趣的:(cocos2d-x)