Как центрировать элементы в ConstraintLayout

Я использую ConstraintLayout в моем приложении, чтобы сделать макет приложения. Я пытаюсь создать экран, где один 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>


enter image description here

575   4  

4 ответов:

обновление:

цепи

теперь вы можете использовать chain функция packed режим, как описано в ответе Евгения.

руководство

вы можете использовать горизонтальную направляющую в положении 50% и добавить ограничения снизу и сверху (8dp) для edittext и 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>

Layout Editor

78  
2018-09-20 11:24:56

есть более простой способ. Если вы установите ограничения макета следующим образом, и ваш EditText имеет фиксированный размер, он будет центрирован в макете ограничений:

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

левая / правая пара центрирует вид по горизонтали, а верхняя/нижняя пара центрирует его по вертикали. Это связано с тем, что когда вы устанавливаете левые,правые или верхние, нижние ограничения больше, чем само представление, представление центрируется между двумя ограничениями, т. е. смещение устанавливается на 50%. Вы также можете перемещать вид вверх / вниз или вправо / влево, установив смещение себя. Играть с ним немного, и вы увидите, как это влияет на мнения, позиции.

170  
2017-07-26 01:10:09

решение с директивой работает только для этого конкретного случая с однострочным 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>

вот как это выглядит:

View on Nexus 5

вы можете прочитать больше об использовании цепочек в следующих сообщениях:

25  
2017-10-11 18:49:06

вы можете использовать layout_constraintCircle для центрального вида внутри ConstraintLayout.

<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 для родительского и нулевого радиуса вы можете сделать свой вид центром родительского.

0  
2018-09-05 18:22:32

Comments

    Ничего не найдено.
Click here to cancel reply.