203

Я використовую 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

— N Шарма
джерело

144

Оновлення:

Ланцюжок

Тепер ви можете використовувати цю 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>

— Піппік
джерело

1

Дякую @Pycpik, я не міг зрозуміти, в чому користь <android.support.constraint.Guideline? Чи потрібно нам використовувати щоразу, коли ми користуємось ConstraintLayout?

— N Sharma

В чому користь layout_constraintGuide_percent?

— N Sharma

1

Guidelineце лише невидимий предмет, на якому ви можете закріпити свої погляди. layout_constraintGuide_percent- відсоток у батьків. Тут 0,5 - 50% висоти

— Pycpik

Дякую. Готча. У мене зараз два TextInputEditTextі один Button. Я хочу розмістити їх у центрі екрана. Але на даний момент це не pastebin.com/iXYtuXHg ось скриншот dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

— N Sharma

1

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

— Pycpik

331

Існує простіший спосіб. Якщо ви встановите обмеження для макета наступним чином і ваш 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

Простий, зрозумілий.

— Йохан AI

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

20

Ви можете централізувати перегляд у відсотках від розміру екрана.

У цьому прикладі використовується 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. Не забудьте додати його до залежностей у градусі та збільшити версію, якщо там є нова версія:

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"

і ви можете натиснути правою кнопкою миші в режимі дизайну та вибрати центр.

— беград
джерело

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

— Енахі
джерело

best.solution.ever. Так само, як "app: layout_constraintCenter_in =" parent "" (якого не існує)

— Bénédicte Lagouge

Як центрувати елементи в ConstraintLayout

Оновлення: