如何在ConstraintLayout中居中元素

我在我的应用程序中使用ConstraintLayout来制作应用程序布局。我正在尝试创建一个屏幕，其中一个EditText和Button应位于中心，而Button应低于EditText，并且边距最高只有16dp。如何在ConstraintLayout中居中元素

这是我的布局和截图，它是如何看现在。

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>

来源

2017-03-31 N Sharma

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

更新：
您也可以使用packed模式，如尤金的答案描述chain功能。

来源

2017-03-31 15:01:08 Pycpik

Thanks @Pycpik我无法理解'

'layout_constraintGuide_percent'有什么用？ –

'指引线'只是一个隐形物品，您可以在其上固定您的视图。 'layout_constraintGuide_percent'是父级中的百分比。这里0.5是50％高度 – Pycpik

有一个更简单的方法。如果设置布局约束如下，您的EditText是固定的大小，它会被集中在约束布局：

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

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

来源

2017-07-25 22:10:09 binW

我更喜欢这个解决方案！ –

这是比使用指南更好的方法。 – ssand

但这并没有回答这个问题...请参阅Eugene的答案或我的... – Pycpik

含引导线的解决方案仅适用于具有单行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>

下面是它的外观：

你可以阅读更多有关在下面的帖子使用链：

来源

2017-10-11 15:49:06

-1

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

来源

2017-12-11 15:08:08

如何在ConstraintLayout中居中元素

回答

相关问题