Constraintlayout - Platziere Textansicht unter der Bildansicht und verursache unerwartete Wachstumsschritte.

Question

Ich möchte 4 Bilder haben, die die Breite des Elternteils einnehmen und die Bilder sollten die Gesamtbreite durch einen Offset um 4 teilen. Dies ist, wie es aussieht:

Jetzt habe ich vier textlabels unter ihnen platziert werden soll. Jedes ImageView sollte ein Textlabel darunter haben. Das ist das Problem: Wenn ich versuche, ein TextView zu zentrieren, wächst eines der 4 Bilder zufällig. Ich kann die Bilder nicht so einstellen, dass sie alle die gleiche Breite/Höhe haben.

Dies ist, wie es aussehen soll:

Wie kann ich Platz und in der Mitte die Textviews unter dem ImageViews? Dies ist der XML:

<?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="match_parent" 
    tools:context="xxx"> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Textview" 
     android:textSize="24sp" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_marginStart="8dp" 
     android:background="@drawable/website" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/textView" /> 

    <ImageView 
     android:id="@+id/imageView3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:scaleType="centerInside" 
     android:src="@drawable/website" 
     app:layout_constraintDimensionRatio="1:1" 
     app:layout_constraintEnd_toStartOf="@+id/imageView12" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread_inside" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/imageView2" /> 

    <ImageView 
     android:id="@+id/imageView12" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:scaleType="centerInside" 
     android:src="@drawable/website" 
     app:layout_constraintBottom_toBottomOf="@+id/imageView3" 
     app:layout_constraintDimensionRatio="1:1" 
     app:layout_constraintEnd_toStartOf="@+id/imageView11" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toEndOf="@+id/imageView3" 
     app:layout_constraintTop_toTopOf="@+id/imageView3" /> 

    <ImageView 
     android:id="@+id/imageView11" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:scaleType="centerInside" 
     android:src="@drawable/website" 
     app:layout_constraintBottom_toBottomOf="@+id/imageView12" 
     app:layout_constraintDimensionRatio="1:1" 
     app:layout_constraintEnd_toStartOf="@+id/imageView10" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toEndOf="@+id/imageView12" 
     app:layout_constraintTop_toTopOf="@+id/imageView12" /> 

    <ImageView 
     android:id="@+id/imageView10" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:scaleType="centerInside" 
     android:src="@drawable/website" 
     app:layout_constraintBottom_toBottomOf="@+id/imageView11" 
     app:layout_constraintDimensionRatio="1:1" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toEndOf="@+id/imageView11" 
     app:layout_constraintTop_toTopOf="@+id/imageView11" /> 

</android.support.constraint.ConstraintLayout> 

Answer 1

Sie können Kette TextView Widgets auf die gleiche Weise tat mit Bildansichten.

<?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="match_parent"> 

    <ImageView 
     android:id="@+id/iv1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/ic_launcher_background" 
     app:layout_constraintDimensionRatio="1" 
     app:layout_constraintEnd_toStartOf="@+id/iv2" 
     app:layout_constraintHorizontal_chainStyle="spread_inside" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <ImageView 
     android:id="@+id/iv2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/ic_launcher_background" 
     app:layout_constraintDimensionRatio="1" 
     app:layout_constraintEnd_toStartOf="@+id/iv3" 
     app:layout_constraintStart_toEndOf="@+id/iv1" 
     app:layout_constraintTop_toTopOf="@+id/iv1" /> 

    <ImageView 
     android:id="@+id/iv3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/ic_launcher_background" 
     app:layout_constraintDimensionRatio="1" 
     app:layout_constraintEnd_toStartOf="@+id/iv4" 
     app:layout_constraintStart_toEndOf="@+id/iv2" 
     app:layout_constraintTop_toTopOf="@+id/iv1" /> 

    <ImageView 
     android:id="@+id/iv4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="8dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/ic_launcher_background" 
     app:layout_constraintDimensionRatio="1" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toEndOf="@+id/iv3" 
     app:layout_constraintTop_toTopOf="@+id/iv1" /> 

    <TextView 
     android:id="@+id/tv1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:gravity="center" 
     android:text="Textview" 
     android:textSize="20sp" 
     app:layout_constraintEnd_toStartOf="@+id/tv2" 
     app:layout_constraintHorizontal_chainStyle="spread_inside" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/iv1" /> 

    <TextView 
     android:id="@+id/tv2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:gravity="center" 
     android:text="Textview" 
     android:textSize="20sp" 
     app:layout_constraintEnd_toStartOf="@+id/tv3" 
     app:layout_constraintStart_toEndOf="@+id/tv1" 
     app:layout_constraintTop_toTopOf="@+id/tv1" /> 

    <TextView 
     android:id="@+id/tv3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:gravity="center" 
     android:text="Textview" 
     android:textSize="20sp" 
     app:layout_constraintEnd_toStartOf="@+id/tv4" 
     app:layout_constraintStart_toEndOf="@+id/tv2" 
     app:layout_constraintTop_toTopOf="@+id/tv1" /> 

    <TextView 
     android:id="@+id/tv4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:gravity="center" 
     android:text="Textview" 
     android:textSize="20sp" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toEndOf="@+id/tv3" 
     app:layout_constraintTop_toTopOf="@+id/tv1" /> 

</android.support.constraint.ConstraintLayout> 

Vergessen Sie nicht, diese Zeile in gradle Build-Datei

implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta3' 

hoffe, das hilft hinzuzufügen!

Answer 2

Für die in der oberen Bild gezeigten Ergebnisse, die einfache Möglichkeit, es so tut,

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<LinearLayout 
    android:id="@+id/frame_1" 
    android:layout_width="0dp" 
    android:layout_height="150dp" 
    android:layout_marginRight="4dp" 
    android:orientation="vertical" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/frame_2" 
    app:layout_constraintTop_toTopOf="parent"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="120dp" 
     android:background="#eee" /> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Text1" /> 
</LinearLayout> 

<LinearLayout 
    android:id="@+id/frame_2" 
    android:layout_width="0dp" 
    android:layout_height="150dp" 
    android:layout_marginRight="2dp" 
    android:orientation="vertical" 
    app:layout_constraintLeft_toRightOf="@+id/frame_1" 
    app:layout_constraintRight_toLeftOf="@+id/frame_3" 
    app:layout_constraintTop_toTopOf="parent"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="120dp" 
     android:background="#eee" /> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Text2" /> 
</LinearLayout> 

<LinearLayout 
    android:id="@+id/frame_3" 
    android:layout_width="0dp" 
    android:layout_height="150dp" 
    android:layout_marginLeft="2dp" 
    android:orientation="vertical" 
    app:layout_constraintLeft_toRightOf="@+id/frame_2" 
    app:layout_constraintRight_toLeftOf="@+id/frame_4" 
    app:layout_constraintTop_toTopOf="parent"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="120dp" 
     android:background="#eee" /> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Text3" /> 
</LinearLayout> 

<LinearLayout 
    android:id="@+id/frame_4" 
    android:layout_width="0dp" 
    android:layout_height="150dp" 
    android:layout_marginLeft="4dp" 
    android:orientation="vertical" 
    app:layout_constraintLeft_toRightOf="@+id/frame_3" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="120dp" 
     android:background="#eee" /> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Text4" /> 
</LinearLayout>