Question

我正在尝试将两个视图彼此垂直和水平居中对齐。视图的大小是动态设置为屏幕的大小，这是屏幕的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=".MainActivity">


<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintLeft_toLeftOf="@id/purple"
    app:layout_constraintRight_toRightOf="@id/purple"
    app:layout_constraintTop_toTopOf="@id/purple" />

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

结果与预期不符

如何使用约束布局将黄色图像居中于紫色图像后面？（我知道如何在其他布局中实现此目标）

Answer 1

更新-

您可以使用Circular Positioning将较大的视图居中于较小的视图后面。

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintLeft_toLeftOf="@id/purple"
    app:layout_constraintRight_toRightOf="@id/purple"
    app:layout_constraintTop_toTopOf="@id/purple"
    app:layout_constraintCircle="@id/purple"
    app:layout_constraintCircleRadius="0dp"/>

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

您可以将大视图固定在小视图前面，而不是将大视图在小视图后面居中。

以下几行应该会起作用，

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@id/yellow"
    app:layout_constraintLeft_toLeftOf="@id/yellow"
    app:layout_constraintRight_toRightOf="@id/yellow"
    app:layout_constraintTop_toTopOf="@id/yellow" />

Answer 2

尝试这种方式

 <ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintBottom_toBottomOf="@id/purple"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/purple" />

<ImageView
    android:id="@+id/purple"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#c303fa"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer 3

如果您希望黄色与另一张图片的大小相同，只需在黄色图片中更改此行

app:layout_constraintHeight_percent="0.6"

为此：

app:layout_constraintHeight_percent="0.5"

您需要做的就是在两个图像上使app:layout_constraintHeight_percent的值相同。

在您的情况下，一幅图像的大小为50%屏幕大小，另一幅图像的大小为60%，因此它们看起来并不相同

Answer 4

以此替换您的黄色图片

<ImageView
    android:id="@+id/yellow"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#faff68"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"

约束布局将两个视图垂直和水平对齐

4 个答案: