布局
# 垂直布局: vertical
垂直布局是一种比较简单的布局，会把在它里面的控件按照垂直方向依次摆放，如下图所示：
垂直布局:
—————
| 控件1 |
| 控件2 |
| 控件3 |
| ............ |
——————
## layout_weight
垂直布局中的控件可以通过layout_weight属性来控制控件高度占垂直布局高度的比例。如果为一个控件指定layout_weight, 则这个控件的高度=垂直布局剩余高度 * layout_weight / weightSum；如果不指定weightSum, 则weightSum为所有子控件的layout_weight之和。所谓"剩余高度"，指的是垂直布局中减去没有指定layout_weight的控件的剩余高度。 例如:
```xml
"ui";
ui.layout(
<vertical h="100dp">
<text layout_weight="1" text="控件1" bg="#ff0000"/>
<text layout_weight="1" text="控件2" bg="#00ff00"/>
<text layout_weight="1" text="控件3" bg="#0000ff"/>
</vertical>
);
```
在这个布局中，三个控件的layout_weight都是1，也就是他们的高度都会占垂直布局高度的1/3，都是33.3dp. 再例如：
```xml
"ui";
ui.layout(
<vertical h="100dp">
<text layout_weight="1" text="控件1" bg="#ff0000"/>
<text layout_weight="2" text="控件2" bg="#00ff00"/>
<text layout_weight="1" text="控件3" bg="#0000ff"/>
</vertical>
);
```
在这个布局中，第一个控件高度为1/4, 第二个控件为2/4, 第三个控件为1/4. 再例如：
```
"ui";
ui.layout(
<vertical h="100dp" weightSum="5">
<text layout_weight="1" text="控件1" bg="#ff0000"/>
<text layout_weight="2" text="控件2" bg="#00ff00"/>
<text layout_weight="1" text="控件3" bg="#0000ff"/>
</vertical>
);
```
在这个布局中，因为指定了weightSum为5, 因此第一个控件高度为1/5, 第二个控件为2/5, 第三个控件为1/5. 再例如：
```xml
"ui";
ui.layout(
<vertical h="100dp">
<text h="40dp" text="控件1" bg="#ff0000"/>
<text layout_weight="2" text="控件2" bg="#00ff00"/>
<text layout_weight="1" text="控件3" bg="#0000ff"/>
</vertical>
);
```
在这个布局中，第一个控件并没有指定layout_weight, 而是指定高度为40dp, 因此不加入比例计算，此时布局剩余高度为60dp。第二个控件高度为剩余高度的2/3，也就是40dp，第三个控件高度为剩余高度的1/3，也就是20dp。
垂直布局的layout_weight属性还可以用于控制他的子控件高度占满剩余空间，例如：
```xml
"ui";
ui.layout(
<vertical h="100dp">
<text h="40dp" text="控件1" bg="#ff0000"/>
<text h="40dp" text="控件2" bg="#00ff00"/>
<text layout_weight="1" text="控件3" bg="#0000ff"/>
</vertical>
);
```
在这个布局中，第三个控件的高度会占满除去控件1和控件2的剩余空间。
# 水平布局: horizontal
水平布局是一种比较简单的布局，会把在它里面的控件按照水平方向依次摆放，如下图所示： 水平布局: ————————————————————————————
| 控件1 | 控件2 | 控件3 | ... |
————————————————————————————
## layout_weight
水平布局中也可以使用layout_weight属性来控制子控件的宽度占父布局的比例。和垂直布局中类似，不再赘述。
# 线性布局: linear
实际上，垂直布局和水平布局都属于线性布局。线性布局有一个orientation的属性，用于指定布局的方向，可选的值为vertical和horizontal。
例如<linear orientation="vertical"></linear>相当于<vertical></vertical>。
线性布局的默认方向是横向的，因此，一个没有指定orientation属性的线性布局就是横向布局。
# 帧布局: frame
帧布局
# 相对布局: relative
## 布局说明
android居中、纵向布局和横向布局
这里只做记录用，方便他人和自己查看
### 一、居中 --> 相对父控件
1、LinearLayout
```
// 在父布局里水平居中：
// 父布局必须拥有android:orientation="vertical"属性
android:layout_gravity="center_horizontal"
// 在父布局里垂直居中：
// 父布局必须应设置成android:orientation="horizontal",父布局的高度应设置为android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
// 在父布局里居右：
android:layout_gravity="right"
```
2、RelativeLayout
```
//在父布局里水平居中：
android:layout_centerHorizontal="true"
//在父布局里水平居中：
android:layout_centerVertical="true"
//相对于父元素完全居中:
android:layout_centerInparent="true"
```
### 二、居中 --> 相对子控件
```
//水平居中
android:gravity="center_horizontal"
//垂直居中
android:gravity="center_vertical"
//textview居中
android:textAlignment="center"
```
### 三、纵向布局
```
android:orientation："vertical"
```
### 四、横向布局
```
android:orientation："horizontal"
```
## 布局模板（APP自带例子）
```js
"ui";
var InputLayout = (function() {
//继承至ui.Widget
util.extend(InputLayout, ui.Widget);
function InputLayout() {
ui.Widget.call(this);
this.defineAttr("hint", (view, attr, value, defineSetter)=>{
view._hint.setText(value);
});
this.defineAttr("text", (view, attr, value, defineSetter)=>{
view._input.setText(value);
});
}
InputLayout.prototype.render = function() {
return (
<vertical>
<text id="_hint" textSize="16sp" margin="4" textColor="gray"/>
<input id="_input" margin="0 16"/>
</vertical>
);
}
InputLayout.prototype.getInput = function() {
return this.view._input.getText();
};
ui.registerWidget("input-layout", InputLayout);
return InputLayout;
})();
ui.layout(
<vertical>
<input-layout id="name" hint="请输入名字"/>
<input-layout id="age" hint="请输入年龄" text="18"/>
<button id="ok" text="确认"/>
</vertical>
);
ui.ok.on("click", function(){
toast("名字是：" + ui.name.widget.getInput() + ", 年龄是：" + ui.age.widget.getInput());
});
```
### 动态显示隐藏布局内容
> 非官方例子
```js
"ui";
ui.layout(
<vertical >
<linear gravity="center">
<button id="bt" text="隐藏" textSize="20sp"/>
</linear>
<linear id="h" gravity="center">
<scroll>
<text id="data" text="我出来了" textSize="20sp"/>
</scroll>
</linear>
</vertical>
);
threads.start(function() {
var str="";
//遍历ui.h对象
for (var i in ui.h) {
//打印对象值
str+=i+" ";
}
ui.data.setText(str);
});
ui.bt.click(() => {
if (ui.bt.getText() == "隐藏") {
ui.bt.setText("显示");
ui.h.visibility = 8;
toast("内容已隐藏!");
} else {
ui.bt.setText("隐藏");
ui.h.visibility = 0;
toast("内容已显示!");
}
});
```