將最大視圖的左側與約束布局對齊

Question

嗨，我正在嘗試查看時間表。 如果用戶設置為24H 顯示，則營業時間的格式會發生變化。 有一天這家商店關門了。 字符串 Closed 是動態的，它可以每天發生，它來自 VM.days.get(X).time

所以這是我目前得到的：

我想將關閉對齊到小時的左側。

這是我的 ConstraintLayout

<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 並從屏障開始到父級。 但是如果所有的時間用戶界面都有這些限制，它們都會消失

Answer 1

您也可以使用Barrier 。

使用Barrier ，您可以對齊 Start <-> Barrier <-> End ，然后在 Barrier 中放置要與Barrier對齊的視圖的所有 id，然后將Barrier的方向設置為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,..." />

Answer 2

對此有很多解決方案：

1- 使用 FrameLayout 和 2 個垂直 LinearLayouts（位置開始和結束）

2-如果你堅持使用約束布局，你可以嘗試給textviews一個寬度（特別是在右邊）

3-我真的不確定會發生什么，但您可以嘗試使封閉的單寬 match_parent 而不是 wrap_content

Answer 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" />

此外，決定在左/右和開始/結束約束之間使用。 兩者兼有是多余的。 此外，當您引用視圖時，無需在其名稱中包含“+”號。