ConstraintLayout：layout_constraintWidth_default和layout_constraintHorizontal_bias组合

在 Android 开发中，ConstraintLayout 是一个强大的工具，用于构建灵活且响应迅速的用户界面。在本文中，我们将深入探讨两个关键属性——app:layout_constraintWidth_default 和 app:layout_constraintHorizontal_bias，并展示如何使用这些属性来实现一个常见的布局需求。

场景描述

假设我们有一个 GIF 图片（通过 ImageView 显示），并希望在其右下角添加一个标签（TextView）。当标签的内容过长时，要求它的宽度不超过 GIF 图片的左边界。

主要解决方案

为了解决这个问题，我们可以借助 ConstraintLayout 中的两个重要属性：

1. app:layout_constraintWidth_default：

   • 此属性用于设置宽度约束的默认行为。主要取值包括：
     • spread：视图的宽度将尽可能扩展以填满可用空间。
     • wrap：视图的宽度将根据其内容自适应，但不会超过其他约束范围。
   • 在我们的例子中，将其设置为 wrap，可以确保 TextView 的宽度根据其内容自适应，但不会超过 ImageView 的左右边界。

2. app:layout_constraintHorizontal_bias：

   • 此属性用于调整视图在两个水平约束之间的位置。取值范围为 0 到 1，其中：
     • 0 表示完全靠左对齐。
     • 0.5 表示居中对齐。
     • 1 表示完全靠右对齐。
   • 在我们的例子中，通过设置为 1.0，可以将 TextView 完全靠右对齐。

示例代码

以下是一个具体的 XML 布局实现：

<?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/root_hover_ad"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusable="true"
    tools:ignore="ContentDescription,UnusedAttribute">

    <ImageView
        android:id="@+id/iv_ad_gif"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_gift_box"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/tv_ad_tag"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="3dp"
        android:layout_marginBottom="3dp"
        android:background="@drawable/shape_99000000_r100"
        android:gravity="center"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:paddingEnd="5dp"
        android:text="AD"
        android:textColor="@color/white"
        android:textSize="7sp"
        app:layout_constraintBottom_toBottomOf="@id/iv_ad_gif"
        app:layout_constraintEnd_toEndOf="@id/iv_ad_gif"
        app:layout_constraintStart_toStartOf="@id/iv_ad_gif"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintWidth_default="wrap"/>

</androidx.constraintlayout.widget.ConstraintLayout>

属性详解

1. app:layout_constraintWidth_default：

   • 主要取值：
     • spread：视图的宽度将尽可能扩展以填满可用空间。
     • wrap：视图的宽度将根据其内容自适应，但要遵循所有其他定义的约束。
   • 使用场景：
     • 当需要视图根据内容自动调整宽度但不超出某个范围时，使用 wrap。
     • 当需要视图填满所有可用空间时，使用 spread。

2. app:layout_constraintHorizontal_bias：

   • 取值范围：0 到 1。
     • 0 表示完全靠左对齐。
     • 0.5 表示居中对齐。
     • 1 表示完全靠右对齐。
   • 计算方式：
     • 该属性决定了视图在两个水平约束之间的偏移比例。例如，若左侧约束为 A，右侧约束为 B，则 bias 为 0.25 时，视图会距离 A 较近，大约占据整个可用空间的 25%，距离 B 较远，占据剩余的 75%。
       

参考文献 ：【约束布局】ConstraintLayout 偏移 ( Bias ) 计算方式详解 ( 缝隙比例 | 计算公式 | 图解 | 测量图 + 公式 )