ConstraintLayout-如何垂直对齐两个视图的中心 [英] ConstraintLayout - how to align centers of two views vertically

问题描述

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

I have two views - A and B. They have different heights.

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

How to vertically align the centers of these views inside ConstraintLayout?

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

For example, in the XML below, I would like the center of img_change_picture to be aligned with the center of 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>

推荐答案

1. 在没有准则"的情况下，将属性放置在需要垂直对齐的每个视图上.

1. Without Guideline, put attributes on every views that you need to align vertically.

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

具有指导原则

With Guideline

添加水平基准线，并使其与layout_constraintGuide_percent垂直居中.

Add horizontal Guideline and make it vertically center with 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"/>

对于每个视图，将其锚定为具有属性的准则

For every views, anchor them to guideline with attributes

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

有了该准则，您将具有更大的灵活性，因为您可以通过移动准则轻松更改所有视图的位置.

With guideline, you have more flexibility, as you can change all views position easily by moving the guideline.

更新:

要将视图与另一个视图垂直居中对齐，则只需在属性中引用视图ID.要将txt_change_picture与img_change_picture垂直居中对齐，可以更改布局，如下所示:

To align a view vertically center against another view then you just need to refer the view id in attribute. To align txt_change_picture vertically center against img_change_picture, you can change layout like this:

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

/>

这篇关于ConstraintLayout-如何垂直对齐两个视图的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！