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

Question

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

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

Answer 1

创建一个方向为start的Barrier，引用右边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 以便对齐当宽度设置为 wrap_content 时，将强制执行其 start 约束并设置 app:layout_constrainedWidth="true" 其约束。它应该是这样的：

<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，这样它会占用进度条左侧的所有可用 space。

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

Align a set of views to the right of the largest view of those appearing in the right part of the screen

android

android-linearlayout

android-view

android-constraintlayout