Cocostudio(1) 容器層的使用-UILayout (Panel)

容器層的使用（UILayout (Panel)）

轉：http://www.cocos2d-x.org/docs/manual/framework/native/gui/container/zh

GUI 控件我們大致可以分為兩類，**普通控件** 和 容器控件，普通控件指的是一些常用的控件，如 UIButton，UILabel，UISlider 和 UITextField 等控件，而容器控件如 UILayout，UIScrollView，UIListView，UIPageView 等，這些容器控件都有一個特點，它可以作為容器，包含其它控件，雖然所有的控件都能夠包含其它控件，但有些控件的職責非常單一，如按鈕標簽等，並不經常向其添加其它控件。以下詳細介紹容器控件的使用方法。

UILayout (Panel)

Panel 作為最主要的容器層，前面我們說過，由 CocoStudio UI 編輯器所創建的 UI 是基於 Panel 來布局的，要想熟練的使用 UI 控件，了解 Panel 以及其屬性也是重中之重，既然是容器，容器里面總得有些內容了，Panel 對應得控件名稱為 UILayout。

Size widgetSize = m_pWidget->getSize();
UILayout *background = dynamic_cast<UILayout*>(m_pUiLayer->getWidgetByName("background_Panel"));

// Create the layout
UILayout* layout = UILayout::create();
layout->setSize(Size(280, 150));
Size backgroundSize = background->getSize();
layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
                         (backgroundSize.width - layout->getSize().width) / 2,
                         (widgetSize.height - backgroundSize.height) / 2 +
                         (backgroundSize.height - layout->getSize().height) / 2));
m_pUiLayer->addWidget(layout);

UIButton* button = UIButton::create();
button->setTouchEnabled(true);
button->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");
button->setPosition(Point(button->getSize().width / 2, layout->getSize().height - button->getSize().height / 2));
layout->addChild(button);

UIButton* textButton = UIButton::create();
textButton->setTouchEnabled(true);
textButton->loadTextures("cocosgui/backtotopnormal.png", "cocosgui/backtotoppressed.png", "");
textButton->setTitleText("Text Button");
textButton->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(textButton);

UIButton* button_scale9 = UIButton::create();
button_scale9->setTouchEnabled(true);
button_scale9->loadTextures("cocosgui/button.png", "cocosgui/buttonHighlighted.png", "");
button_scale9->setScale9Enabled(true);
button_scale9->setSize(Size(100, button_scale9->getContentSize().height));
button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2, button_scale9->getSize().height / 2));
layout->addChild(button_scale9);

如上面代碼所示，我們創建了一個 layout 控件，然后在其中添加了三個控件。m_pUiLayer 是當前場景的一個 UILayer ，前面我們介紹過，所有的 UI 控件，都是放在 UILayer 里面，UILayer 管理所有的控件，並添加到當前場景中去。顯示效果如下：

我們設置了 layout 的 size 屬性，也就是給它一個大小，但是並沒有顯示出來效果，默認是透明的，我們可以為這個層設置顏色：

 

layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);
layout->setBackGroundColor(Color3B(128, 128, 128));

 

當然，除了設置顏色之外，還可以設置我們想要的背景圖片：

layout->setSize(Size(280, 150));
layout->setClippingEnabled(true);
layout->setBackGroundImage("cocosgui/Hello.png");

如上圖顯示，我們設置了 size 並且設置了 背景圖片，但是不要忘了調用 setClippingEnabled 方法根據 size 進行裁剪，如果忘了調用，那么會向下面所顯示的一樣。

除了以上使用方式，還有其它玩法：

layout->setBackGroundImageScale9Enabled(true);
layout->setBackGroundImage("cocosgui/green_edit.png");

使用九宮格圖片做為背景，注意啟用此功能。

UILayout 顯示顏色的模式有三種

LayoutBackGroundColorType	說明
LAYOUT_COLOR_NONE	透明，沒有顏色顯示
LAYOUT_COLOR_SOLID	實體，可以設置顏色
LAYOUT_COLOR_GRADIENT	漸變顏色

UIPanel 控件的布局方案

UILayout 是作為布局之用，以上都只是修改背景圖片，下面除了手動擺放坐標位置的絕對定位，還提供了哪些布局方案呢。

LayoutType	說明
LAYOUT_ABSOLUTE	絕對布局
LAYOUT_LINEAR_VERTICAL	垂直平鋪
LAYOUT_LINEAR_HORIZONTAL	橫向平鋪
LAYOUT_RELATIVE	相對布局

layout->setLayoutType(LAYOUT_LINEAR_VERTICAL);
// 或者
layout->setLayoutType(LAYOUT_LINEAR_HORIZONTAL);
// 或者
layout->setLayoutType(LAYOUT_RELATIVE);

注意：除了絕對定位之外，如果設置了其它布局方案，那么 UIPanel 會忽略其內部控件本身設置的位置。而此時可以使用提供的UILayoutParameter 來設置位置關系，根據布局方案提供了幾種布局參數， UILinearLayoutParameter 和UIRelativeLayoutParameter。下面介紹如何實用布局參數來配合布局設計界面顯示效果。

layout->setLayoutType(LAYOUT_LINEAR_VERTICAL);
// .... 省略控件創建代碼，同前文控件一樣
UILinearLayoutParameter* lp1 = UILinearLayoutParameter::create();
lp1->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
lp1->setMargin(UIMargin(0, 10, 0, 10));

UILinearLayoutParameter* lp2 = UILinearLayoutParameter::create();
lp2->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
lp2->setMargin(UIMargin(20, 20, 0, 5));

UILinearLayoutParameter* lp3 = UILinearLayoutParameter::create();
lp3->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
lp3->setMargin(UIMargin(0, 10, 0, 10));

button->setLayoutParameter(lp1);
textButton->setLayoutParameter(lp2);
    button_scale9->setLayoutParameter(lp3);

顯示效果如下：

我們看到，分別創建了三個布局參數 UILinearLayoutParameter，設置了 Gravity 和 Margin 參數，然后給三個 UIPanel 的內部控件分別設置其布局參數值，已達到如上效果。

這里使用的方案是垂直平鋪，而每個布局參數設置的 Gravity 值為 LINEAR_GRAVITY_CENTER_HORIZONTAL，也就是說水平劇中顯示，而 Margin 則標示控件四周邊緣的間距，注意以上的 lp2 的值為 UIMargin(20, 20, 0, 5)，其代表含義，距離左、上、右、下的間距。左值為 20，可以看見 textButton 相對中間位置向右便宜少數。這是垂直布局，而水平布局除了方向不一，基本使用方式同垂直布局同樣。兩者也都叫 線性布局，使用同樣的線性布局參數。下面再看看相對布局：

    layout->setLayoutType(LAYOUT_RELATIVE);

    // 此處省略控件的創建步驟 ...

    UIRelativeLayoutParameter* rp1 = UIRelativeLayoutParameter::create();
    rp1->setAlign(RELATIVE_ALIGN_PARENT_TOP_RIGHT);

    UIRelativeLayoutParameter* rp2 = UIRelativeLayoutParameter::create();
    rp2->setAlign(RELATIVE_ALIGN_PARENT_LEFT_CENTER_VERTICAL);

    UIRelativeLayoutParameter* rp3 = UIRelativeLayoutParameter::create();
    rp3->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM);

    button->setLayoutParameter(rp1);
    textButton->setLayoutParameter(rp2);
    button_scale9->setLayoutParameter(rp3);

這里創建了三個布局屬性，設置了不同的 "停靠" 參數 Align 。