ConstraintLayout元素居中指南：水平、垂直、同时居中

2024-03-06 05:25:48

ConstraintLayout 中元素居中指南

引言

ConstraintLayout 是一种功能强大的布局，允许开发人员以声明的方式构建复杂布局。通过使用它，您可以轻松地定位和对齐视图，无需使用传统布局（如相对布局或线性布局）。本文将探讨如何在 ConstraintLayout 中水平和垂直居中元素。

水平居中

要水平居中一个元素，请使用属性 app:layout_constraintLeft_toLeftOf 和 app:layout_constraintRight_toRightOf。这两个属性将元素的左边缘与父视图的左边缘对齐，并将右边缘与父视图的右边缘对齐。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

垂直居中

要垂直居中一个元素，请使用属性 app:layout_constraintTop_toTopOf 和 app:layout_constraintBottom_toBottomOf。这两个属性将元素的上边缘与父视图的上边缘对齐，并将下边缘与父视图的下边缘对齐。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

水平和垂直居中

要同时水平和垂直居中一个元素，请结合使用前面讨论的属性。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

示例

以下是水平和垂直居中按钮的 ConstraintLayout 示例：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

常见问题解答

1. 如何在 ConstraintLayout 中居中多个元素？

使用 Barrier 约束。 Barrier 可以垂直或水平地对齐多个元素的顶部、底部、左侧或右侧。

2. 如何将元素居中在父视图中特定位置？

使用 app:layout_constraintGuide_percent 属性。这允许您根据百分比在父视图中创建垂直或水平指导线。

3. 如何水平或垂直地将元素与其他元素对齐？

使用 app:layout_constraintStart_toStartOf、app:layout_constraintEnd_toEndOf、app:layout_constraintTop_toBottomOf 和 app:layout_constraintBottom_toTopOf 属性。

4. 如何将元素相对于父视图的中心对齐？

创建垂直和水平 Barrier 约束，然后将元素与这些 Barrier 约束居中。

5. 如何以编程方式控制元素的定位？

使用 ConstraintSet 类的属性 centerHorizontally() 和 centerVertically()。