Merata jarak tampilan menggunakan ConstraintLayout

174

Penggunaan umum untuk LinearLayoutadalah untuk meratakan tampilan (berat) secara merata, misalnya:

Bagaimana Anda menerapkan tampilan spasi secara merata seperti ini menggunakan yang baru ConstraintLayout?

ConstraintLayouttautan untuk referensi: posting blog , video sesi I / O

android android-layout android-constraintlayout AdamK
sumber

323

Ada dua cara untuk mencapai ini dengan menggunakan ConstraintLayout: Rantai dan Pedoman . Untuk menggunakan Chains, pastikan Anda menggunakanConstraintLayout Beta 3 atau lebih baru dan jika Anda ingin menggunakan editor tata letak visual di Android Studio, pastikan Anda menggunakan Android Studio 2.3 Beta 1 atau lebih baru.

Metode 1 - Menggunakan Rantai

Buka editor tata letak dan tambahkan widget Anda seperti biasa, tambahkan batasan induk sesuai kebutuhan. Dalam hal ini, saya telah menambahkan dua tombol dengan batasan di bagian bawah induk dan sisi induk (sisi kiri untuk tombol Simpan dan sisi kanan untuk tombol Bagikan):

Perhatikan bahwa dalam kondisi ini, jika saya beralih ke tampilan lansekap, tampilan tidak mengisi induk tetapi berlabuh ke sudut:

Sorot kedua tampilan, baik dengan mengklik Ctrl / Cmd atau dengan menyeret kotak di sekitar tampilan:

Kemudian klik kanan pada view dan pilih "Center Horizontally":

Ini mengatur koneksi dua arah antara tampilan (yang merupakan cara Chain didefinisikan). Secara default gaya rantai adalah "menyebar", yang diterapkan bahkan ketika tidak ada atribut XML yang disertakan. Tetap menggunakan gaya berantai ini tetapi mengatur lebar tampilan kami untuk 0dpmemungkinkan tampilan memenuhi ruang yang tersedia, menyebar merata di seluruh induk:

Ini lebih terlihat dalam tampilan lanskap:

Jika Anda memilih untuk melewatkan editor tata letak, XML yang dihasilkan akan terlihat seperti:

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

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Detail:

mengatur lebar setiap item ke 0dpatau MATCH_CONSTRAINTmemungkinkan tampilan mengisi induk (opsional)
pandangan harus ditautkan bersama dua arah (sebelah kanan tombol simpan tautan ke tombol berbagi, sebelah kiri tautan tombol berbagi ke tombol simpan), ini akan terjadi secara otomatis melalui editor tata letak ketika memilih "Pusat Secara Horizontal"
pandangan pertama dalam rantai dapat menentukan gaya rantai melalui layout_constraintHorizontal_chainStyle, lihat dokumentasi untuk berbagai gaya rantai, jika gaya rantai dihilangkan, defaultnya adalah "menyebar"
bobot rantai dapat disesuaikan melalui layout_constraintHorizontal_weight
contoh ini untuk rantai horizontal, ada atribut yang sesuai untuk rantai vertikal

Metode 2 - Menggunakan Pedoman

Buka tata letak Anda di editor dan klik tombol pedoman:

Kemudian pilih "Tambahkan Pedoman Vertikal":

Sebuah pedoman baru akan muncul, bahwa secara default, kemungkinan akan berlabuh ke kiri dalam nilai relatif (dilambangkan dengan panah yang menghadap ke kiri):

Klik panah yang menghadap kiri untuk mengubahnya ke nilai persentase, lalu seret pedoman ke tanda 50%:

Pedoman sekarang dapat digunakan sebagai jangkar untuk pandangan lain. Dalam contoh saya, saya melampirkan kanan tombol simpan dan kiri tombol bagikan ke panduan:

Jika Anda ingin tampilan memenuhi ruang yang tersedia maka batasannya harus diatur ke "Ukuran Apa Pun" (garis berlekuk-lekuk yang berjalan horizontal):

(Ini sama dengan mengatur layout_widthuntuk0dp ).

Panduan juga dapat dibuat dalam XML dengan mudah daripada menggunakan editor tata letak:

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

AdamK
sumber

1

Saya tidak dapat menemukan cara bagaimana membuat pedoman dengan batasan. Saya ingin pedoman horizontal berada di tengah dua tampilan. Bayangkan tampilan yang lebih besar dengan tinggi 100dp di atas dan lebih kecil dengan tinggi 50dp di bawah. Saya ingin menempatkan panduan di tengah-tengah ruang di antara mereka.

Headsvk

3

Saya tidak berpikir Anda dapat menambahkan batasan pada pedoman itu sendiri. Anda bisa menambahkan banyak pedoman dan kemudian membatasi pandangan untuk pedoman itu. Anda mungkin ingin memposting pertanyaan baru dengan rincian tentang apa yang ingin Anda capai. Jangan ragu untuk menempelkannya kembali ke sini juga.

AdamK

Terima kasih, tuan. Itu adalah bantuan yang tepat waktu dan efektif.

iSofia

Saya ingin memberikan lebar tampilan yang proporsional. Untuk misalnya saya ingin tombol share memiliki dua kali lebar tombol simpan. Tanpa menggunakan pedoman karena pandangan saya tidak diposisikan bersebelahan seperti dalam contoh ini. apa itu mungkin?

Shubham Naik

Anda harus mengubah nilai yang diberikan oleh pedoman menjadi margin atau paddings aktual. Pedoman hanya berfungsi dalam mode desain.

Abhinav Saxena

49

Untuk membuat 2 tampilan di baris yang sama, lebar yang sama, hanya perlu didefinisikan

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Catatan

width = 0dp ( MATCH_CONSTRAINT)
Batasan button1dan button2harus seperti di atas

Hasil

LEBIH BANYAK
Jika Anda ingin View1lebih besar dari View2yang dapat Anda gunakan weightatau percent.
Contoh, View1lebar = 2 * View2lebar menggunakan bobot

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Hasil

Contoh, View1lebar = 2 * View2lebar menggunakan persen

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Hasil

Phan Van Linh
sumber

23

Baik jika itu membantu seseorang

yang kunci di sini app:layout_constraintHorizontal_weight="1"dan
hal terbaik tentang tata letak kendala adalah bahwa ia mendukung ketergantungan melingkar dan di sini ini adalah apa yang saya lakukan menggunakan hal itu.

Untuk anak pertama
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Untuk anak kedua

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

ini demo lengkapnya

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

rookieDeveloper
sumber

9

Anda harus membaca tentang rantai tertimbang. Contoh kode ada di sini.

<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="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Jadi, tetapkan android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"dan tautkan setiap tampilan dengan tetangga seperti:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

CoolMind
sumber

apa gunanya memposting satu jawaban lagi persis seperti yang lain, diposting dua tahun lalu?

@ Subzero, saya melihat berkali-kali jawaban yang sama dengan tingkat tinggi. Bahkan baris kode pun sama. Saya curiga, beberapa penulis menyalin dari saya dan bahkan mendapat lebih banyak plus. Dalam hal ini jawaban berbeda, saya juga menggunakan sumber lain untuk memahami bagaimana bobot bekerja ConstraintLayout, dan hanya jawaban pertama tidak cukup untuk mendapatkan gambar di atas.

CoolMind

3

Setelah Anda memiliki item yang dirantai, Anda masih dapat menggunakan bobot pada mereka seperti tata letak relatif untuk menjaga mereka tetap berjarak. Contoh di bawah ini menunjukkan cara menjaga jarak mereka secara merata dengan ukuran teks yang berbeda.

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />

tzg
sumber

Merata jarak tampilan menggunakan ConstraintLayout

Jawaban: