Constraintlayout - 将textview放在imageview下面，导致意外增长

Question

我希望有4个图像占用父母的宽度，图像应该将总宽度除以4并有一些偏移量。这就是它的样子：

现在我想在它们下面放置四个文本标签。每个ImageView下面都应该有一个文本标签。这就是问题所在：当我尝试将TextView居中时，4个图像中的1个随机增长。我无法将图像设置为具有相同的宽度/高度。

它应该是这样的：

如何将TextView放置在ImageViews下面并居中？这是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

您可以像使用图像视图一样链接TextView小部件。

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

对于上图中显示的结果，最简单的方法就是这样做，

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