将最大视图的左侧与约束布局对齐答案

【问题标题】：Align left of the largest view with constraint layout将最大视图的左侧与约束布局对齐
【发布时间】：2020-06-10 07:31:06
【问题描述】：

您好，我正在尝试查看日程安排。如果用户设置为显示 24 小时或不更改营业时间的格式。总有一天，这家店关门了。字符串 Closed 是动态的，它可能每天都发生在它来自 VM.days.get(X).time

所以这就是我目前得到的：

我想将关闭的时间对齐到小时的左侧。

这是我的约束布局

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/base_space">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/small_space"
        android:text="@{VM.title}"
        android:textStyle="bold"
        tools:text="Heures de la semaine" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="first_time,second_time,third_time,fourth_time,fifth_time,sixth_time" />

    <TextView
        android:id="@+id/first_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(0).day}"
        android:textColor="@{VM.days.get(0).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(0).isBold}"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:text="Sunday" />

    <TextView
        android:id="@+id/first_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(0).time}"
        android:textColor="@{VM.days.get(0).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(0).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/first_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/first_day"
        tools:text="8:30 AM - 9:00 PM" />

    <TextView
        android:id="@+id/second_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).day}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintTop_toBottomOf="@id/first_day"
        tools:text="Monday" />

    <TextView
        android:id="@+id/second_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).time}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/second_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/second_day"
        tools:text="Closed" />

    <TextView
        android:id="@+id/third_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(2).day}"
        android:textColor="@{VM.days.get(2).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(2).isBold}"
        app:layout_constraintTop_toBottomOf="@id/second_day"
        tools:text="Tuesday" />

    <TextView
        android:id="@+id/third_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(2).time}"
        android:textColor="@{VM.days.get(2).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(2).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/third_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/third_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/fourth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(3).day}"
        android:textColor="@{VM.days.get(3).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(3).isBold}"
        app:layout_constraintTop_toBottomOf="@id/third_day"
        tools:text="Wednesday" />

    <TextView
        android:id="@+id/fourth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(3).time}"
        android:textColor="@{VM.days.get(3).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(3).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/fourth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/fourth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/fifth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(4).day}"
        android:textColor="@{VM.days.get(4).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(4).isBold}"
        app:layout_constraintTop_toBottomOf="@id/fourth_day"
        tools:text="Thursday" />

    <TextView
        android:id="@+id/fifth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(4).time}"
        android:textColor="@{VM.days.get(4).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(4).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/fifth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/fifth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/sixth_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(5).day}"
        android:textColor="@{VM.days.get(5).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(5).isBold}"
        app:layout_constraintTop_toBottomOf="@id/fifth_day"
        tools:text="Friday" />

    <TextView
        android:id="@+id/sixth_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(5).time}"
        android:textColor="@{VM.days.get(5).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(5).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/sixth_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/sixth_day"
        tools:text="8:00 - 21:00" />

    <TextView
        android:id="@+id/seventh_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(6).day}"
        android:textColor="@{VM.days.get(6).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(6).isBold}"
        app:layout_constraintTop_toBottomOf="@id/sixth_day"
        tools:text="Saturday" />

    <TextView
        android:id="@+id/seventh_time"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(6).time}"
        android:textColor="@{VM.days.get(6).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(6).isBold}"
        app:layout_constraintBottom_toBottomOf="@+id/seventh_day"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/seventh_day"
        tools:text="8:00 - 21:00" />


</android.support.constraint.ConstraintLayout>

我尝试将所有 timeUI 宽度设置为 0dp 并从屏障开始到父级。但是，如果一直 UI 有这些约束，它们都会消失

【问题讨论】：

标签： android android-layout android-constraintlayout

【解决方案1】：

您也可以使用Barrier。

使用Barrier，您可以对齐 Start Barrier End，然后在屏障中放置要与屏障对齐的视图的所有 ID，然后设置 @987654323 @ 指向所有这些视图中的start：

  <androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView1,textView2,..." />

【讨论】：

【解决方案2】：

对此有很多解决方案：

1- 使用带有 2 个垂直线性布局的 FrameLayout（位置开始和结束）

2-如果你坚持使用约束布局，你可以尝试给textviews一个宽度（特别是在右边）

3- 我真的不确定会发生什么，但您可以尝试使封闭的宽度为 match_parent 而不是 wrap_content

【讨论】：

我使用你的解决方案时，我做了一个线性布局，有 3 个视图（换行/称重 1/换行）

【解决方案3】：

从“关闭”视图中移除了右/端约束。这将使其左对齐：

<TextView
        android:id="@+id/second_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{VM.days.get(1).time}"
        android:textColor="@{VM.days.get(1).highlight ? @color/red : @color/gray}"
        app:isBold="@{VM.days.get(1).isBold}"
        app:layout_constraintBottom_toBottomOf="@id/second_day"
        app:layout_constraintStart_toStartOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@id/second_day"
        tools:text="Closed" />

另外，决定在左/右和开始/结束约束之间使用。两者兼有是多余的。此外，当您引用视图时，无需在其名称中包含“+”号。

【讨论】：

关闭的视图是动态的，它可能会改变它由 VM.days.get(1).time 确定
将文本视图的文本更改为以这种颜色关闭会不会更容易？
@JCDecary 您可以根据 textview 的值以编程方式更改约束（这里的许多线程为此提供了解决方案 - 例如 stackoverflow.com/questions/41670618/… ）。只要你设置了开始和结束约束，你的文本就会出现在中间。