Android：如何用ConstraintLayout的Guideline实现元素间距自适应？

嘿，作为ConstraintLayout新手，你选百分比Guideline来实现自适应间距的思路完全靠谱！我来帮你把这两个问题理清楚：

完全不用这么麻烦！8条Guideline会把布局搞得冗余又难维护，其实用2条Guideline + 垂直链的组合就能轻松搞定，或者最多5条Guideline就够（看你要不要控制边缘间距）。

最简洁的方案是：

• 在布局顶部加一条水平Guideline，设为屏幕高度的10%（这是屏幕顶到第一个视图的间距）
• 在布局底部加一条水平Guideline，设为屏幕高度的90%（这是最后一个视图到屏幕底的间距）
• 把四个垂直排列的视图组成垂直链，将链的顶部锚定到顶部Guideline，底部锚定到底部Guideline
• 给链设置spread_inside的样式，这样四个视图会均匀分布在两个Guideline之间，视图间的间距自动相等，而且会随屏幕大小按百分比缩放——小设备上10%的高度更小，平板上更大，完美符合你的需求！

要是你想让视图和屏幕边缘的间距也和视图间的间距相等，那才需要5条Guideline（把屏幕垂直方向分成5个等比例区域，每个占20%），但这种情况用链依然更简洁。

假设你用这条Guideline把屏幕分成上下两半，上方放两个视图，那需要给上方视图设置这些约束：

• 第一个视图的顶部：锚定到屏幕顶部（或者顶部的百分比Guideline，比如10%）
• 第二个视图的底部：锚定到这条50%的Guideline
• 把这两个视图组成垂直链，设置spread_inside样式，让它们的间距自动相等
• 水平方向的约束：把每个视图的左右边缘锚定到屏幕边缘（或者左右Guideline），确保它们在水平方向对齐或居中

举个实际的布局代码例子，帮你更直观理解：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 顶部边缘间距的Guideline -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/top_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.1"/>

    <!-- 底部边缘间距的Guideline -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"/>

    <!-- 四个自适应间距的视图 -->
    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FFC107"
        android:gravity="center"
        android:text="View 1"
        app:layout_constraintBottom_toTopOf="@id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_guideline"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FF5722"
        android:gravity="center"
        android:text="View 2"
        app:layout_constraintBottom_toTopOf="@id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view1"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#2196F3"
        android:gravity="center"
        android:text="View 3"
        app:layout_constraintBottom_toTopOf="@id/view4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view2"/>

    <TextView
        android:id="@+id/view4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#4CAF50"
        android:gravity="center"
        android:text="View 4"
        app:layout_constraintBottom_toTopOf="@id/bottom_guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view3"/>

    <!-- 给四个视图设置垂直链，实现均匀分布 -->
    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view1,view2,view3,view4"
        app:layout_constraintVertical_chainStyle="spread_inside"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这个布局里，四个视图的间距会随屏幕大小自动调整，小设备上紧凑，平板上宽松，完全符合你的要求。

内容的提问来源于stack exchange，提问作者kinza