在 Android 开发中,UI 界面是通过 布局(Layout) 来实现的,布局决定了控件的排列方式、尺寸和位置。
理解布局体系和 android:layout_* 属性是写出高质量界面的基础。
一、Android 布局体系概览
Android 布局主要分两类:
- ViewGroup 布局容器(承载子控件)
- View 控件(实际显示内容,如 TextView、Button)
常见布局容器:
| 布局 | 特点 | 示例 |
|---|---|---|
| LinearLayout | 子控件线性排列(水平 / 垂直) | android:orientation="vertical" |
| RelativeLayout / ConstraintLayout | 子控件相对排列 | app:layout_constraintTop_toTopOf |
| FrameLayout | 堆叠布局(常用于覆盖层) | 背景 + 弹窗 |
| TableLayout | 表格布局 | 行 / 列 |
| GridLayout | 网格布局 | 类似表格,但更灵活 |
二、android:layout_* 属性详解
android:layout_* 属性用于定义子控件在父布局中的表现,主要包括:
- 尺寸
- 对齐 / 位置
- 权重 / 比例
1️⃣ 尺寸属性
| 属性 | 说明 | 示例 |
|---|---|---|
android:layout_width | 控件宽度 | match_parent / wrap_content / 具体 dp |
android:layout_height | 控件高度 | match_parent / wrap_content / 具体 dp |
示例:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World" />
2️⃣ 位置与对齐
LinearLayout
android:layout_gravity:控件在父布局中的对齐方式android:gravity:控件内部内容对齐方式
示例:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
RelativeLayout
android:layout_alignParentTop="true"android:layout_centerInParent="true"android:layout_below="@id/otherView"
3️⃣ 权重 / 比例(LinearLayout 特有)
android:layout_weight:分配父容器剩余空间比例- 常用于响应式布局
示例:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按钮1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="按钮2"/>
</LinearLayout>
说明:
- 按钮1占 1/3 空间
- 按钮2占 2/3 空间
4️⃣ Margin 与 Padding
| 属性 | 作用 |
|---|---|
android:layout_margin | 控件外间距,影响与父布局及其他控件距离 |
android:padding | 控件内间距,影响内容与控件边界距离 |
示例:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:text="带间距的文本"/>
三、常用布局组合示例
1️⃣ 垂直 LinearLayout + 权重
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="上半部分"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="下半部分"
android:gravity="center"/>
</LinearLayout>
2️⃣ RelativeLayout 居中布局
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="居中按钮"
android:layout_centerInParent="true"/>
</RelativeLayout>
3️⃣ FrameLayout 覆盖布局
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="覆盖文字"
android:layout_gravity="center"/>
</FrameLayout>
四、总结与经验技巧
- LinearLayout + 权重 → 快速实现比例布局
- RelativeLayout / ConstraintLayout → 灵活对齐 / 居中 / 锚点布局
- FrameLayout → 堆叠 / 覆盖
android:layout_*属性:layout_width/layout_height:尺寸layout_margin:外间距layout_gravity/gravity:对齐layout_weight:比例 / 权重
- ConstraintLayout → 现代复杂布局首选,减少嵌套,提高性能