Как правильно использовать 2 цепочки рядом друг с другом в constraintLayout (android) без наложения цепочек, когда представления увеличиваются?

Question

Я боролся с этим уже несколько дней. Вероятно, это возможно без constraintLayout, чтобы сделать это, но мне бы очень хотелось, чтобы это было сделано с помощью constraintLayout.

У меня есть 6 просмотров рядом друг с другом. 4 слева, 2 справа, но на той же высоте. Те 2 слева, они не меняют ширину, и они всегда должны быть справа. Те 4 справа изменяют размеры и, что более важно, иногда не все 4 вида будут отображаться. Конечно, я не могу связать шесть из них, потому что тогда, если есть только 2 тега на левой стороне, мои 2 вида справа переместятся влево.

Моя лучшая попытка заключалась в объединении 4 представлений слева. И объединяя 2 вида справа. Это прекрасно работает, кроме! когда справа будет увеличенный вид, тогда эти 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 спасибо за предложение о барьере / рекомендации.Я положу свой код внизу.К сожалению, я не очень понимаю, что я сделал, но это выглядит хорошо .... - 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>