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

时间:2018-02-12 00:57:37

标签: android android-constraintlayout

我有两个观点 - 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>

2 个答案:

答案 0 :(得分:7)

  1. 如果没有指南,请将属性放在需要垂直对齐的每个视图上。

    .bashrc
  2. 使用指南

  3. 添加水平指南,并使其与app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 垂直居中。

    layout_constraintGuide_percent

    对于每个视图,将它们锚定到带有属性的指南

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

    使用指南,您可以更灵活,因为您可以通过移动指南轻松更改所有视图位置。

    <强>更新

    要将视图垂直居中对齐另一个视图,您只需要在属性中引用视图ID。要将app:layout_constraintTop_toTopOf="@id/guideline" app:layout_constraintBottom_toBottomOf="@id/guideline" 垂直居中与txt_change_picture对齐,您可以更改此布局:

    img_change_picture

答案 1 :(得分:1)

Android Studio 3.5

如果是TL; TR ...

选择所需的视图,右键单击press

您会得到:

enter image description here