当视图变大时，我如何在ConstraintLayout（android）中正确使用彼此相邻的2条链，而不会重叠链？

Question

我已经为此苦苦挣扎了好几天了。如果没有constraintLayout可以完成此操作，但我真的很希望使用constraintLayout来完成。

我彼此之间有6个视图。左侧4个，右侧2个，但高度相同。 左边的那两个，它们不改变宽度，应该一直在右边。 右边的那4个会更改大小，更重要的是，有时并非所有4个视图都会显示出来。 我当然不能链接其中的六个，因为那样的话，如果左侧只有2个标签，则右侧的2个视图将移至左侧。

我最好的尝试是链接左侧的4个视图。并在右侧链接两个视图。效果很好，除了！如果右侧有较大的视图，则这4个视图将覆盖右侧的2个视图。但是，每当我做出约束以确保4个视图不会覆盖我的正确视图时，android认为我正在链接6个视图，因此我遇到了上述问题。

那么，谁知道解决这个问题的绝招呢？对我来说，这确实是一个很大的难题。

这是它的外观：

我希望它的外观（有点像），因此始终在第4个视图和第5个视图之间留有空白。

这是我使用的代码： （尽管我一直在努力，并且尝试了许多准则和障碍之类的东西，所以它肯定还很干净，编码不错）

    <TextView
    android:id="@+id/distance"
    style="@style/helveticaRoman15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:maxLines="1"
    android:paddingStart="5dp"
    android:paddingTop="3dp"
    android:paddingEnd="5dp"
    android:paddingBottom="3dp"
    android:textColor="@color/gray"
    app:layout_constraintEnd_toStartOf="@+id/freeKm"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="1,7 km" />

<TextView
    android:id="@+id/freeKm"
    style="@style/helveticaRoman15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:autoSizeTextType="uniform"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:maxLines="1"
    android:minWidth="82dp"
    android:paddingStart="5dp"
    android:paddingTop="3dp"
    android:paddingEnd="5dp"
    android:paddingBottom="3dp"
    android:text="@string/resource_view_free_km"
    android:textColor="@color/gray"
    app:layout_constraintEnd_toStartOf="@+id/yearOfConstruction"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="3"
    app:layout_constraintStart_toEndOf="@+id/distance"
    app:layout_constraintTop_toTopOf="@+id/distance"
    tools:text="100 vrije km" />

<TextView
    android:id="@+id/yearOfConstruction"
    style="@style/helveticaRoman15"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:autoSizeTextType="uniform"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:maxLines="1"
    android:paddingStart="5dp"
    android:paddingTop="3dp"
    android:paddingEnd="5dp"
    android:paddingBottom="3dp"
    android:textColor="@color/gray"
    app:layout_constraintEnd_toStartOf="@+id/newIndicator"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="3"
    app:layout_constraintStart_toEndOf="@+id/freeKm"
    app:layout_constraintTop_toTopOf="@+id/distance"
    app:layout_constraintWidth_max="50dp"
    tools:text="bouwjaar" />

<TextView
    android:id="@+id/newIndicator"
    style="@style/helveticaMedium15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:background="@drawable/bg_gray_car_location"
    android:fontFamily="@font/helvetica_neu_bold"
    android:gravity="center"
    android:paddingStart="5dp"
    android:paddingTop="3dp"
    android:paddingEnd="5dp"
    android:paddingBottom="3dp"
    android:text="@string/resource_view_free_km"
    android:textColor="@color/black"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toEndOf="@+id/yearOfConstruction"
    app:layout_constraintTop_toTopOf="@+id/yearOfConstruction"
    tools:text="nieuw" />

<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="thumbImage, numberOfBookings"
    tools:layout_editor_absoluteX="411dp" />

<ImageView
    android:id="@+id/thumbImage"
    android:layout_width="24dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    android:gravity="center_vertical"
    android:src="@drawable/ic_thumb"
    android:tint="@color/gray"
    app:layout_constraintBottom_toBottomOf="@+id/distance"
    app:layout_constraintEnd_toStartOf="@+id/numberOfBookings"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/distance" />

<TextView
    android:id="@+id/numberOfBookings"
    style="@style/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:background="@color/yellow"
    android:textSize="@dimen/button_textview"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/distance"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/thumbImage"
    app:layout_constraintTop_toTopOf="@+id/distance"
    tools:text="100%" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="82dp" />

Answer 1

实际上我现在已经设法获得了想要的东西。 @NikosHidalgo感谢您对障碍/指南的建议。我将代码放在下面。不幸的是，我并没有真正理解我的所作所为，但是看起来不错。...– 6分钟前的提蒂

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">

<!--tag1-->
<TextView
    android:id="@+id/distance"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:textColor="@color/gray"
    app:layout_constraintBottom_toBottomOf="@+id/freeKm"
    app:layout_constraintEnd_toStartOf="@+id/freeKm"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/freeKm"
    tools:text="1,7 km" />

<!--tag2-->
<TextView
    android:id="@+id/freeKm"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="12dp"
    android:autoSizeTextType="uniform"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:maxWidth="95dp"
    android:textColor="@color/gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/yearOfConstruction"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/distance"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="100 vrije km" />

<!--tag3-->
<TextView
    android:id="@+id/yearOfConstruction"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:autoSizeTextType="uniform"
    android:background="@drawable/bg_gray_car_location"
    android:gravity="center"
    android:maxLines="1"
    android:textColor="@color/gray"
    app:layout_constraintTop_toTopOf="@+id/freeKm"
    app:layout_constraintBottom_toBottomOf="@+id/freeKm"
    app:layout_constraintEnd_toStartOf="@+id/newIndicator"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/freeKm"
    tools:text="plaatsnaam" />

<!--tag4-->
<TextView
    android:id="@+id/newIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:background="@drawable/bg_gray_car_location"
    android:fontFamily="@font/helvetica_neu_bold"
    android:autoSizeTextType="uniform"
    android:maxLines="1"
    android:text="@string/resource_view_free_km"
    android:textColor="@color/black"
    app:layout_constraintTop_toTopOf="@+id/freeKm"
    app:layout_constraintBottom_toBottomOf="@+id/freeKm"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toEndOf="@+id/yearOfConstruction"
    tools:text="nieuw" />

<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="distance, freeKm, yearOfConstruction, newIndicator"
    app:layout_constraintEnd_toStartOf="@+id/thumbImage"
    app:layout_constraintStart_toEndOf="@+id/guideline" />

<!--end image-->
<ImageView
    android:id="@+id/thumbImage"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:gravity="center_vertical"
    android:src="@drawable/ic_thumb_up"
    android:tint="@color/gray"
    app:layout_constraintBottom_toBottomOf="@+id/distance"
    app:layout_constraintEnd_toStartOf="@+id/numberOfBookings"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/distance" />

<!-- end view-->
<TextView
    android:id="@+id/numberOfBookings"
    style="@style/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:textSize="@dimen/button_textview"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/freeKm"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/thumbImage"
    app:layout_constraintTop_toTopOf="@+id/freeKm"
    tools:text="100%" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="85dp" />

</android.support.constraint.ConstraintLayout>