约束布局下的 Guideline

2024-05-21

1. 什么是参照线

熟悉图形设计工具的人对参照线（Guideline）的概念并不陌生，因为它们很常用。参照线用来在程序设计阶段锚定其他控件的位置，并给开发人员提供直观的视觉感受。参照线只会显示在 IDE 的编辑窗口，不会显示在设备上，并且只在约束布局中生效。

2. 创建参照线

参照线的创建与引入其他控件类似，直接在约束布局下增加 Guideline 控件即可。当然，也可以通过 UI 的设计界面右键单击视图从上下文菜单中进行选择。为保证通用性，本文采用代码形式引入，案例如下：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/anchor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. 参照线属性

可将参照线设定为锚点，然后就可以轻松定位其他控件的位置，或者通过百分比定位来支持响应式布局。详情请参阅 ConstraintLayout.LayoutParams 中的属性列表来设置 XML 中的 Guideline，以及 ConstraintSet 中相应的 setGuidelineBegin、setGuidelineEnd 和 setGuidelinePercent 函数。属性摘要如下：

方向属性	取值	描述
android:orientation="horizontal"	horizontal	参照线横向展示。
android:orientation="vertical"	vertical	参照线纵向展示。
说明
参照线可以是水平或垂直的： • 垂直参照线的高度为零，宽度与父级其 ConstraintLayout 同高 • 垂直参照线的宽度为零，高度与父级其 ConstraintLayout 同高

定位属性	取值	描述
app:layout_constraintGuide_begin="25dp"	number	DP 尺寸值。
app:layout_constraintGuide_end="25dp"	number	DP 尺寸值。
app:layout_constraintGuide_percent="0.2"	float	0 ~ 1 之间的小数。
说明
可以通过三种方式来定位参照线： • 指定距布局左侧或顶部的固定距离（layout_constraintGuide_begin） • 指定距布局右侧或底部的固定距离（layout_constraintGuide_end） • 指定布局宽度或高度的百分比（layout_constraintGuide_percent）

4. 参照线实例

这里并不打算采用官方的案例进行演示，而是采用开发中遇到的真实案例进行说明。开发过程中我们都会遇到加载失败的页面，为了保证页面的美观，通常情况下都会让提示内容向顶部进行偏移。如下图所示：

此处输入图片的描述

在没有参照线的情况下，我们通常会通过硬编码的方式限制控件到顶部的距离。这种方式无法在不同分辨率的手机上实现等比例的展示。现在，我们可以在参照线的帮助下来解决这一问题。

首先，在约束布局内增加 Guideline 控件，并将其方向属性设置为横向，再通过百分比属性将横向参照线设置在约束布局 40% 高度的位置。
最后，其他控件就可以以这条参照线为锚点进行布局了。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/chrome_anchor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".40" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/chrome_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/icon_process_failure"
        app:layout_constraintBottom_toBottomOf="@id/chrome_anchor"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/chrome_retry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/chrome_image"
        android:layout_marginTop="25dp"
        android:background="@drawable/shape_chrome_button"
        android:paddingHorizontal="15dp"
        android:paddingVertical="10dp"
        android:text="加载失败，点击重试"
        android:textColor="#ADADAD"
        android:textSize="13sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/chrome_anchor" />

</androidx.constraintlayout.widget.ConstraintLayout>

5. 参照线实现原理

对于喜欢追根寻底的开发者，我们可以进一步看看 Guideline 的内部实现。源码中 Guideline 类其实是 View 的一个子类，而且它不会渲染任何东西因为它实现了一个 final 修饰的 onDraw() 方法，而且固定了它的可见性为 View.GONE ，这就决定了运行时不会显示任何东西，但在 View 的 layout 布局过程中它会占据一个位置，而其他组件可以通过它来布局对齐。所以实际上的 Guideline 只是一个极其轻量级且没有任何显示，但是可以用于约束布局对齐的 View 组件。

1. 什么是参照线

2. 创建参照线

3. 参照线属性

4. 参照线实例

5. 参照线实现原理

6. 参考文章