Constraintlayout - 예기치 않게 커지는 이미지 뷰 아래에 텍스트 뷰 배치.

Question

부모의 너비를 차지하는 이미지가 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>