Membangun UI yang responsif dengan ConstraintLayout Bagian dari Android Jetpack.

Gambar 1. Editor menunjukkan tampilan C di bawah A, tetapi tidak memiliki batasan vertikal.

Gambar 2. Tampilan C kini dibatasi secara vertikal di bawah tampilan A.

Meskipun tidak ada batasan yang menyebabkan error kompilasi, Layout Editor menunjukkan batasan yang tidak ada sebagai error dalam toolbar. Untuk melihat error dan peringatan lainnya, klik Tampilkan Peringatan dan Error . Untuk membantu Anda agar tidak kehilangan batasan, {i>Layout Editor<i} secara otomatis menambahkan kendala untuk Anda dengan Menghubungkan otomatis dan menyimpulkan batasan baru.

Menambahkan ConstraintLayout ke project Anda

Untuk menggunakan ConstraintLayout di project Anda, lakukan langkah berikut:

1. Pastikan Anda telah mendeklarasikan repositori maven.google.com dalam file settings.gradle Anda:

   Groovy

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Menambahkan library sebagai dependensi di level modul build.gradle, seperti yang ditunjukkan dalam contoh berikut. Terbaru mungkin berbeda dari yang ditunjukkan dalam contoh.

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
   }
   

3. Di notifikasi sinkronisasi atau toolbar, klik Sync Project with Gradle File.

Sekarang Anda sudah siap untuk membuat tata letak menggunakan ConstraintLayout.

Mengonversi tata letak

Gambar 3. Menu untuk mengonversi tata letak menjadi ConstraintLayout.

Untuk mengonversi tata letak yang ada menjadi tata letak terbatas, ikuti langkah-langkah berikut ini:

1. Buka tata letak Anda di Android Studio dan klik tab Design di di bagian bawah jendela editor.
2. Di jendela Component Tree, klik kanan tata letak dan klik Mengonversi LinearLayout ke ConstraintLayout.

Membuat tata letak baru

Untuk memulai file tata letak terbatas yang baru, ikuti langkah-langkah berikut ini:

1. Di jendela Project, klik folder modul, lalu pilih File > Baru > XML > XML tata letak.
2. Masukkan nama untuk file tata letak dan masukkan "androidx.constraintlayout.widget.ConstraintLayout" untuk instance Root Beri tag.
3. Klik Finish.

Menambahkan atau menghapus batasan

Untuk menambahkan batasan, lakukan langkah-langkah berikut:

1. Tarik tampilan dari jendela Palette ke editor.

   Saat Anda menambahkan tampilan di ConstraintLayout, tampilan akan ditampilkan di kotak pembatas dengan tuas pengubah ukuran persegi di setiap sudut dan berbentuk lingkaran {i>handler<i} pembatas di setiap sisi.

2. Klik tampilan untuk memilihnya.
3. Lakukan salah satu hal berikut:
   • Klik tuas pembatas kemudian tarik ke titik link yang tersedia. Titik ini bisa menjadi tepi tampilan lain, tepi tata letak, atau pedoman kami. Perhatikan bahwa saat Anda menyeret {i>handle<i} pembatas, Layout Editor menampilkan potensi anchor koneksi dan overlay biru.

   • Klik salah satu opsi Create a connection di bagian Layout jendela Attributes, seperti yang ditunjukkan pada gambar 4.

     

     Gambar 4. Tata Letak bagian jendela Attributes memungkinkan Anda membuat koneksi jarak jauh.

Saat batasan dibuat, editor akan memberikannya margin default untuk memisahkan dua tampilan.

Saat membuat batasan, ingat aturan berikut:

• Setiap tampilan harus memiliki minimal dua batasan: satu horizontal dan satu lagi vertikal.
• Anda hanya dapat membuat batasan antara tuas batasan dan anchor titik yang berbagi bidang yang sama. Bidang vertikal—kiri dan kanan sisi—tampilan hanya dapat dibatasi ke bidang vertikal lain, dan dasar pengukuran dapat membatasi hanya pada dasar pengukuran lainnya.
• Setiap handle batasan dapat digunakan hanya untuk satu batasan, tetapi Anda juga dapat membuat beberapa batasan dari tampilan yang berbeda ke titik link yang sama.

Anda dapat menghapus batasan dengan melakukan salah satu langkah berikut:

• Klik batasan untuk memilihnya, lalu klik Delete.

• Control-klik (Command-klik di macOS) a anchor batasan. Batasan berubah menjadi merah untuk menunjukkan bahwa Anda dapat mengklik untuk menghapusnya, seperti yang ditunjukkan pada gambar 5.

  

  Gambar 5. Batasan berwarna merah menunjukkan yang dapat Anda klik untuk menghapusnya.

• Di bagian Layout jendela Attributes, klik anchor pembatas, seperti yang ditunjukkan pada gambar 6.

  

  Gambar 6. Klik batasan anchor untuk menghapusnya.

Jika Anda menambahkan batasan yang berlawanan pada tampilan, garis batasan akan menjadi berliku-liku seperti pegas untuk menunjukkan gaya yang berlawanan, seperti yang ditunjukkan pada video 2. Tujuan terlihat paling jelas saat ukuran tampilan disetel ke "tetap" atau "{i>wrap content<i}", dalam hal ini tampilan dipusatkan di antara batasan. Jika Anda justru ingin tampilan untuk meregangkan ukurannya agar sesuai dengan batasan, ganti ukuran ke "match constraints". Jika Anda ingin mempertahankan ukuran saat ini tetapi memindahkan tampilan sehingga tidak berada di tengah, menyesuaikan bias batasan.

Anda bisa menggunakan batasan untuk mencapai berbagai jenis perilaku tata letak, seperti yang dijelaskan di bagian berikut.

Posisi induk

Batasi sisi tampilan ke tepi tata letak yang sesuai.

Pada gambar 7, sisi kiri tampilan terhubung dengan tepi kiri tata letak induk. Anda dapat menentukan jarak dari tepi dengan margin.

Gambar 7. Batasan horizontal untuk orang tua.

Urutan posisi

Menentukan urutan penampilan untuk dua tampilan, baik secara vertikal atau secara horizontal.

Di gambar 8, B terkendala untuk selalu berada di sebelah kanan A, dan C adalah dibatasi di bawah A. Namun, batasan ini tidak menyiratkan penyelarasan, sehingga B dapat masih bergerak ke atas dan ke bawah.

Gambar 8. Horizontal dan vertikal batasan data.

Perataan

Ratakan tepi tampilan dengan tepi yang sama dari tampilan lain.

Di gambar 9, sisi kiri B diratakan dengan sisi kiri A. Jika Anda ingin untuk meratakan pusat tampilan, buat batasan di kedua sisi.

Anda dapat melakukan offset pada perataan dengan menarik tampilan ke dalam dari batasan. Misalnya, gambar 10 menunjukkan B dengan perataan offset 24dp. Offset adalah yang ditentukan oleh margin tampilan yang dibatasi.

Anda juga dapat memilih semua tampilan yang ingin diratakan, lalu klik Ratakan di toolbar untuk memilih jenis perataan.

Gambar 9. Perataan horizontal batasan data.

Gambar 10. Offset horizontal batasan perataan.

Perataan baseline

Ratakan baseline teks tampilan ke baseline teks tampilan lain.

Di gambar 11, garis pertama B diratakan dengan teks di A.

Untuk membuat batasan {i>baseline<i}, klik kanan tampilan teks yang ingin Anda membatasi, lalu klik Show Baseline. Kemudian klik teks {i>baseline<i} dan menyeret garis itu ke {i>baseline<i} lainnya.

Gambar 11. Perataan dasar pengukuran batasan data.

Dibatasi oleh panduan

Anda dapat menambahkan panduan vertikal atau horizontal yang memungkinkan Anda membatasi dilihat dan tidak terlihat oleh pengguna aplikasi Anda. Anda dapat menempatkan pedoman dalam tata letak berdasarkan satuan dp atau persentase yang sesuai dengan tepi tata letak.

Untuk membuat pedoman, klik Panduan di toolbar, lalu klik Tambahkan Pedoman Vertikal atau Tambahkan Pedoman Horizontal.

Seret garis putus-putus untuk mengubah posisinya, lalu klik lingkaran di tepi panduan untuk mengaktifkan/menonaktifkan mode pengukuran.

Gambar 12. Tampilan yang dibatasi dengan pedoman kami.

Dibatasi oleh barrier

Mirip dengan pedoman, pembatas adalah garis tak terlihat yang dapat dibatasi tampilan, kecuali barrier tidak mendefinisikan posisinya sendiri. Sebaliknya, penghalang posisi bergerak berdasarkan posisi tampilan yang ada di dalamnya. Ini adalah berguna saat Anda ingin membatasi tampilan ke kumpulan tampilan, bukan satu tampilan spesifik.

Misalnya, dalam gambar 13, tampilan C dibatasi ke sisi kanan hambatan. Pembatas ditetapkan ke "akhir" (atau sisi kanan, dari kiri-ke-kanan ) tampilan A dan tampilan B. Pembatas bergerak tergantung pada apakah sisi kanan tampilan A atau tampilan B adalah yang paling kanan.

Untuk membuat barrier, ikuti langkah-langkah berikut:

1. Klik Panduan di toolbar, lalu klik Add Vertical Barrier atau Tambahkan Pembatas Horizontal.
2. Di jendela Component Tree, pilih tampilan yang Anda inginkan di dalam dan menyeretnya ke komponen penghalang.
3. Pilih pembatas dari Component Tree, buka Atribut jendela, lalu tetapkan barrierDirection.

Sekarang Anda dapat membuat batasan dari tampilan lain ke barrier.

Anda juga bisa membatasi tampilan yang di dalam pembatas hambatan. Dengan cara ini, Anda bisa menyelaraskan semua tampilan di pembatas satu sama lain, bahkan jika Anda tidak tahu tampilan mana yang terpanjang atau tertinggi.

Anda juga dapat menyertakan pedoman di dalam pembatas untuk memastikan untuk penghalang.

Gambar 13. Tampilan C dibatasi oleh pembatas, yang bergerak berdasarkan posisi dan ukuran tampilan A dan tampilan B.

Menyesuaikan bias batasan

Saat Anda menambahkan pembatas ke kedua sisi tampilan, dan ukuran tampilan untuk dimensi yang sama adalah "tetap" atau "menggabungkan konten", tampilan menjadi di tengah antara dua batasan dengan bias 50% secara {i>default<i}. Anda dapat menyesuaikan bias dengan menarik penggeser bias di jendela Attributes atau dengan menarik tampilan, seperti yang ditunjukkan dalam video 3.

Jika Anda ingin tampilan meregangkan ukurannya untuk memenuhi batasan, ganti ukuran ke "match constraints".

Menyesuaikan ukuran tampilan

Gambar 14. Saat memilih tampilan, Jendela Attributes menyertakan kontrol untuk 1 rasio ukuran, 2 menghapus batasan, 3 mode tinggi atau lebar, 4 margin, dan 5 bias batasan. Anda juga dapat menyoroti batasan individual di Layout Editor dengan mengkliknya di 6.

Anda bisa menggunakan tuas sudut untuk mengubah ukuran tampilan, tetapi ini akan melakukan hardcode pada —ukuran layar tidak diubah untuk ukuran layar atau konten yang berbeda. Kepada pilih mode ukuran yang berbeda, klik tampilan, lalu buka Attributes di sisi kanan editor.

Pemeriksa tampilan berada di dekat bagian atas jendela Attributes, yang menyertakan kontrol untuk beberapa atribut tata letak, seperti yang ditampilkan dalam gambar 14. Ini adalah hanya tersedia untuk tampilan dalam tata letak batasan.

Anda dapat mengubah cara penghitungan tinggi dan lebar dengan mengklik simbol yang ditunjukkan dengan keterangan 3 pada gambar 14. Simbol ini mewakili mode ukuran sebagai berikut. Klik simbol untuk beralih di antara setelan ini:

• Tetap: tentukan dimensi tertentu di kotak teks berikut atau menurut mengubah ukuran tampilan di editor.
• Gabungkan Konten: tampilan hanya diperluas seperlunya agar sesuai dengan konten.
• layout_RestrictedWidth

Tetapkan parameter ini ke true agar dimensi horizontal berubah menjadi menghormati batasan. Secara default, widget yang disetel ke WRAP_CONTENT tidak dibatasi oleh batasan.

• Match Constraints: tampilan akan diperluas selebar mungkin untuk memenuhi batasan di setiap sisi, setelah memperhitungkan margin tampilan. Namun, Anda dapat mengubah perilaku tersebut dengan atribut dan nilai berikut. Ini hanya diterapkan jika Anda menyetel lebar tampilan ke "match constraints":
  • layout_constraintWidth_min

    Ini memerlukan dimensi dp untuk lebar minimum tampilan.

  • layout_constraintWidth_max

    Ini memerlukan dimensi dp untuk lebar maksimum tampilan.

  Namun, jika dimensi yang diberikan hanya memiliki satu batasan, tampilan ini akan akan meluas agar sesuai dengan kontennya. Menggunakan mode ini pada tinggi atau lebar juga memungkinkan Anda menetapkan rasio ukuran.

Menyetel ukuran sebagai rasio

Gambar 15. Tampilan diatur ke aspek 16:9 dengan lebar berdasarkan rasio tinggi.

Anda dapat menyetel ukuran tampilan ke rasio, seperti 16:9, jika minimal salah satu dimensi tampilan ditetapkan ke "match constraints" (0dp). Untuk mengaktifkan klik Aktifkan Batasan Rasio Aspek (info 1 pada gambar 14) lalu masukkan Rasio width:height di input yang muncul.

Jika lebar dan tinggi disetel ke "{i>match constraints<i}", Anda dapat mengklik Aktifkan/Nonaktifkan Batasan Rasio Aspek untuk memilih dimensi yang didasarkan pada rasio aspek yang lain. Pemeriksa tampilan menunjukkan dimensi mana yang ditetapkan sebagai rasio aspek dengan menghubungkan tepi-tepi yang sesuai dengan garis utuh.

Misalnya, jika Anda menetapkan kedua sisi ke "match constraints", klik Aktifkan/nonaktifkan Batasan Rasio Aspek dua kali untuk menyetel lebar agar menjadi rasio tinggi. Seluruh ukuran ditentukan oleh tinggi tampilan, yang dapat didefinisikan dalam dengan cara apa pun, seperti yang ditunjukkan pada gambar 15.

Menyesuaikan margin tampilan

Untuk menempatkan penayangan yang merata, klik Margin di toolbar untuk memilih margin default bagi setiap tampilan yang Anda tambahkan ke tata letak. Setiap perubahan yang Anda buat pada margin {i>default<i} hanya berlaku untuk tampilan yang Anda tambahkan sejak saat itu.

Anda dapat mengontrol margin untuk setiap tampilan di jendela Attributes dengan mengeklik angka pada garis yang mewakili setiap batasan. Pada Gambar 14, info 4 menunjukkan margin bawah ditetapkan ke 16dp.

Gambar 16. Margin toolbar tombol.

Semua margin yang ditawarkan oleh alat ini adalah faktor 8 dp untuk membantu agar tampilan Anda selaras ke rekomendasi petak persegi 8dp Desain Material.

Mengontrol grup linear dengan rantai

Gambar 17. Rantai horizontal dengan dua tampilan.

Rantai adalah kumpulan tampilan yang ditautkan satu sama lain dengan dua arah kendala posisi. Tampilan dalam rantai dapat didistribusikan baik secara vertikal atau horizontal.

Gambar 18. Contoh setiap rantai gaya.

Rantai dapat diberi gaya dengan salah satu cara berikut:

1. Penyebaran: tampilan didistribusikan secara merata setelah margin diperhitungkan. Ini adalah defaultnya.
2. Sebar di dalam: penayangan pertama dan terakhir ditempelkan pada batasan di setiap ujung rantai, dan sisanya terdistribusi.
3. Berbobot: saat rantai ditetapkan ke spread atau sebar ke dalam, Anda dapat mengisi ruang yang tersisa dengan menyetel satu atau beberapa tampilan menjadi "mencocokkan batasan" (0dp). Secara {i>default<i}, ruang ditempatkan didistribusikan secara merata di antara setiap tampilan yang ditetapkan ke "{i>match constraints<i}", tapi Anda dapat menetapkan bobot kepentingan untuk setiap tampilan menggunakan layout_constraintHorizontal_weight dan layout_constraintVertical_weight. Ini berfungsi dengan cara yang sama seperti layout_weight dalam tata letak linear: tampilan dengan nilai bobot tertinggi mendapatkan ruang paling banyak, dan tampilan yang memiliki bobot yang sama mendapatkan jumlah ruang yang sama.
4. Packed: tampilan dikemas setelah margin dihitung untuk mereka. Anda dapat menyesuaikan bias seluruh rantai—kiri atau kanan, atau atas atau ke bawah—dengan mengubah "kepala" rantai bias pandang.

"Kepala" rantai tampilan—tampilan paling kiri dalam rantai horizontal (dalam tata letak kiri-ke-kanan) dan tampilan teratas dalam rantai vertikal—menentukan gaya rantai dalam XML. Namun, Anda dapat beralih antara spread, spread Inside, dan packed (dikemas) dengan memilih tampilan mana pun di rantai dan mengklik tombol rantai yang muncul di bawah tampilan.

Untuk membuat rantai, lakukan hal berikut, seperti ditunjukkan dalam video 4:

1. Pilih semua tampilan untuk disertakan dalam rantai.
2. Klik kanan salah satu tampilan.
3. Pilih Jaringan Bisnis.
4. Pilih Tengah Horizontal atau Tengah Vertikal.

Berikut beberapa hal yang perlu dipertimbangkan saat menggunakan rantai:

• Tampilan dapat menjadi bagian dari rantai horizontal dan vertikal, sehingga Anda bisa membangun tata letak petak yang fleksibel.
• Rantai hanya berfungsi dengan baik jika setiap ujung rantai dibatasi oleh objek lain pada sumbu yang sama, seperti yang ditunjukkan pada gambar 14.
• Meskipun orientasi rantai vertikal atau horizontal, menggunakan satu tidak menyejajarkan tampilan ke arah itu. Untuk mencapai posisi yang tepat bagi setiap tampilan dalam rantai, termasuk batasan lain, seperti batasan perataan.

Membuat batasan secara otomatis

Alih-alih menambahkan batasan ke setiap tampilan saat Anda menempatkannya dalam tata letak, Anda bisa memindahkan setiap tampilan ke posisi yang Anda inginkan di Layout Editor dan lalu klik Infer Constraints untuk membuat batasan secara otomatis.

Infer Constraints memindai tata letak untuk menentukan kumpulan yang paling efektif yang sama untuk semua tampilan. Membatasi tampilan ke posisinya saat ini sekaligus memberikan fleksibilitas. Anda mungkin perlu melakukan penyesuaian merespons sesuai keinginan Anda untuk berbagai ukuran dan orientasi layar.

Otomatis terhubung ke Orang Tua adalah fitur terpisah yang dapat Anda aktifkan. Kapan fungsi ini diaktifkan dan Anda menambahkan tampilan turunan ke induk, fitur ini secara otomatis membuat dua atau lebih batasan untuk setiap tampilan saat Anda menambahkannya ke namun hanya jika diperlukan untuk membatasi tampilan ke induk tata letak. Autoconnect tidak membuat batasan untuk tampilan lain dalam tata letak.

Autoconnect dinonaktifkan secara default. Aktifkan dengan mengklik Aktifkan Koneksi otomatis ke Orang Tua di toolbar Layout Editor.

Animasi bingkai utama

Dalam ConstraintLayout, Anda dapat menganimasikan perubahan ukuran dan posisi elemen dengan menggunakan ConstraintSet dan TransitionManager.

ConstraintSet adalah objek ringan yang merepresentasikan batasan, margin, dan padding dari semua elemen turunan dalam ConstraintLayout. Saat Anda menerapkan ConstraintSet ke ditampilkan ConstraintLayout, tata letak akan memperbarui batasan semua turunannya.

Untuk membuat animasi menggunakan ConstraintSet, tentukan dua tata letak file yang bertindak sebagai awal dan akhir keyframe untuk animasi. Anda kemudian dapat memuat ConstraintSet dari file keyframe kedua dan menerapkannya ke ditampilkan ConstraintLayout.

Contoh kode berikut menunjukkan cara menganimasikan pemindahan satu tombol ke di bagian bawah layar.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Referensi lainnya

ConstraintLayout digunakan di Bunga Matahari aplikasi demo.