将一组视图与出现在屏幕右侧的最大视图的右侧对齐

Question

我可以使用ConstraintLayout 创建一个视图，根据最大的子视图对齐子视图吗？
示例：

考虑到打印的右侧Text 在其中一行中可能更大，我想让进度条与右侧最大的Text 对齐。
那可能吗？我可以用嵌套的LinearLayout 做到这一点，但想知道ConstraintLayout 是否解决了这个问题

Answer 1

创建一个Barrier，方向为start，并引用右侧TextViews的所有ID。将每个进度条的end 约束到Barrier。 Barrier 将与最长 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="text1,text2"/>

    <TextView
            android:id="@+id/progress1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ProgressBar"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toStartOf="@id/barrier" />

    <TextView
            android:id="@+id/progress2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ProgressBar"
            app:layout_constraintTop_toBottomOf="@id/progress1"
            app:layout_constraintEnd_toStartOf="@id/barrier" />

    <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

    <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Longer Text"
            app:layout_constraintTop_toBottomOf="@id/text1"
            app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

结果：

为防止左侧TextView 与其他Views 重叠，您需要将其end 限制为进度条，将水平偏移设置为0，使其与其start 约束对齐并设置@当宽度设置为wrap_content 时，将强制执行 987654336@ 对其的约束。它应该是这样的：

<TextView
        android:id="@+id/foo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Foo"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/progress1"
        app:layout_constraintTop_toTopOf="parent" />

当文本到达进度条时，它将导致文本换行到下一行。如果您不希望文本换行，可以添加省略号或将 TextView 限制为最多 1 行。

或者，您可以将左侧的TextView's 宽度设置为0，这样它将占用进度条左侧的所有可用空间。