布局
# 垂直布局: 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
## 布局说明
> 飞云增加
2023.3.3.
[android居中、纵向布局和横向布局](https://blog.csdn.net/wy313622821/article/details/105841786)
## 布局模板（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("内容已显示!");
}
});
```