如何使 ConstraintLayout 中的元素居中

Posted

技术标签:

【中文标题】如何使 ConstraintLayout 中的元素居中【英文标题】：How to center the elements in ConstraintLayout 【发布时间】：2017-08-25 21:21:35 【问题描述】：

我在我的应用程序中使用ConstraintLayout 来制作应用程序布局。我正在尝试创建一个屏幕，其中一个 EditText 和 Button 应该位于中心，Button 应该低于 EditText，marginTop 只有 16dp。

这是我现在的布局和屏幕截图。

activity_authenticate_content.xml

<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_
    android:layout_
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_
            android:layout_
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_
        android:layout_
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

【问题讨论】：

【参考方案1】：

有一个更简单的方法。如果您按如下方式设置布局约束并且您的EditText 的大小是固定的，它将在ConstraintLayout 中居中：

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

左/右对水平居中视图，上/下对垂直居中。这是因为当您将左侧、右侧或顶部、底部约束设置为大于其自身的视图时，视图会在两个约束之间居中，即偏差设置为 50%。您还可以通过设置自己的偏差来向上/向下或向右/向左移动视图。稍微玩一下，你就会看到它是如何影响视图位置的。

【讨论】：

这比使用指南要好得多。 这更合适，我在许多官员的谈话和例子中也看到了这一点。 简单易懂。 指南更好，因为一旦你有一个复杂的布局，一旦营销掌握了它就会发生这种情况，那么简单的居中就不再起作用了。最好有准则并以顶部和底部的准则为中心 这仅在您想要居中的文本视图不用于调整其他视图对象的位置时才有用...【参考方案2】：

更新：

链

您现在可以在 packed 模式下使用 chain 功能，如尤金的回答中所述。

指南

您可以在 50% 的位置使用水平参考线，并为编辑文本和按钮添加底部和顶部 (8dp) 约束：

<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_
    android:layout_
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_
        android:layout_
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_
            android:layout_
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_
        android:layout_
        android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <android.support.constraint.Guideline
        android:layout_
        android:layout_
        android:id="@+id/guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

【讨论】：

谢谢@Pycpik 我不明白&lt;android.support.constraint.Guideline 的用途是什么？每次使用ConstraintLayout时都需要使用吗？ layout_constraintGuide_percent有什么用？ Guideline 只是一个不可见的项目，您可以在其上锚定您的观点。 layout_constraintGuide_percent 是父级中的百分比。这里 0.5 是 50 % 高度 谢谢。明白了。我现在有两个TextInputEditText 和一个Button。我想把它们放在屏幕的中心。但目前还不是pastebin.com/iXYtuXHg 这是截图dropbox.com/s/k7997q2buvw76cp/q.png?dl=0 您可以将中间的一个居中，然后在上方添加一个，在下方添加一个，或者将它们放在LinearLayout 中并居中。【参考方案3】：

带有指南的解决方案仅适用于具有单行 EditText 的特殊情况。要使其适用于多行EditText，您应该使用layout_constraintVertical_chainStyle="packed"。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:layout_
            android:layout_
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_
        android:layout_
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

它的外观如下：

您可以在以下帖子中阅读有关使用链的更多信息：

Building interfaces with ConstraintLayout Build a Responsive UI with ConstraintLayout

【讨论】：

这当然是最好的答案。其他答案仅适用于一两个视图。这个更具可扩展性，因为它适用于一个、两个和任意数量的视图。【参考方案4】：

您可以将视图居中显示为屏幕大小的百分比。

此示例使用 50% 的宽度和高度：

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

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_
        android:layout_
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

这是使用 ConstraintLayout 1.1.3 版完成的。不要忘记将它添加到 gradle 中的依赖项中，如果有新版本，请增加版本：

dependencies 
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

【讨论】：

【参考方案5】：

在你的视图中添加这些标签

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

您可以在设计模式下右键单击并选择居中。

【讨论】：

【参考方案6】：

您可以使用layout_constraintCircle 在ConstraintLayout 内部查看中心视图。

<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:id="@+id/mparent"
        android:layout_
        android:layout_>

        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_
            android:layout_
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp" />

</android.support.constraint.ConstraintLayout>

将 constraintCircle 设置为父级且半径为零，您可以使您的视图成为父级的中心。

【讨论】：

最佳解决方案。就像 "app:layout_constraintCenter_in="parent"" （不存在） 此视图不受限制。它只有设计时位置，所以它会在运行时跳转到 (0,0)，除非你添加约束【参考方案7】：

只需在布局中添加 android:gravity="center" 即可：)

【讨论】：

【参考方案8】：

使用

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

例子

<ImageView
    android:id="@+id/ivIcon"
    android:layout_
    android:layout_
    android:src="@drawable/ic_launcher_background"
    android:contentDescription="@string/app_name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

【讨论】：

【参考方案9】：

我们可以简单地使用它

    <androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/input_iv"
    android:layout_
    android:layout_
    android:layout_marginStart="4dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/ic_my_account" />

【讨论】：

以上是关于如何使 ConstraintLayout 中的元素居中的主要内容，如果未能解决你的问题，请参考以下文章

相对于jetpack中的其他元素创建垂直链组成ConstraintLayout？

ConstraintLayout 中的 Gone 元素会留下幽灵空间

使用 Android ConstraintLayout 使视图居中出现问题

Android开发 - 掌握ConstraintLayout障碍线(Barrier)

Android studio ConstraintLayout大小调整问题

Android - ConstraintLayout 内的 TextView 向右无限远 - 如何使用 ImageView 固定并有省略号