Constraintlayout - 将 textview 放置在 imageview 下方导致意外增长
Constraintlayout - place textview beneath imageview causing unexpected grows
我想要 4 张占据父级宽度的图像，图像应将总宽度除以 4 并进行一些偏移。这是它的样子：
现在我想在它们下面放置四个文本标签。每个 ImageView 下方都应有一个文本标签。这就是问题所在：当我尝试将 TextView 居中时，4 张图像中的 1 张只是随机增长。我无法将图像设置为全部相等 width/heights。
它应该是这样的：
如何将 TextView 放置在 ImageView 下方并居中？这是 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>
对于上图所示的结果，最简单的方法就是这样做，
<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>
您可以像处理图像视图一样链接 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'
希望对您有所帮助！
我想要 4 张占据父级宽度的图像，图像应将总宽度除以 4 并进行一些偏移。这是它的样子：
现在我想在它们下面放置四个文本标签。每个 ImageView 下方都应有一个文本标签。这就是问题所在：当我尝试将 TextView 居中时，4 张图像中的 1 张只是随机增长。我无法将图像设置为全部相等 width/heights。
它应该是这样的：
如何将 TextView 放置在 ImageView 下方并居中？这是 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>
对于上图所示的结果，最简单的方法就是这样做，
<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>
您可以像处理图像视图一样链接 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'
希望对您有所帮助！