Android - 约束布局 - 如何使一个视图居中对齐另一个视图的边缘？

Question

我想要构建如下所示的布局:

在约束布局中，有一个像横幅一样的图像视图，然后是一个卡片，该卡片与横幅的底部边缘中心对齐，接着是另一个图像视图，该图像视图与卡片的顶部边缘中心对齐。

我遇到的问题是第二个图像视图（绿色的）在与卡片对齐时会进入背景而不是保持在前景。

以下是XML代码：

<android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            android:paddingBottom="@dimen/padding_10">

            <ImageView
                android:id="@+id/imageView_jobBackdrop_jobDetails"
                android:layout_width="match_parent"
                android:layout_height="175dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/backdrop_job_details"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_collapseMode="parallax"/>

            <ImageView
                android:id="@+id/imageView_companyLogo_jobDetails"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails"
                app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" />

            <android.support.v7.widget.CardView
                android:id="@+id/cardView_jobHeader_jobDetails"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="24dp"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintVertical_bias="0.5">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/parent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView_jobTitle_jobDetails"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="16dp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="32dp"
                        android:gravity="center"
                        android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </android.support.constraint.ConstraintLayout>
            </android.support.v7.widget.CardView>
        </android.support.constraint.ConstraintLayout>

- Suhas Shelar

---

使用高度。更高的高度应该在顶部有绿色的东西。如果CardView具有3dp的高度，则使绿色物体的高度更高，例如5dp。 - Raghunandan

要求最低API 21的高程。 - nomag

是的，由于最小SDK为19，因此无法使用高度属性。 - Suhas Shelar

你可以使用 ViewCompat.setElevation(imageview,5);。 - Raghunandan

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"
    android:orientation="vertical"
    android:padding="20dp">

    <android.support.v7.widget.CardView
        android:id="@+id/card_1"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:id="@+id/card_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="0dp"
        app:cardBackgroundColor="#69F"
        app:layout_constraintBottom_toBottomOf="@+id/card_1"
        app:layout_constraintStart_toStartOf="@+id/card_1"
        app:layout_constraintEnd_toEndOf="@+id/card_1"
        app:layout_constraintTop_toBottomOf="@+id/card_1" />

</android.support.constraint.ConstraintLayout>

解释： 这个工作的原因是下面这四行代码

以下代码使蓝色的 CardView 在白色的 CardView 底部居中。

<!-- top constraint is set to bottom of White CardView -->
app:layout_constraintTop_toBottomOf="@+id/card_1"

<!-- bottom constraint is set to bottom of White CardView -->
app:layout_constraintBottom_toBottomOf="@+id/card_1"

以下代码将蓝色的 CardView 在水平方向上居中显示

<!-- left/start constraint is set to left/start of White CardView -->
app:layout_constraintStart_toStartOf="@+id/card_1"

<!-- right/end constraint is set to right/end of White CardView -->
app:layout_constraintEnd_toEndOf="@+id/card_1"

- rupinderjeet

---

这可以作为一种替代方案，以避免直接在卡片视图上使用图像视图。谢谢！ - Suhas Shelar

Answer 2

请尝试以下操作：

<?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"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax">


    <ImageView
        android:id="@+id/imageView_jobBackdrop_jobDetails"
        android:layout_width="match_parent"
        android:layout_height="175dp"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        android:background="@android:color/white"
        app:layout_collapseMode="parallax"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintEnd_toEndOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintStart_toStartOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"  />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2"  />


</android.support.constraint.ConstraintLayout>

- Mehul Kabaria

---

我相信我发布的限制条件与您使用的限制条件相同。但是，我没有得到期望的输出。这里涉及到卡片视图和图像视图。 - Suhas Shelar

这些限制条件不适用于卡片视图。我尝试将您的中间ImageView更改为CardView，结果其他图像被放到了后面。 - Suhas Shelar