布局
# 垂直布局: vertical
垂直布局是一种比较简单的布局，会把在它里面的控件按照垂直方向依次摆放，如下图所示：
垂直布局:
—————
| 控件1 |
| 控件2 |
| 控件3 |
| ............ |
——————
## layout_weight
垂直布局中的控件可以通过`layout_weight`属性来控制控件高度占垂直布局高度的比例。如果为一个控件指定`layout_weight`, 则这个控件的高度=垂直布局剩余高度 * layout_weight / weightSum；如果不指定weightSum, 则weightSum为所有子控件的layout_weight之和。所谓"剩余高度"，指的是垂直布局中减去没有指定layout_weight的控件的剩余高度。 例如:
```
"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. 再例如：
```
"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. 再例如：
```
"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属性还可以用于控制他的子控件高度占满剩余空间，例如：
```
"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
# 勾选框控件: checkbox
# 选择框控件: radio
# 选择框布局: radiogroup
# 开关控件: switch
开关控件用于表示一个选项是否被选中。
## checked
表示开关是否被选中。可选的值为：
- `true` 打开开关
- `false` 关闭开关
# 进度条控件: progressbar
# 拖动条控件: seekbar
# 下来菜单控件: spinner
# 时间选择控件: timepicker
# 日期选择控件: datepicker
# 浮动按钮控件: fab
# 标题栏控件: toolbar
# 卡片: card
卡片控件是一个拥有圆角、阴影的控件。
## cardBackgroundColor
卡片的背景颜色。
## cardCornerRadius
卡片的圆角半径。
## cardElevation
设置卡片在z轴上的高度，来控制阴影的大小。
## contentPadding
设置卡片的内边距。该属性包括四个值：
- `contentPaddingLeft` 左内边距
- `contentPaddingRight` 右内边距
- `contentPaddingTop` 上内边距
- `contentPaddingBottom` 下内边距
## foreground
使用`foreground="?selectableItemBackground"`属性可以为卡片添加点击效果。
# 抽屉布局: drawer
# 列表: list
# Tab: tab
# ui
## ui.layout(xml)
- `xml` {XML} | {string} 布局XML或者XML字符串
将布局XML渲染为视图（View）对象， 并设置为当前视图。
## ui.layoutFile(xmlFile)
- `xml` {string} 布局XML文件的路径
此函数和`ui.layout`相似，只不过允许传入一个xml文件路径来渲染布局。
## ui.inflate(xml, [parent = null, attachToParent = false\])
- `xml` {string} | {XML} 布局XML或者XML字符串
- `parent` {View} 父视图
- `attachToParent` {boolean} 是否渲染的View加到父视图中，默认为false
- 返回 {View}
将布局XML渲染为视图（View）对象。如果该View将作为某个View的子View，我们建议传入`parent`参数，这样在渲染时依赖于父视图的一些布局属性能够正确应用。
此函数用于动态创建、显示View。
```javascript
"ui";
$ui.layout(
<linear id="container">
</linear>
);
// 动态创建3个文本控件，并加到container容器中
// 这里仅为实例，实际上并不推荐这种做法，如果要展示列表，
// 使用list组件；动态创建十几个、几十个View会让界面卡顿
for (let i = 0; i < 3; i++) {
let textView = $ui.inflate(
<text textColor="#000000" textSize="14sp"/>
, $ui.container);
textView.attr("text", "文本控件" + i);
$ui.container.addView(textView);
}
```
## ui.registerWidget(name, widget)
- `name` {string} 组件名称
- `widget` {Function} 组件
注册一个自定义组件。参考示例->界面控件->自定义控件。
## ui.isUiThread()
- 返回 {boolean}
返回当前线程是否是UI线程。
```javascript
"ui";
log($ui.isUiThread()); // => true
$threads.start(function () {
log($ui.isUiThread()); // => false
});
```
## ui.findView(id)
- `id` {string} View的ID
- 返回 {View}
在当前视图中根据ID查找相应的视图对象并返回。如果当前未设置视图或找不到此ID的视图时返回`null`。
一般我们都是通过`ui.xxx`来获取id为xxx的控件，如果xxx是一个ui已经有的属性，就可以通过`$ui.findView()`来获取这个控件。
## ui.finish()
结束当前活动并销毁界面。
## ui.setContentView(view)
- `view` {View}
将视图对象设置为当前视图。
## ui.post(callback, [delay = 0\])
- `callback` {Function} 回调函数
- `delay` {number} 延迟，单位毫秒
将`callback`加到UI线程的消息循环中，并延迟delay毫秒后执行（不能准确保证一定在delay毫秒后执行）。
此函数可以用于UI线程中延时执行动作（sleep不能在UI线程中使用），也可以用于子线程中更新UI。
```javascript
"ui";
ui.layout(
<frame>
<text id="result"/>
</frame>
);
ui.result.attr("text", "计算中");
// 在子线程中计算1+ ... + 10000000
threads.start({
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i;
}
// 由于不能在子线程操作UI，所以要抛到UI线程执行
ui.post(() => {
ui.result.attr("text", String(sum));
});
});
```
## ui.run(callback)
- `callback` {Function} 回调函数
- 返回 {any} callback的执行结果
将`callback`在UI线程中执行。如果当前已经在UI线程中，则直接执行`callback`；否则将`callback`抛到UI线程中执行（加到UI线程的消息循环的末尾），**并等待callback执行结束(阻塞当前线程)**。
## ui.statusBarColor(color)
- `color` {string | number} 颜色
设置当前界面的状态栏颜色。
```javascript
"ui";
ui.statusBarColor("#000000");
```
## ui.useAndroidResources()
启用使用Android的布局(layout)、绘图(drawable)、动画(anim)、样式(style)等资源的特性。启用该特性后，在project.json中进行以下配置，就可以像写Android原生一样写界面：
```javascripton
{
// ...
androidResources: {
"resDir": "res", // 资源文件夹
"manifest": "AndroidManifest.xml" // AndroidManifest文件路径
}
}
```
res文件夹通常为以下结构：
```
- res
- layout // 布局资源
- drawable // 图片、形状等资源
- menu // 菜单资源
- values // 样式、字符串等资源
// ...
```
可参考示例->复杂界面->Android原生界面。
# 尺寸的单位: Dimension
# Drawables
# 颜色
**(完善中...)**
[http.request()]: