205

Saya menggunakan ConstraintLayoutaplikasi saya untuk membuat tata letak aplikasi. Saya mencoba untuk membuat layar ketika satu EditTextdan Buttonharus di tengah dan Buttonharus di bawah EditTextdengan marginTop hanya 16dp.

Inilah tata letak dan tangkapan layar saya seperti apa tampilannya sekarang.

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
sumber

145

Memperbarui:

Rantai

Anda sekarang dapat menggunakan chainfitur dalam packedmode seperti yang dijelaskan dalam jawaban Eugene.

Pedoman

Anda dapat menggunakan pedoman horizontal pada posisi 50% dan menambahkan batasan bawah dan atas (8dp) ke edittext dan tombol:

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

1

Terima kasih @Pycpik saya tidak mengerti apa gunanya <android.support.constraint.Guideline? Apakah kita perlu menggunakan setiap saat ketika kita menggunakan ConstraintLayout?

N Sharma

Apa gunanya layout_constraintGuide_percent?

N Sharma

1

Guidelinehanyalah item yang tidak terlihat yang dapat Anda jangkar pandangan Anda. layout_constraintGuide_percentadalah persentase pada induknya. Di sini 0,5 adalah 50% tinggi

Pycpik

Terima kasih. Kena kau. Sekarang saya punya dua TextInputEditTextdan satu Button. Saya ingin menempatkan mereka di tengah layar. Tetapi sampai sekarang ini bukan pastebin.com/iXYtuXHg di sini adalah screenshot dropbox.com/s/k7997q2buvw76cp/q.png?dl=0

N Sharma

1

Anda dapat memusatkan yang di tengah dan menambahkan yang di atas dan di bawah atau menempatkannya di dalam LinearLayoutdan di tengah.

Pycpik

332

Ada cara yang lebih sederhana. Jika Anda menetapkan batasan tata letak sebagai berikut dan EditText Anda berukuran tetap, maka akan terpusat pada tata letak kendala:

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

Pasangan kiri / kanan memusatkan tampilan secara horizontal dan pasangan atas / bawah memusatkan pandangan secara vertikal. Ini karena ketika Anda mengatur kendala kiri, kanan atau atas, lebih besar dari tampilan itu sendiri, tampilan akan terpusat di antara dua kendala yaitu bias ditetapkan ke 50%. Anda juga dapat menggerakkan tampilan atas / bawah atau kanan / kiri dengan mengatur bias diri Anda. Mainkan sedikit dan Anda akan melihat bagaimana hal itu mempengaruhi posisi pandangan.

binW
sumber

5

Ini adalah pendekatan yang jauh lebih baik daripada menggunakan pedoman.

Pasir

48

app:layout_constraintCenter_in="parent"akan jauh lebih baik. Tapi seperti biasa Google tidak menyediakannya.

Gojir4

1

Ini lebih tepat dan saya juga telah melihatnya dalam banyak pembicaraan dan contoh dari para pejabat.

TapanHP

Sederhana, mudah dimengerti.

Yohanes AI

2

Pedoman lebih baik karena begitu Anda memiliki tata letak yang rumit, yang akan terjadi begitu pemasaran berhasil, maka pemusatan secara simplistik tidak lagi berfungsi. Lebih baik memiliki pedoman dan pusat pedoman untuk atas dan bawah

Nick Turner

58

Solusi dengan pedoman hanya berfungsi untuk kasus khusus ini dengan EditText baris tunggal. Untuk membuatnya bekerja untuk EditText multiline Anda harus menggunakan rantai "dikemas".

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

Begini tampilannya:

Anda dapat membaca lebih lanjut tentang menggunakan rantai di posting berikut:

Eugene Brusov
sumber

Ini tentu jawaban terbaik. Jawaban lain hanya berfungsi untuk satu atau dua tampilan. Yang ini lebih scalable, karena ini berfungsi untuk satu, dua, dan sebanyak yang Anda inginkan.

mdelolmo

21

Anda dapat memusatkan tampilan sebagai persentase dari ukuran layar.

Contoh ini menggunakan 50% lebar dan tinggi:

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

Ini dilakukan menggunakan ConstraintLayout versi 1.1.3. Jangan lupa untuk menambahkannya ke dependensi Anda di gradle, dan tingkatkan versinya jika ada versi baru di sana:

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

cinta hidup
sumber

12

tambahkan tag ini di tampilan Anda

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

dan Anda dapat mengklik kanan dalam mode desain dan memilih pusat.

Behrad
sumber

8

Anda dapat menggunakan layout_constraintCircle untuk tampilan tengah di dalam 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>

dengan constraintCircle ke induk dan jari-jari nol Anda dapat membuat tampilan Anda menjadi pusat induk.

Enakhi
sumber

best.solution.ever. Sama seperti "app: layout_constraintCenter_in =" parent "" (yang tidak ada)

Bénédicte Lagouge

Cara memusatkan elemen di ConstraintLayout

Jawaban:

Memperbarui: