Constraintlayout - 画像ビューの下にテキストビューを配置すると予期せぬ成長が起こる

Question

親の幅を占める4つの画像が必要なので、画像は合計幅をいくつかのオフセットで4で割る必要があります。これは、次のようになります。

今、私はその下に4 textlabelsを配置します。各ImageViewの下にはテキストラベルがあります。これは問題です。私がTextViewを中心に置くと、4つの画像のうち1つがランダムに大きくなります。私はすべての等幅/高さを持つように画像を設定することはできません。私はImageViews下TextViewsを配置し、中央にはどうすればよい

：

これは、それがどのように見えるかですか？これは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

、このようにそれをやっていますイメージビューでやった

<?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> 

あなたのGradleのビルドファイルに次の行を追加することを忘れないでください

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

・ホープ、このことができます！

Answer 2

、最も簡単な方法は、あなたがチェーンTextViewが同じようあなたをウィジェットできる

<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>