Merata jarak tampilan menggunakan ConstraintLayout


Jawaban:


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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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:

masukkan deskripsi gambar di sini

Ini lebih terlihat dalam tampilan lanskap:

masukkan deskripsi gambar di sini

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:

masukkan deskripsi gambar di sini

Kemudian pilih "Tambahkan Pedoman Vertikal": masukkan deskripsi gambar di sini

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

pedoman relatif editor tata letak

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

pedoman tata letak editor persen

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

tata letak akhir

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

batasan ukuran

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

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


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>

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"

masukkan deskripsi gambar di sini


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

masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.