203

Używam ConstraintLayoutw mojej aplikacji do tworzenia układu aplikacji. Próbuję a Utwórz ekran wheren jedna EditTexti Buttonpowinna być w centrum, a Buttonpowinna być niższa od EditTextz marginTop tylko 16dp.

Oto mój układ i zrzut ekranu, jak teraz wygląda.

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 Sharma
źródło

144

Aktualizacja:

Łańcuch

Możesz teraz używać tej chainfunkcji w packedtrybie, jak opisano w odpowiedzi Eugene'a.

Wytyczna

Możesz użyć linii poziomej na pozycji 50% i dodać ograniczenia dolne i górne (8dp) do tekstu edycyjnego i przycisku:

<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
źródło

1

Dzięki @Pycpik Nie mogłem zrozumieć, do czego służy <android.support.constraint.Guideline? Czy musimy korzystać za każdym razem, gdy korzystamy ConstraintLayout?

— N Sharma

Jakie jest zastosowanie layout_constraintGuide_percent?

— N Sharma

1

Guidelinejest tylko niewidzialnym przedmiotem, na którym możesz zakotwiczyć swoje poglądy. layout_constraintGuide_percentjest procentem w rodzicu. Tutaj 0,5 to 50% wysokości

— Pycpik

Dzięki. Gotcha Mam teraz dwa TextInputEditTexti jeden Button. Chcę umieścić je na środku ekranu. Ale na razie nie jest to pastebin.com/iXYtuXHg oto zrzut ekranu dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

— N Sharma

1

Możesz wyśrodkować środkowy i dodać jeden powyżej i jeden poniżej lub umieścić je w LinearLayoutśrodku i wyśrodkować.

— Pycpik

331

Jest prostszy sposób. Jeśli ustawisz ograniczenia układu w następujący sposób, a tekst EditText ma stały rozmiar, zostanie wyśrodkowany w układzie ograniczenia:

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

Para lewa / prawa centruje widok w poziomie, a para góra / dół centruje go w pionie. Dzieje się tak, ponieważ gdy ustawisz lewe, prawe lub górne, dolne ograniczenia większe niż sam widok, widok zostanie wyśrodkowany między dwoma ograniczeniami, tzn. Odchylenie zostanie ustawione na 50%. Możesz także przesuwać widok w górę / w dół lub w prawo / w lewo, ustawiając własne nastawienie. Zagraj z nim trochę, a zobaczysz, jak to wpływa na pozycję widoków.

— binW
źródło

5

Jest to znacznie lepsze podejście niż stosowanie wytycznych.

— ss i

48

app:layout_constraintCenter_in="parent"byłoby znacznie lepiej. Ale jak zawsze Google tego nie zapewnił.

— Gojir4

1

Jest to bardziej odpowiednie i widziałem to w wielu rozmowach i przykładach urzędników.

— TapanHP

Prosty, łatwy do zrozumienia.

— Yohanes AI,

2

Wytyczne są lepsze, ponieważ gdy masz skomplikowany układ, co nastąpi, gdy marketing go przejmie, uproszczone centrowanie przestanie działać. Lepiej mieć wytyczne i wyśrodkować wytyczne na górze i na dole

— Nick Turner

58

Rozwiązanie z wytyczną działa tylko w tym konkretnym przypadku z jednowierszowym tekstem EditText. Aby działało w edytorze wielowierszowym, należy użyć łańcucha „spakowanego”.

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

Oto jak to wygląda:

Możesz przeczytać więcej o korzystaniu z łańcuchów w następujących postach:

— Eugene Brusov
źródło

To z pewnością najlepsza odpowiedź. Inne odpowiedzi działają tylko dla jednego lub dwóch widoków. Ten jest bardziej skalowalny, ponieważ działa na jeden, dwa i tyle widoków, ile chcesz.

— mdelolmo,

20

Możesz wyśrodkować widok jako procent wielkości ekranu.

W tym przykładzie użyto 50% szerokości i wysokości:

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

Dokonano tego przy użyciu ConstraintLayout w wersji 1.1.3. Nie zapomnij dodać go do swoich zależności w stopniu i zwiększyć wersję, jeśli jest tam nowa wersja:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

— żywa miłość
źródło

12

dodaj te tagi do swojego widoku

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

i możesz kliknąć prawym przyciskiem myszy w trybie projektowania i wybrać środek.

— behrad
źródło

8

możesz użyć layout_constraintCircle dla widoku środkowego wewnątrz 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>

z ograniczeniem Okrążenie do rodzica i zerowym promieniem możesz ustawić widok jako środek rodzica.

— Enakhi
źródło

best.solution.ever. Podobnie jak „app: layout_constraintCenter_in =„ parent ”” (który nie istnieje)

— Bénédicte Lagouge

Jak wyśrodkować elementy w ConstraintLayout

Aktualizacja: