如何在 ConstraintLayout 中将布局的所有内容置于中心
How to bring all the content of the layout at centre in ConstraintLayout
我正在制作一个登录屏幕，其中有 2 个 EditText 和 2 个 Buttons。我将它们垂直放置在彼此下方。但我想将所有内容置于我的布局中心。
下面是我的activity_login.xml:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/passwordLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_user"
android:hint="@string/email"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/emailLayout"
app:layout_constraintBottom_toBottomOf="@+id/logi">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_password"
android:hint="@string/password"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/loginSubmit"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/passwordLayout" />
<Button
android:id="@+id/registerText"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/register"
android:theme="@style/RegistrationButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>
这是布局的图片：
我不能把这些观点带到中心。
我在 ConstraintLayout 中使用打包链接。所以，你的应该是这样的：
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/passwordLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_user"
android:hint="@string/email"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/emailLayout"
app:layout_constraintBottom_toTopOf="@+id/loginSubmit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_password"
android:hint="@string/password"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/loginSubmit"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login"
app:layout_constraintTop_toBottomOf="@+id/passwordLayout"
app:layout_constraintBottom_toTopOf="@+id/registerText"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<Button
android:id="@+id/registerText"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/register"
android:theme="@style/RegistrationButton"
app:layout_constraintTop_toBottomOf="@+id/loginSubmit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
生成的布局应如下所示：
首先确保您使用的是最新版本的 ConstraintLayout（在撰写本文时为 1.0.2）。您可以通过为最顶部的元素 (emailLayout) 提供 app:layout_constraintVertical_chainStyle="packed" 属性来实现垂直居中。
除此之外，您还需要确保所有元素都像代码中的链条一样连接。 IE。最上面的视图 (emailLayout) 在顶部受父级的约束，在底部受下一个兄弟 (passwordLayout) 的约束。
第二个视图（passwordLayout）需要在它之前的同级视图（emailLayout）和约束下底部的下一个兄弟 (loginSubmit) 等等...
最后一个视图 (registerText) 对之前的兄弟项也有顶部约束，但对父级的底部有底部约束。
提示：android:orientation="vertical" 在 ConstraintLayout 中没有用。你可以忽略这个。
编辑：
这里是使用 ConstraintLayout:
的垂直居中的最小代码示例
<?xml version="1.0" encoding="utf-8"?>
<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">
<View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff0000"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"/>
<View
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="@+id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"/>
<View
android:id="@+id/view3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="@+id/view2"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
导致：
我正在制作一个登录屏幕，其中有 2 个 EditText 和 2 个 Buttons。我将它们垂直放置在彼此下方。但我想将所有内容置于我的布局中心。
下面是我的activity_login.xml:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/passwordLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_user"
android:hint="@string/email"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/emailLayout"
app:layout_constraintBottom_toBottomOf="@+id/logi">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_password"
android:hint="@string/password"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/loginSubmit"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/passwordLayout" />
<Button
android:id="@+id/registerText"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/register"
android:theme="@style/RegistrationButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>
这是布局的图片：
我不能把这些观点带到中心。
我在 ConstraintLayout 中使用打包链接。所以，你的应该是这样的：
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/passwordLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_user"
android:hint="@string/email"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/emailLayout"
app:layout_constraintBottom_toTopOf="@+id/loginSubmit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<android.support.design.widget.TextInputEditText
android:id="@+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_action_password"
android:hint="@string/password"
android:textAppearance="@style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/loginSubmit"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login"
app:layout_constraintTop_toBottomOf="@+id/passwordLayout"
app:layout_constraintBottom_toTopOf="@+id/registerText"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<Button
android:id="@+id/registerText"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/register"
android:theme="@style/RegistrationButton"
app:layout_constraintTop_toBottomOf="@+id/loginSubmit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
生成的布局应如下所示：
首先确保您使用的是最新版本的 ConstraintLayout（在撰写本文时为 1.0.2）。您可以通过为最顶部的元素 (emailLayout) 提供 app:layout_constraintVertical_chainStyle="packed" 属性来实现垂直居中。
除此之外，您还需要确保所有元素都像代码中的链条一样连接。 IE。最上面的视图 (emailLayout) 在顶部受父级的约束，在底部受下一个兄弟 (passwordLayout) 的约束。
第二个视图（passwordLayout）需要在它之前的同级视图（emailLayout）和约束下底部的下一个兄弟 (loginSubmit) 等等...
最后一个视图 (registerText) 对之前的兄弟项也有顶部约束，但对父级的底部有底部约束。
提示：android:orientation="vertical" 在 ConstraintLayout 中没有用。你可以忽略这个。
编辑： 这里是使用 ConstraintLayout:
的垂直居中的最小代码示例<?xml version="1.0" encoding="utf-8"?>
<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">
<View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff0000"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"/>
<View
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="@+id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"/>
<View
android:id="@+id/view3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="@+id/view2"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
导致：