如何在ConstraintLayout元素的中心

我使用ConstraintLayout在我的应用程序,使应用程序布局。我试图创建一个屏幕,其中一个EditTextButton应该在中心,Button应该在EditText的下面,边缘只有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>

enter image description here

273578 次浏览

更新:

您现在可以在packed模式中使用chain特性,如Eugene的回答所述。


指导方针

你可以在50%的位置使用水平的指导线,并添加底部和顶部(8dp)约束edittext和按钮:

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

Layout Editor

有一个更简单的方法。如果你像下面这样设置布局约束,并且你的EditText是固定大小的,它将在ConstraintLayout中居中:

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

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

使用指南的解决方案仅适用于这种特殊情况,即单行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_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>

这是它的样子:

View on Nexus 5

你可以在以下文章中阅读更多关于使用链的内容:

你可以在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>

使用constraintCircle到parent和零半径,你可以让你的视图成为parent的中心。

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

这个例子使用了宽度和高度的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'
}

enter image description here

在视图中添加这些标记

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

你可以在设计模式下右键点击,选择居中。

只需要在你的布局中添加android:gravity="center"就完成了:)

使用

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

例子

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