如何在ConstraintLayout中将元素居中

201

我正在ConstraintLayout应用程序中进行布局。我想一个创建屏幕wheren一个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_width="match_parent"
    android:layout_height="match_parent"
    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_width="0dp"
        android:layout_height="wrap_content"
        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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="0dp"
        android:layout_height="wrap_content"
        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>

在此处输入图片说明

android  android-layout  android-constraintlayout 
— 夏尔马
source

Answers:

145

更新：

链

您现在可以按照Eugene的答案中所述在模式下使用chain功能packed。

指导方针

您可以在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_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="0dp"
        android:layout_height="wrap_content"
        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_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

布局编辑器

— 皮皮克
source
1
谢谢@Pycpik我不明白它的用途是<android.support.constraint.Guideline什么？我们每次使用时都需要使用ConstraintLayout吗？
— N Sharma
有什么用layout_constraintGuide_percent？
— N Sharma
1
Guideline只是一个不可见的项目，您可以在其上锚定视图。layout_constraintGuide_percent是父级中的百分比。这里0.5是身高的50％
— Pycpik'Mar
谢谢。知道了 我现在有两个TextInputEditText和一个Button。我想将它们放在屏幕中央。但到目前为止，它还不是pastebin.com/iXYtuXHg，这是屏幕截图dropbox.com/s/k7997q2buvw76cp/q.png?dl=0
— N Sharma
1
您可以将中间的一个居中，然后在上方添加一个，在下方添加一个，或将它们放在a LinearLayout并将其居中。
— Pycpik '17
328

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

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

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

— W
source
5
这是比使用准则更好的方法。
— ssand
47
app:layout_constraintCenter_in="parent"会好得多。但是和往常一样，谷歌没有提供它。
— Gojir4
1
这更合适，而且我在许多官员的谈话和例子中也看到了这一点。
— TapanHP '18
简单易懂。
— Yohanes AI
2
指南会更好，因为一旦您有了一个复杂的布局，一旦营销掌握了这种布局，那么简单的居中就不再起作用。最好有一个指南，并以顶部和底部指南为中心
— Nick Turner19年
58

带有准则的解决方案仅适用于单行EditText的特定情况。为了使其适用于多行EditText，您应该使用“打包”链。

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="0dp"
        android:layout_height="wrap_content"
        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>

外观如下：

在Nexus 5上查看

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

— 尤金·布鲁索夫（Eugene Brusov）
source
这无疑是最好的答案。其他答案仅适用于一两个视图。该视图可扩展性更高，因为它可以根据需要使用一个，两个和任意多个视图。
— mdelolmo
20

您可以将视图居中作为屏幕尺寸的百分比。

本示例使用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_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        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'
}

在此处输入图片说明

— 真爱
source
12

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

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

您可以在设计模式下单击鼠标右键，然后选择“中心”。

— 贝拉德
source
8

您可以在ConstraintLayout中将layout_constraintCircle用于中心视图。

<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_width="match_parent"
        android:layout_height="match_parent">
        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp"
            />
    </android.support.constraint.ConstraintLayout>

约束条件为父级且半径为零时，可以使视图成为父级的中心。

— 恩纳希
source
最佳解决方案 就像一个“应用程序：layout_constraintCenter_in =”父“”（不存在）
— BénédicteLagouge
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.