Mem-build UI yang responsif dengan ConstraintLayout Bagian dari Android Jetpack.
ConstraintLayout
memungkinkan Anda membuat tata letak yang besar dan kompleks dengan hierarki tampilan datar—tidak ada
grup tampilan bertingkat. Ini mirip dengan
RelativeLayout
yang semua tampilan disusun sesuai dengan hubungan antara tampilan yang setara
dan tata letak induk, tetapi lebih fleksibel daripada RelativeLayout
dan lebih mudah digunakan dengan Layout Editor Android Studio.
Semua kecanggihan ConstraintLayout
tersedia langsung dari
alat visual Layout Editor, karena API tata letak dan Layout Editor
dibuat khusus untuk satu sama lain. Anda dapat membuat tata letak menggunakan
ConstraintLayout
sepenuhnya dengan menarik, bukan mengedit
XML.
Halaman ini menunjukkan cara membuat tata letak dengan ConstraintLayout
di
Android Studio 3.0 atau yang lebih tinggi. Untuk mengetahui informasi selengkapnya tentang Layout Editor,
lihat Membuat UI dengan Layout Editor.
Untuk melihat berbagai tata letak yang dapat Anda buat dengan ConstraintLayout
,
lihat
project Contoh Tata Letak Batasan di GitHub.
Ringkasan terkait batasan
Untuk menentukan posisi tampilan di ConstraintLayout
, tambahkan
setidaknya satu batasan horizontal dan satu batasan vertikal untuk tampilan tersebut. Setiap batasan
mewakili koneksi atau perataan ke tampilan lain, tata letak induk, atau
panduan yang tidak terlihat. Setiap batasan menentukan posisi tampilan di sepanjang
sumbu vertikal atau horizontal. Setiap tampilan harus memiliki minimal satu batasan untuk
setiap sumbu, tetapi sering kali diperlukan lebih banyak.
Saat Anda melepaskan tampilan ke Layout Editor, tampilan tersebut akan tetap berada di tempat Anda berada meskipun tidak memiliki batasan. Tindakan ini hanya untuk memudahkan pengeditan. Jika tidak memiliki batasan saat Anda menjalankan tata letak di perangkat, tampilan akan digambar di posisi [0,0] (sudut kiri atas).
Pada gambar 1, tata letak terlihat bagus di editor, tetapi tidak ada batasan vertikal di tampilan C. Saat tata letak ini digambar pada perangkat, tampilan C akan sejajar secara horizontal dengan tepi kiri dan kanan tampilan A, tetapi muncul di bagian atas layar karena tidak memiliki batasan vertikal.
Meskipun tidak adanya batasan tidak menyebabkan error kompilasi, Layout Editor akan menunjukkan tidak adanya batasan sebagai error di toolbar. Untuk melihat error dan peringatan lainnya, klik Show Alertss and Errors . Agar Anda tidak kehilangan batasan, Layout Editor akan otomatis menambahkan batasan untuk Anda dengan fitur Autoconnect and infer constraints.
Menambahkan ConstraintLayout ke project Anda
Untuk menggunakan ConstraintLayout
di project Anda, lakukan langkah berikut:
- Pastikan Anda memiliki repositori
maven.google.com
yang dideklarasikan dalam filesettings.gradle
:Groovy
dependencyResolutionManagement { ... repositories { google() } )
Kotlin
dependencyResolutionManagement { ... repositories { google() } }
- Tambahkan library sebagai dependensi dalam file
build.gradle
level modul, seperti ditunjukkan dalam contoh berikut. Versi terbaru mungkin berbeda dengan yang ditunjukkan dalam contoh.Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13") }
- Di toolbar atau notifikasi sinkronisasi, klik Sync Project with Gradle Files.
Sekarang Anda sudah siap untuk membuat tata letak menggunakan ConstraintLayout
.
Mengonversi tata letak
Untuk mengonversi tata letak yang ada menjadi tata letak terbatas, ikuti langkah-langkah berikut ini:
- Buka tata letak Anda di Android Studio, lalu klik tab Design di bagian bawah jendela editor.
- Di jendela Component Tree, klik kanan tata letak lalu klik Convert LinearLayout to ConstraintLayout.
Membuat tata letak baru
Untuk memulai file tata letak terbatas yang baru, ikuti langkah-langkah berikut ini:
- Di jendela Project, klik folder modul dan pilih File > New > XML > Layout XML.
- Masukkan nama untuk file tata letak dan masukkan "androidx.constraintlayout.widget.ConstraintLayout" untuk Root Tag.
- Klik Finish.
Menambahkan atau menghapus batasan
Untuk menambahkan batasan, lakukan langkah-langkah berikut:
Tarik tampilan dari jendela Palette ke editor.
Saat Anda menambahkan tampilan di
ConstraintLayout
, tampilan tersebut akan ditampilkan dalam kotak pembatas dengan tuas pengubah ukuran persegi di setiap sudut dan tuas pembatas lingkaran di setiap sisi.- Klik tampilan untuk memilihnya.
- Lakukan salah satu tindakan berikut:
- Klik tuas pembatas kemudian tarik ke titik link yang tersedia. Titik ini dapat menjadi tepi tampilan lain, tepi tata letak, atau panduan. Perhatikan bahwa saat Anda menarik tuas batasan, Layout Editor akan menampilkan anchor koneksi dan overlay biru yang potensial.
Klik salah satu tombol Create a connection di bagian Layout jendela Attributes, seperti yang ditunjukkan dalam gambar 4.
Saat batasan dibuat, editor memberinya margin default untuk memisahkan kedua tampilan tersebut.
Saat membuat batasan, ingat aturan berikut:
- Setiap tampilan harus memiliki setidaknya dua batasan: satu horizontal dan satu vertikal.
- Anda hanya dapat membuat batasan antara tuas batasan dan titik link yang memiliki bidang yang sama. Bidang vertikal—sisi kiri dan kanan—tampilan hanya dapat dibatasi ke bidang vertikal lain, dan dasar pengukuran hanya dapat membatasi dasar pengukuran lainnya.
- Setiap tuas batasan hanya dapat digunakan untuk satu batasan, tetapi Anda 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) anchor batasan. Batasan berubah menjadi merah untuk menunjukkan bahwa Anda dapat mengklik untuk menghapusnya, seperti yang ditunjukkan pada gambar 5.
Di bagian Layout jendela Attributes, klik anchor batasan, seperti ditunjukkan dalam gambar 6.
Jika Anda menambahkan batasan yang berlawanan di tampilan, garis batasan akan dilipat seperti pegas untuk menunjukkan kekuatan yang berlawanan, seperti yang ditunjukkan dalam video 2. Efeknya paling terlihat saat ukuran tampilan disetel ke "fixed" atau "wrap content", yang dalam hal ini tampilan dipusatkan di antara batasan. Jika Anda ingin tampilan meregangkan ukurannya agar memenuhi batasan, ganti ukuran ke "match constraints". Jika Anda ingin mempertahankan ukuran saat ini, tetapi memindahkan tampilan agar tidak berada di tengah, sesuaikan bias batasan.
Anda dapat menggunakan batasan untuk mencapai berbagai jenis perilaku tata letak, seperti yang dijelaskan di bagian berikut.
Posisi induk
Membatasi 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.
Urutan posisi
Menentukan urutan tampilan untuk dua tampilan, baik secara vertikal maupun horizontal.
Dalam Gambar 8, B dibatasi agar selalu berada di sebelah kanan A, dan C dibatasi di bawah A. Namun, batasan ini tidak menyiratkan perataan, sehingga B tetap dapat bergerak ke atas dan ke bawah.
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 menyelaraskan bagian tengah tampilan, buat batasan di kedua sisi.
Anda bisa melakukan offset pada perataan dengan menarik tampilan ke dalam dari batasan. Misalnya, gambar 10 menunjukkan B dengan perataan offset 24 dp. Offset ditentukan oleh margin tampilan yang dibatasi.
Anda juga dapat memilih semua tampilan yang ingin diratakan, lalu klik Align di toolbar untuk memilih jenis 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 dasar pengukuran, klik kanan tampilan teks yang ingin Anda batasi, lalu klik Show Baseline. Kemudian klik dasar pengukuran teks dan tarik garis ke dasar pengukuran yang lain.
Dibatasi oleh panduan
Anda dapat menambahkan panduan vertikal atau horizontal yang memungkinkan Anda membatasi tampilan dan tidak terlihat oleh pengguna aplikasi. Anda dapat memosisikan panduan dalam tata letak berdasarkan satuan dp atau persentase yang sesuai dengan tepi tata letak.
Untuk membuat panduan, klik Guidelines di toolbar, lalu klik Add Vertical Guideline atau Add Horizontal Guideline.
Tarik garis putus-putus untuk mengubah posisinya, dan klik lingkaran di tepi panduan untuk beralih ke mode pengukuran.
Dibatasi oleh barrier
Serupa dengan panduan, penghalang adalah garis tidak terlihat yang dapat digunakan untuk membatasi tampilan, kecuali penghalang tidak menentukan posisinya sendiri. Sebaliknya, posisi penghalang bergerak berdasarkan posisi tampilan yang ada di dalamnya. Hal ini berguna saat Anda ingin membatasi tampilan ke kumpulan tampilan, bukan satu tampilan tertentu.
Misalnya, dalam gambar 13, tampilan C dibatasi ke sisi kanan sebuah penghalang. Batasan ditetapkan ke "end" (atau sisi kanan, dalam tata letak kiri-ke-kanan) untuk tampilan A dan tampilan B. Batasan akan berpindah, bergantung pada apakah sisi kanan tampilan A atau tampilan B adalah yang paling kanan.
Untuk membuat barrier, ikuti langkah-langkah berikut:
- Klik Guidelines di toolbar, lalu klik Add Vertical Barrier atau Add Horizontal Barrier.
- Di jendela Component Tree, pilih tampilan yang ingin Anda lihat di dalam penghalang lalu tarik ke komponen pembatas.
- Pilih pembatas dari Component Tree, buka jendela Attributes , lalu tetapkan barrierDirection.
Sekarang Anda dapat membuat batasan dari tampilan lain ke barrier.
Anda juga dapat membatasi tampilan yang ada di dalam penghalang ke hambatan. Dengan cara ini, Anda dapat menyelaraskan satu sama lain tampilan yang ada di penghalang, meskipun Anda tidak tahu tampilan mana yang terpanjang atau tertinggi.
Anda juga dapat menyertakan panduan di dalam pembatas guna memastikan posisi "minimum" untuk pembatas.
Menyesuaikan bias batasan
Saat Anda menambahkan batasan ke kedua sisi tampilan, dan ukuran tampilan untuk dimensi yang sama adalah "fixed" atau "wrap content", tampilan akan dipusat di antara dua batasan dengan bias 50% secara default. 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 agar memenuhi batasan, ganti ukuran ke "match constraints".
Menyesuaikan ukuran tampilan
Anda dapat menggunakan tuas sudut untuk mengubah ukuran tampilan, tetapi tindakan ini akan melakukan hardcode ukuran—tampilan tidak akan mengubah ukuran untuk konten atau ukuran layar yang berbeda. Untuk memilih mode ukuran yang berbeda, klik tampilan dan buka jendela Attributes di sisi kanan editor.
Di dekat bagian atas jendela Attributes terdapat pemeriksa tampilan, yang menyertakan kontrol untuk beberapa atribut tata letak, seperti ditunjukkan pada gambar 14. Ini hanya tersedia untuk tampilan di tata letak batasan.
Anda dapat mengubah cara penghitungan tinggi dan lebar dengan mengklik simbol yang ditunjukkan dengan keterangan 3 pada gambar 14. Simbol-simbol ini mewakili mode ukuran sebagai berikut. Klik simbol untuk beralih di antara setelan ini:
- Fixed: menentukan dimensi tertentu di kotak teks berikut atau dengan mengubah ukuran tampilan di editor.
- Wrap Content: tampilan hanya diperluas sebanyak yang diperlukan agar pas dengan kontennya.
- layout_restrictedWidth
-
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. Atribut
ini hanya berlaku jika Anda menetapkan 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 ditentukan hanya memiliki satu batasan, tampilan akan diperluas agar pas dengan kontennya. Menggunakan mode ini pada tinggi atau lebar juga memungkinkan Anda menetapkan rasio ukuran.
- layout_constraintWidth_min
Tetapkan string ini ke true
agar dimensi horizontal dapat berubah
untuk mengikuti batasan. Secara default, widget yang ditetapkan ke WRAP_CONTENT
tidak dibatasi oleh batasan.
Menyetel ukuran sebagai rasio
Anda dapat menyetel ukuran tampilan ke rasio, seperti 16:9, jika setidaknya salah satu
dimensi tampilan disetel ke "match constraints" (0dp
). Untuk mengaktifkan
rasio, klik Toggle Aspect Ratio Constraint (info
1 di gambar 14) dan masukkan rasio
width:height dalam input yang muncul.
Jika lebar dan tinggi disetel ke "match constraints", Anda dapat mengklik Toggle Aspect Ratio Constraint untuk memilih dimensi yang berdasarkan rasio dimensi lainnya. Pemeriksa tampilan menunjukkan dimensi mana yang ditetapkan sebagai rasio dengan menghubungkan tepi yang sesuai dengan garis solid.
Misalnya, jika Anda menetapkan kedua sisi ke "match constraints", klik Toggle Aspect Ratio Constraint dua kali untuk menyetel lebar menjadi rasio tinggi. Seluruh ukuran ditentukan oleh tinggi tampilan, yang dapat ditentukan dengan cara apa pun, seperti ditunjukkan pada gambar 15.
Menyesuaikan margin tampilan
Agar tampilan Anda mendapatkan jarak yang sama, klik Margin di toolbar untuk memilih margin default untuk setiap tampilan yang Anda tambahkan ke tata letak. Setiap perubahan yang Anda buat pada margin default hanya berlaku untuk tampilan yang Anda tambahkan sejak saat itu.
Anda dapat mengontrol margin untuk setiap tampilan di jendela Attributes dengan mengklik angka pada baris yang merepresentasikan setiap batasan. Pada Gambar 14, info 4 menunjukkan margin bawah yang ditetapkan ke 16dp.
Semua margin yang ditawarkan oleh alat adalah faktor 8 dp untuk membantu agar tampilan Anda sejajar dengan rekomendasi petak persegi 8 dp Desain Material.
Mengontrol grup linear dengan rantai
Rantai adalah kumpulan tampilan yang ditautkan satu sama lain dengan batasan posisi dua arah. Tampilan dalam rantai dapat didistribusikan baik secara vertikal maupun horizontal.
Rantai dapat diberi gaya dengan salah satu cara berikut:
- Spread: tampilan didistribusikan secara merata setelah margin dihitung. Ini adalah defaultnya.
- Penyebaran di dalam: tampilan pertama dan terakhir dilekatkan ke batasan di setiap ujung rantai, dan sisanya didistribusikan secara merata.
- Berbobot: jika rantai disetel ke spread atau
spread in, Anda dapat mengisi ruang yang tersisa dengan menyetel satu atau beberapa
tampilan ke "match constraints" (
0dp
). Secara default, ruang didistribusikan secara merata di antara setiap tampilan yang ditetapkan ke "match constraints", tetapi Anda dapat menetapkan bobot nilai penting untuk setiap tampilan menggunakan atributlayout_constraintHorizontal_weight
danlayout_constraintVertical_weight
. Ini berfungsi dengan cara yang sama sepertilayout_weight
dalam tata letak linear: tampilan dengan nilai bobot tertinggi mendapatkan ruang terbanyak, dan tampilan yang memiliki bobot yang sama akan mendapatkan jumlah ruang yang sama. - Packed: tampilan dikemas bersama setelah margin diperhitungkan. Anda dapat menyesuaikan bias seluruh rantai—kiri atau kanan, atau atas atau bawah—dengan mengubah bias tampilan "kepala" rantai.
Tampilan "head" rantai—tampilan paling kiri dalam rantai horizontal (dalam tata letak kiri-ke-kanan) dan tampilan paling atas dalam rantai vertikal—menentukan gaya rantai dalam XML. Namun, Anda dapat beralih antara spread, spread below, dan packed dengan memilih tampilan apa pun di rantai dan mengklik tombol rantai yang muncul di bawah tampilan.
Untuk membuat rantai, lakukan hal berikut, seperti yang ditunjukkan di video 4:
- Pilih semua tampilan yang akan disertakan dalam rantai.
- Klik kanan salah satu tampilan.
- Pilih Jaringan Bisnis.
- Pilih Tengah Secara Horizontal atau Tengah Vertikal.
Berikut adalah beberapa hal yang perlu dipertimbangkan saat menggunakan rantai:
- Tampilan dapat menjadi bagian dari rantai horizontal dan vertikal, sehingga Anda dapat membuat tata letak petak yang fleksibel.
- Rantai hanya akan berfungsi dengan baik jika setiap ujung rantai dibatasi ke objek lain pada sumbu yang sama, seperti yang ditunjukkan pada gambar 14.
- Meskipun orientasi rantai adalah vertikal atau horizontal, menggunakan satu tidak akan menyelaraskan tampilan ke arah tersebut. Untuk mencapai posisi yang tepat bagi setiap tampilan dalam rantai, sertakan batasan lain, seperti batasan perataan.
Membuat batasan secara otomatis
Daripada menambahkan batasan ke setiap tampilan saat menempatkannya di tata letak, Anda dapat memindahkan setiap tampilan ke posisi yang diinginkan di Layout Editor, lalu mengklik Infer Constraints untuk membuat batasan secara otomatis.
Infer Constraints memindai tata letak untuk menentukan kumpulan batasan yang paling efektif bagi semua tampilan. Atribut ini membatasi tampilan ke posisinya saat ini sekaligus memberikan fleksibilitas. Anda mungkin perlu melakukan penyesuaian agar tata letak merespons seperti yang Anda inginkan untuk ukuran dan orientasi layar yang berbeda.
Autoconnect to Parent adalah fitur terpisah yang dapat Anda aktifkan. Saat diaktifkan dan Anda menambahkan tampilan turunan ke induk, fitur ini akan otomatis membuat dua batasan atau lebih untuk setiap tampilan saat Anda menambahkannya ke tata letak, tetapi hanya jika tepat untuk membatasi tampilan ke tata letak induk. Autoconnect tidak membuat batasan untuk tampilan lain dalam tata letak.
Autoconnect dinonaktifkan secara default. Aktifkan dengan mengklik Enable Autoconnection to Parent di toolbar Layout Editor.
Animasi bingkai utama
Dalam ConstraintLayout
, Anda dapat menganimasikan perubahan pada ukuran
dan posisi elemen menggunakan
ConstraintSet
dan
TransitionManager
.
ConstraintSet
adalah objek ringan yang mewakili
batasan, margin, dan padding dari semua elemen turunan dalam
ConstraintLayout
. Saat Anda menerapkan ConstraintSet
ke
ConstraintLayout
yang ditampilkan, tata letak akan memperbarui batasan
semua turunannya.
Untuk membuat animasi menggunakan ConstraintSet
, tentukan dua file tata letak
yang berfungsi sebagai keyframe awal dan akhir untuk animasi. Anda kemudian dapat memuat
ConstraintSet
dari file keyframe kedua dan menerapkannya ke
ConstraintLayout
yang ditampilkan.
Contoh kode berikut menunjukkan cara menganimasikan pemindahan satu tombol ke 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 tambahan
ConstraintLayout
digunakan dalam
aplikasi demo
Sunflower.