如何将元素居中在ConstraintLayout中

我在我的应用程序中使用ConstraintLayout来制作应用程序布局。 我正在尝试创build一个屏幕,其中一个EditTextButton应该居中,而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> 

在这里输入图像说明

Solutions Collecting From Web of "如何将元素居中在ConstraintLayout中"

您可以在50%位置使用水平指南,并添加底部和顶部(8dp)约束来编辑文本和button:

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

布局编辑器

有一个更简单的方法。 如果按如下方式设置布局约束,并且EditText的大小是固定的,则它将以约束布局为中心:

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

左/右对中间视图水平和顶部/底部对中心垂直。 这是因为,当您将左,右或顶部,底部约束设置为大于其自身的视图时,视图将在两个约束之间居中,即偏置设置为50%。 您也可以通过设置自己的偏见来向上/向下或向右/向左移动视图。 玩一下,你会看到它是如何影响意见的立场。

带有指南的解决scheme仅适用于单行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上查看

您可以阅读更多关于在以下post中使用链的信息:

  • 用ConstraintLayout构build接口
  • 使用ConstraintLayout构build响应式UI
 <EditText android:id="@+id/edit_text_body" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Note Body" android:minLines="3" app:layout_constraintTop_toBottomOf="@+id/edit_text_title" /> <Button android:id="@+id/edit_text_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:gravity="center" android:hint="Time Picker" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/edit_text_body" />