如果视图变大，我如何在constraintLayout（android）中正确使用2个chainz彼此相邻而不覆盖链？

Question

我几天来一直在努力解决这个问题。它可能没有约束，可以完成这个，但我真的希望用constraintLayout完成它。

我彼此相邻有6个视图。左侧为4，右侧为2，但高度相同。左边的那两个，它们不会改变宽度，它们应该总是在右边。右边的那4个改变了大小，更重要的是，有时并不是所有4个视图都会出现。当然，我不能连接其中的六个，因为那时，如果左侧只有2个标签，我右边的2个视图将向左移动。

我最好的尝试是在左边链接4个视图。并在右边链接2个视图。这完全没问题，除了！当右侧有更大的视图时，这4个视图将覆盖右侧的2个视图。但是，每当我制定约束以确保4个视图不会覆盖我的正确视图时，android认为我正在链接6个视图并且我得到上面的问题。

那么，谁知道解决这个问题的好方法？对我来说这真是个大难题。

它应该是这样的：

我希望它看起来（有点像）所以总是在第4和第5视图之间的边距。

这里是我使用的代码:(我一直在努力，并尝试了很多东西，如指南和障碍，所以它肯定是nog但干净，编码很好）

    <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感谢有关障碍/指南的建议。我会把我的代码放在下面。不幸的是我没有喷气机真的明白我做了什么，但看起来不错.... - Titei 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>