205

Я использую 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>

android android-layout android-constraintlayout Н Шарма
источник

145

Обновить:

цепь

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

директива

Вы можете использовать горизонтальную направляющую в позиции 50% и добавить нижние и верхние (8dp) ограничения для редактирования текста и кнопки:

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

Pycpik
источник

1

Спасибо @Pycpik Я не мог понять, в чем польза <android.support.constraint.Guideline? Нужно ли использовать каждый раз, когда мы используем ConstraintLayout?

N Шарма

Какая польза от layout_constraintGuide_percent?

N Шарма

1

Guidelineэто просто невидимый элемент, на котором вы можете закрепить свои взгляды. layout_constraintGuide_percentэто процент в родительском. Здесь 0,5 составляет 50% высоты

Пикпик

Спасибо. Попался. У меня сейчас два TextInputEditTextи один Button. Я хочу разместить их в центре экрана. Но на данный момент это не pastebin.com/iXYtuXHg вот скриншот dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

N Sharma

1

Вы можете отцентрировать средний и добавить один сверху и один снизу или поместить их в LinearLayoutи центрировать его.

Пикпик

332

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

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

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

binW
источник

5

Это гораздо лучший подход, чем использование рекомендаций.

ssand

48

app:layout_constraintCenter_in="parent"было бы намного лучше. Но, как всегда, Google не предоставил это.

Gojir4

1

Это более уместно, и я также видел это во многих беседах и примерах чиновников.

TapanHP

Просто, легко понять.

Йоханес А.И.

2

Рекомендации лучше, потому что, если у вас есть сложный макет, который произойдет, когда маркетинг овладеет им, упрощенное центрирование больше не работает. Лучше иметь руководящие принципы и

Ник Тернер

58

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

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

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

Евгений Брусов
источник

Это, безусловно, лучший ответ. Другие ответы работают только для одного или двух просмотров. Этот вариант более масштабируемый, поскольку он работает для одного, двух и любого количества просмотров.

mdelolmo

21

Вы можете центрировать вид в процентах от размера экрана.

Этот пример использует 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'
}

живи любя
источник

12

добавить эти теги в вашем представлении

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

и вы можете щелкнуть правой кнопкой мыши в режиме дизайна и выбрать центр.

behrad
источник

8

Вы можете использовать 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 to parent и нулевого радиуса вы можете сделать свое представление центром родительского элемента.

Enakhi
источник

best.solution.ever. Прямо как "app: layout_constraintCenter_in =" parent "" (которого не существует)

Bénédicte Lagouge

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

Ответы:

Обновить: