Wie können Ansichten gleichmäßig in ConstraintLayout mit festen Rändern und dynamischen Breiten platziert werden?

Question

Ich möchte ConstraintLayout wie folgt festzulegen: 1 und Breite, die flexibel sein und es wäre auf reale Breite anpassen:

Ich reparierte linken und rechten Randbedingungen, Größe Dimension Verhältnis zu 1 haben müssen des Bildschirms. Ich habe folgendes:

1. linken und rechten Randbedingungen sind 8DP
2. Größen dieser Ansichten werden auf "Jede mögliche Größe"
3. layout_constraintDimensionRatio = "1: 1"

Was ich habe, Es ist so, dass alle Ansichten als Punkte gesetzt sind, mit Ausnahme der, die die linken und rechten Beschränkungen gesetzt haben (andere haben nur die Beschränkung verlassen). Dieser hat die Regel des Verhältnisses 1: 1 angewandt.

Was soll ich tun, um dieses Layout zu reparieren?

Dies ist die xml ich byt schöpfungsketten versucht:

<?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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="rs.agilesolutions.constraintlayouttest.MainActivity"> 

    <TextView 
     android:id="@+id/textView" 
     android:text="1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginStart="8dp" 
     android:layout_marginLeft="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginTop="16dp" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:text="2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView3" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView3" 
     android:text="3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView4" 
     app:layout_constraintLeft_toRightOf="@+id/textView2" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView4" 
     android:text="4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView5" 
     app:layout_constraintLeft_toRightOf="@+id/textView3" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView5" 
     android:text="5" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView4" 
     style="@style/TextViewCustom" 
     app:layout_constraintDimensionRatio="1:1" /> 

</android.support.constraint.ConstraintLayout> 

Und das ist das Ergebnis:

Ziemlich nahe, aber nicht gut genug.

Answer 1

Sie können chains erstellen, um die gleiche Verteilung sicherzustellen (z. B. eine Kette pro Zeile) - auf diese Weise wird jedes Widget die gleiche Dimension haben. Der Rest von dem, was Sie beschreiben, sollte korrekt sein.

bearbeiten: hier ist etwas XML. Der Trick besteht darin, den Rand nur für das erste Element festzulegen.

<?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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView" 
     android:text="1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginStart="8dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginTop="8dp" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView2" 
     android:text="2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView3" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView3" 
     android:text="3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView4" 
     app:layout_constraintLeft_toRightOf="@+id/textView2" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView4" 
     android:text="4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView5" 
     app:layout_constraintLeft_toRightOf="@+id/textView3" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView5" 
     android:text="5" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView4" 
     app:layout_constraintDimensionRatio="1:1" /> 

</android.support.constraint.ConstraintLayout>