ConstraintLayout - 如何垂直对齐两个视图的中心

Question

我有两个视图 - A和B。它们的高度不同。

如何在ConstraintLayout内垂直对齐这些视图的中心？

例如，在下面的XML中，我希望img_change_picture的中心与txt_change_picture的中心对齐。

<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.support.constraint.Guideline
    android:id="@+id/guideline_icons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.1"/>

<android.support.constraint.Guideline
    android:id="@+id/guideline_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.2"/>

<ImageView
    android:id="@+id/img_change_picture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@id/guideline_icons"
    app:layout_constraintTop_toBottomOf="@id/img_header"
    android:layout_marginTop="@dimen/settings_main_vertical_spacing"
    app:srcCompat="@drawable/change_picture"/>

<TextView
    android:id="@+id/txt_change_picture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@id/guideline_text"
    android:text="@string/settings_main_change_picture"
    />

</android.support.constraint.ConstraintLayout>

- Vasiliy

---

请发布您的 XML。 - Juan Cruz Soler

@JuanCruzSoler，添加了XML。 - Vasiliy

Answer 1

1. 如果没有指导方针，请在需要垂直对齐的每个视图上放置属性。

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

使用指南

添加水平指南线并使用 layout_constraintGuide_percent 使其垂直居中。

<androidx.constraintlayout.widget.Guideline
     android:id="@+id/guideline"
     android:layout_width="1dp"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.5"/>

对于每一个视图，都要使用属性将其锚定到指南线上。

app:layout_constraintTop_toTopOf="@id/guideline"
app:layout_constraintBottom_toBottomOf="@id/guideline"

有了参考线，您可以通过移动参考线轻松更改所有视图的位置，从而获得更大的灵活性。

更新：

要使一个视图在垂直方向上相对于另一个视图居中，您只需要在属性中引用该视图的ID。 要使txt_change_picture在垂直方向上相对于img_change_picture居中，您可以像这样更改布局：

<TextView
    android:id="@+id/txt_change_picture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@id/guideline_text"
    android:text="@string/settings_main_change_picture"

    app:layout_constraintTop_toTopOf="@id/img_change_picture"
    app:layout_constraintBottom_toBottomOf="@id/img_change_picture"

/>

- Zamrony P. Juhara

---

谢谢您的回复，但我不想将视图集中在父视图中。我想先定位视图A，然后相对于A定位视图B，使得B的垂直中心与A的垂直中心相同。 - Vasiliy

谢谢。现在看来，我本来可以自己解决的，因为我知道如何在父元素中居中。 - Vasiliy

Answer 2

Android Studio 3.5

如果太长不想看...

选择所需的视图，右键单击 :

然后您会得到:

- HotJard