Hello Bada!详解之四：Bada UI的布局

如何布局

在Bada项目的目录结构中提到了/Res目录，我们的UI布局文件就在这里，见下图：

双击IDF_BUDDYFIXFORM.xml，打开UI Builder（默认是用Form Editor打开），如图：

如你亲眼所见，这是个可以拖拽的UI布局。之前一直在做Android，界面布局都是手写的，直到Android4.1发布后最新的UI工具才有比较舒服的拖拽布局。

这种所见即所得的布局方式起源于VB，在WM、iPhone上都可以看到它的影子。找到布局文件下面的properties，在这里可以设置样式（style）、布局（layout）、

属性（properties）、事件处理（eventHandler）及弃用项（deprecated）。

Form的属性：

1、样式：Footer、Header和Indicator

下面来设置一下不要indicator，显示Header和Footer：

模拟器中显示为：

正如你所看到的，Indicator（屏幕最上面的显示信号、电量的bar）不见了，程序变成了全屏。而Footer上没有任何东西。

2、布局：布局的样式有NONE、LAYOUT_RELATIVE、LAYOUT_VERTICAL_BOX、LAYOUT_HORIZONTAL_BOX和LAYOUT_GRID

3、属性：ID、背景色、水平方式、Header、Footer等是否透明

4、事件处理：这里添加相关的事件Handler

5、弃用项：设置一些Form相关的按钮等。

Button的属性：

1、Style：在模拟器中看到Button的文字在中间显示，这是通过设置Style下的Text Horizontal Align与Text Vertical Align来实现的，如下图：

2、Layout：Button的布局还是很讲究的，这与其他控件的布局类似，会设置了Button，其他的就会融汇贯通。布局概览如下：

首先，Parent Name是选择Button在哪个容器上，这里只有一个Form，当然就是它了。而Height和Width是设置高和宽的。

下面说说几个互斥的属性：

居中属性：Center Horizontal和Center Vertical。

绝对坐标：X Position和Y Position。

设置了Center Horizontal为true，那么X Position属性就不可用（灰色状态）。

同样，设置Center Vertical为true，那么Y Position属性不可用。

靠边属性：有四个靠边属性，分别是上下左右。注意：如果居中属性设置了，靠边属性是可以设置的，只是不能显示出来，优先级不高。

一个Edge Relation Target跟着一个Edge Relation Type。

余量属性：四个靠边属性对应着四个余量属性，Margin Bottom等等。

下面演示一下靠下属性和余量属性配合：

UI显示：

3、属性：

重要的Name：起一个容易懂的名字有指导性。

Text：button上面显示的文字。

Text Size：文字的大小。

其他属性与颜色和bitmap有关，就不一一介绍了。

4、事件处理：

这里只用到了ActionEvent。

其他Editor

刚刚是用Form Editor打开Form.xml文件，其实还可以用Text Editor和Xml Editor打开编辑，这样就不是所见即所得的UI 布局了，和原来的Android布局非常相似，有兴趣你可以尝试一下。

与代码连接：

介绍完了布局，那么一个重要的问题是：在程序中如何控制UI的属性呢？

自然不自然的，让我联想到Android中的做法了：声明一个控件如Button，用系统提供的findViewById来找到定义在xml文件中Button。

比如：

private Button okButton;   

    @Override    
    public void onCreate(Bundle savedInstanceState) {     
        super.onCreate(savedInstanceState);     
        setContentView(R.layout.main); 
okButton = (Button)  findViewById(R.id.btnOk);  
}

同样的，Bada在Form类的声明一个控件，然后加载Form的xml文件，用系统提供的GetControl来找到xml文件中的控件。

这一切是多么的相似呢？是偶然还是必然？

Form头文件：

// Implementation  
protected:  
    static const int ID_BUTTON_OK = 101;  
    Osp::Ui::Controls::Button *__pButtonOk;  
    Osp::Ui::Controls::Label *__pLabel;  

实现：

bool  
HelloworldForm::Initialize()  
{  
    // Construct an XML form  
    Construct(L"IDF_HELLOWORLDFORM");  
  
    return true;  
}  
  
result  
HelloworldForm::OnInitializing(void)  
{  
    result r = E_SUCCESS;  
  
    // TODO: Add your initialization code here  
  
    // Get a button via resource ID  
    __pButtonOk = static_cast<Button *>(GetControl(L"IDC_BUTTON_OK"));  
    if (__pButtonOk != null)  
    {  
        __pButtonOk->AddTouchEventListener(*this);  
        __pButtonOk->SetActionId(ID_BUTTON_OK);  
        __pButtonOk->AddActionEventListener(*this);  
    }  
    //Get a label  
    __pLabel = static_cast<Label *>(GetControl(L"IDC_LABEL1"));  
    return r;  
}  

Button的事件处理：

void
BuddyFixForm::OnActionPerformed(const Osp::Ui::Control& source, int actionId)
{
	switch(actionId)
	{
	case ID_BUTTON_OK:
		{
			AppLog("OK Button is clicked! \n");
		}
		break;
	default:
		break;
	}
}

到此，Bada详解就到一段落。通过这个例子大致了解到了Bada应用的基本知识和开发流程，透过这个例子，希望可以让你步入Bada应用开发的大门。