Android 布局体系
Android 布局通过容器组件（Layout）管理子视图（View）的位置和排列方式，核心目标是实现跨设备屏幕的适配性。常用布局分为以下几类：
- 线性布局：
LinearLayout（按单一方向排列） - 相对布局：
RelativeLayout（按相对位置定位） - 约束布局：
ConstraintLayout（通过约束关系灵活布局） - 帧布局：
FrameLayout（层叠显示子视图） - 表格布局：
TableLayout（行列表格结构） - 网格布局：
GridLayout（网格状排列）
基础布局详解
1. LinearLayout（线性布局）
核心特性
- 子视图沿水平（
horizontal）或垂直（vertical）方向排列。 - 通过
android:layout_weight权重属性分配剩余空间，实现自适应宽度 / 高度。 android:gravity控制子视图在容器内的对齐方式（如居中、居右）。
示例场景：简单的表单、导航栏按钮排列。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".LinearLayoutActivity"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用户名"
android:layout_marginBottom="8dp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密码" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="登录"
android:layout_marginTop="16dp" />
</LinearLayout>
2. RelativeLayout（相对布局）
核心特性
- 子视图通过相对位置属性（如
layout_below、layout_toRightOf）定位。 - 支持相对于父容器对齐（如
alignParentTop、centerInParent）。 - 避免多层嵌套，性能优于
LinearLayout的复杂嵌套场景。
示例场景：图片与文字的相对位置布局（如头像右侧显示用户名）。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RelativeLayoutActivity">
<ImageView
android:id="@+id/iv_avatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/frame1"/>
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/iv_avatar"
android:layout_alignTop="@id/iv_avatar"
android:text="头像"
android:layout_marginStart="10dp"/>
</RelativeLayout>
3. FrameLayout（帧布局）
核心特性
- 子视图默认堆叠在容器左上角，后添加的视图覆盖前一个。
- 常用于实现层叠效果（如图片叠加蒙层、加载动画遮罩）。
- 通过
android:layout_gravity控制子视图位置。
示例场景：图片预览界面的加载占位图与实际图片层叠。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="200dp"
tools:context=".FrameLayoutActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/frame1" />
<ProgressBar
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
4. TableLayout（表格布局）
核心特性：
- 基于行（
TableRow）和列的网格结构，每行是一个TableRow子视图。 - 列宽由该列中最宽的单元格决定，支持
stretchColumns属性拉伸列。 - 已逐渐被
RecyclerView取代，仅适用于简单表格场景。
示例场景：简单的数据表格展示。
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
tools:context=".TableLayoutActivity">
<TableRow
android:background="#EEEEEE">
<TextView
android:text="ID"
android:padding="8dp" />
<TextView
android:text="姓名"
android:padding="8dp" />
</TableRow>
<TableRow>
<TextView android:text="1" android:padding="8dp" />
<TextView android:text="张三" android:padding="8dp" />
</TableRow>
<TableRow>
<TextView android:text="2" android:padding="8dp" />
<TextView android:text="李四" android:padding="8dp" />
</TableRow>
</TableLayout>
5. GridLayout（网格布局）
核心特性：
- 更灵活的网格排列，子视图可跨行列（通过
layout_rowSpan、layout_columnSpan）。 - 支持权重分配（
layout_rowWeight、layout_columnWeight）和对齐方式控制。 - 性能优于
TableLayout，适用于网格状布局（如计算器、九宫格）。
示例场景：计算器按钮布局。
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:padding="16dp"
android:orientation="horizontal">
<!-- 第一行 -->
<Button
android:id="@+id/btnClear"
android:text="C"
android:layout_row="0"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnBackspace"
android:text="⌫"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnPercent"
android:text="%"
android:layout_row="0"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnDivide"
android:text="/"
android:layout_row="0"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<!-- 第二行 -->
<Button
android:id="@+id/btn7"
android:text="7"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn8"
android:text="8"
android:layout_row="1"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn9"
android:text="9"
android:layout_row="1"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnMultiply"
android:text="×"
android:layout_row="1"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<!-- 第三行 -->
<Button
android:id="@+id/btn4"
android:text="4"
android:layout_row="2"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn5"
android:text="5"
android:layout_row="2"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn6"
android:text="6"
android:layout_row="2"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnSubtract"
android:text="-"
android:layout_row="2"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<!-- 第四行 -->
<Button
android:id="@+id/btn1"
android:text="1"
android:layout_row="3"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn2"
android:text="2"
android:layout_row="3"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btn3"
android:text="3"
android:layout_row="3"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnAdd"
android:text="+"
android:layout_row="3"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<!-- 第五行 -->
<Button
android:id="@+id/btn0"
android:text="0"
android:layout_row="4"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_columnSpan="2" /> <!-- 这个按钮跨越两列 -->
<Button
android:id="@+id/btnDot"
android:text="."
android:layout_row="4"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
<Button
android:id="@+id/btnEquals"
android:text="="
android:layout_row="4"
android:layout_column="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"/>
</GridLayout>
进阶布局：ConstraintLayout（约束布局）
核心优势：
- 扁平化布局：通过约束关系直接定位子视图，减少布局嵌套。
- 高性能：相比嵌套的 LinearLayout/RelativeLayout，渲染性能显著提升。
- 响应式设计：通过约束链、屏障等特性实现跨设备适配。
- 可视化编辑：Android Studio 提供拖拽式约束创建工具。
1. 基本约束关系
1.位置约束
位置约束是通过将视图与其他视图或父布局建立关联来确定视图位置的重要机制。
水平方向约束
-
约束到父布局 ：
layout_constraintStart_toStartOf：视图的起始边与父布局的起始边对齐。layout_constraintEnd_toEndOf：视图的末尾边与父布局的末尾边对齐。layout_constraintLeft_toLeftOf：视图的左边与父布局的左边对齐（适用于从左到右布局）。layout_constraintRight_toRightOf：视图的右边与父布局的右边对齐（适用于从左到右布局）。
-
约束到其他视图 ：
layout_constraintStart_toEndOf：视图的起始边与另一个视图的末尾边相连。layout_constraintEnd_toStartOf：视图的末尾边与另一个视图的起始边相连。layout_constraintLeft_toRightOf：视图的左边与另一个视图的右边相连（适用于从左到右布局）。layout_constraintRight_toLeftOf：视图的右边与另一个视图的左边相连（适用于从左到右布局）。
垂直方向约束
-
约束到父布局 ：
layout_constraintTop_toTopOf：视图的顶部与父布局的顶部对齐。layout_constraintBottom_toBottomOf：视图的底部与父布局的底部对齐。
-
约束到其他视图 ：
layout_constraintTop_toBottomOf：视图的顶部与另一个视图的底部相连。layout_constraintBottom_toTopOf：视图的底部与另一个视图的顶部相连。
2.尺寸约束
0dp（MATCH_CONSTRAINT）：由约束条件决定尺寸layout_constraintDimensionRatio：宽高比layout_constraintMaxWidth/Height：最大宽高layout_constraintMinWidth/Height：最小宽高
2. 高级约束特性
约束链（Chains)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ConstraintLayoutActivity">
<!-- 创建水平链：按钮均匀分布 -->
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/btnB"
app:layout_constraintHorizontal_chainStyle="spread" /> <!-- 链样式 -->
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/btnA"
app:layout_constraintRight_toLeftOf="@id/btnC" />
<Button
android:id="@+id/btnC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/btnB"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
链样式类型：
spread（默认）：均匀分布spread_inside：两端保留间距packed：元素打包在一起- 配合
layout_constraintHorizontal_weight实现权重分配
1. Spread（默认）
- 均匀分布：链中的每个视图平均占据可用空间。
- 示例代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintEnd_toStartOf="@id/button3"/>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
2. Spread_inside（两端保留间距）
- 两端保留间距：链的两端视图靠近父布局的边界，中间的视图均匀分布。
- 示例代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintEnd_toStartOf="@id/button3"/>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
3. Packed（元素打包在一起）
- 元素打包在一起：链中的视图打包在一起，默认居中显示，可通过偏移属性调整位置。
- 示例代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintEnd_toStartOf="@id/button3"/>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
配合 layout_constraintHorizontal_weight 实现权重分配
1. 水平权重分配
- 定义：通过设置
layout_constraintHorizontal_weight属性，可以为链中的每个视图分配权重，从而控制它们在链中占据的空间比例。 - 示例代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintEnd_toStartOf="@id/button3"
app:layout_constraintHorizontal_weight="2"/>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
2. 垂直权重分配
- 定义：通过设置
layout_constraintVertical_weight属性，可以为链中的每个视图分配权重，从而控制它们在链中占据的空间比例。 - 示例代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button 1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/button2"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_weight="1"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button 2"
app:layout_constraintTop_toBottomOf="@id/button1"
app:layout_constraintBottom_toTopOf="@id/button3"
app:layout_constraintVertical_weight="2"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button 3"
app:layout_constraintTop_toBottomOf="@id/button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_weight="1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
屏障（Barriers）
屏障（Barriers）是 ConstraintLayout 中的一个高级特性，用于控制一组视图的约束边界。它可以根据一组视图的边缘自动调整位置，从而使布局更加灵活和动态。
1. 创建屏障
要创建屏障，你需要在 ConstraintLayout 中添加一个 Barrier 元素，并指定它所引用的视图以及屏障的方向。
-
属性：
app:barrierDirection：指定屏障的方向，可以是left、right、top、bottom、start或end。app:constraint_referenced_ids：指定屏障所引用的视图的 ID 列表。
2. 使用场景
- 当一组视图的尺寸或位置动态变化时，需要一个动态的约束边界。
- 需要对一组视图进行统一的约束对齐。
3. 示例代码
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintTop_toTopOf="parent"/>
<!-- 创建一个屏障，方向为 end -->
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="button1,button2,button3"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4"
app:layout_constraintStart_toEndOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
引导线（Guidelines）
引导线（Guidelines）用于在布局中创建辅助线，帮助你更精确地对齐视图。引导线可以是水平或垂直的，并且可以基于屏幕的百分比位置或固定距离来定位。
1. 创建引导线
引导线可以通过设置 android:orientation 属性来指定方向，并使用 app:layout_constraintGuide_percent 或 app:layout_constraintGuide_begin 属性来指定位置。
-
属性：
android:orientation：指定引导线的方向，可以是vertical或horizontal。app:layout_constraintGuide_percent：指定引导线基于父布局的百分比位置。app:layout_constraintGuide_begin：指定引导线从父布局起始边的固定距离。
2. 使用场景
引导线常用于以下场景：
- 精确定位视图，实现复杂的对齐需求。
- 将布局划分为多个区域，便于视图的分布。
- 配合其他 ConstraintLayout 特性（如屏障、链等）实现更灵活的布局结构。
3. 效果示例
基于百分比位置的引导线
- 场景：将屏幕分为左右两个区域，左侧占 60%，右侧占 40%。
- 效果：引导线将布局分为两个区域，视图可以根据这些区域进行定位。
- 代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 左侧引导线，占父布局宽度的 60% -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6"/>
<Button
android:id="@+id/button_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/left_guideline"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Right Button"
app:layout_constraintStart_toStartOf="@id/left_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
基于固定距离的引导线
- 场景：在布局顶部下方 80dp 处创建一条水平引导线，用于分隔标题和内容。
- 效果：引导线将布局分为标题区域和内容区域，视图可以根据这些区域进行定位。
- 代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 距离顶部 80dp 的水平引导线 -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/top_guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="80dp"/>
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/top_guideline"/>
<TextView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content goes here..."
app:layout_constraintTop_toBottomOf="@id/top_guideline"/>
</androidx.constraintlayout.widget.ConstraintLayout>
引导线配合屏障和链使用
- 场景：创建一个复杂的布局，其中包含多个视图组，每组视图有自己的对齐方式。
- 效果：引导线帮助定义每个视图组的区域，屏障和链用于组内视图的对齐和分布。
- 代码：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 左侧引导线，占父布局宽度的 30% -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<!-- 右侧引导线，占父布局宽度的 70% -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7"/>
<!-- 中间区域的视图组 -->
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintStart_toStartOf="@id/left_guideline"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintEnd_toStartOf="@id/right_guideline"/>
<!-- 左侧区域的视图 -->
<TextView
android:id="@+id/text_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left Text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/left_guideline"/>
<!-- 右侧区域的视图 -->
<TextView
android:id="@+id/text_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Right Text"
app:layout_constraintStart_toStartOf="@id/right_guideline"
app:layout_constraintEnd_toEndOf="parent"/>
<!-- 创建屏障，控制中间区域的视图组 -->
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button1,button2"/>
<!-- 分隔线 -->
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray"
app:layout_constraintTop_toBottomOf="@id/barrier"/>
</androidx.constraintlayout.widget.ConstraintLayout>
百分比定位与尺寸
1. 百分比尺寸
通过 app:layout_constraintWidth_percent 和 app:layout_constraintHeight_percent 属性，你可以将视图的宽度和高度设置为父布局相应尺寸的百分比。
2. 百分比定位
你可以使用引导线（Guidelines）来实现基于父布局百分比位置的定位。引导线可以是水平或垂直的，并且可以通过 app:layout_constraintGuide_percent 属性来指定其位置。
3. 示例代码
百分比尺寸
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 宽度为父布局宽度的 70%，高度为父布局高度的 50% -->
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintWidth_percent="0.7"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
百分比定位
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 距离父布局左侧 30% 的垂直引导线 -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<!-- 距离父布局顶部 20% 的水平引导线 -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/top_guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"/>
<!-- 定位在引导线右侧和下方的视图 -->
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintWidth_percent="0.4"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintStart_toStartOf="@id/left_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/top_guideline"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
