XML 布局编辑器——手写 Android 界面

Android XML 布局是什么

Android 应用的图形界面由 View 层级树组成，这棵树用 XML 文件描述。创建 Android App 项目时，AIDE 自动生成的 res/layout/main.xml 就是一个布局文件。

一个最小化的布局大概长这样：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

</LinearLayout>

AIDE XML 编辑器的特色

智能补全（最实用）

输入 < 后立即弹出可用标签列表（LinearLayout、RelativeLayout、Button、TextView 等）。选中标签后继续弹出合法属性列表（layout_width、layout_height、text、id 等）。

点选跳转

AIDE 内置的布局预览功能（点 Action Bar 上的 "Design" 按钮）会在视图上绘制红色选框。点击预览里的某个 View，会自动跳转到 XML 文件中定义它的那一行。

属性值建议

一些属性值有固定选项，AIDE 会弹出下拉建议：

layout_width — match_parent / wrap_content / 具体数值
orientation — vertical / horizontal
gravity — center / left / right / center_vertical 等

编辑流程建议

在手机上手写 XML 布局的推荐流程：

打开 main.xml
点 "Design" 按钮打开预览窗口，对照着写
边写边用补全，避免拼写错属性名
写完保存，切回 Java 文件写交互逻辑
点 Run 看实际效果，不对再回来调 XML

常见布局容器速查

容器	用途
LinearLayout	垂直或水平排列子 View
RelativeLayout	相对定位（子 View 互相锚定）
FrameLayout	叠加层（一个盖在另一个上面）
ConstraintLayout	灵活约束布局（需要 Android Studio 的可视化编辑器辅助，AIDE 里写起来较复杂）
ScrollView	可滚动的容器

什么时候需要可视化设计器

如果你觉得手写 XML 太累，可以安装 UI Designer（$2.99）。详见下一页可视化界面设计器。