Sebuah Panduan Menggunakan ConstraintLayout di Android Studio

Diterjemahkan dari A Guide to using ConstraintLayout in Android Studio

Seperti disebutkan di pembahasan sebelumnya, Google telah membuat perubahan yang cukup signifikan pada Android Studio Layout Editor, yang mayoritas ditambahkan untuk mendukung desain antarmuka menggunakan ConstraintLayout. Sekarang setelah konsep dasar ConstraintLayout kita bahas, saatnya sekarang kita pelajari bagaimana mengimplementasikannya untuk mendesain antarmuka menggunakan Layout Editor.

Design dan Layout Views

Pada bahasan berjudul “Sebuah Panduan untuk Android Studio Layout Editor Tool” (yang ini belum diterjemahkan) menjelaskan bahwa Android Studio Layout Editor memberikan dua cara untuk melihat antarmuka yang didesain dalam bentuk Design dan Layout (dikenal juga dengan nama blueprint) views. View-view ini dapat ditampilkan secara individu maupun bersamaan, seperti pada Gambar 25–1, yang tampil secara bersamaan:

Design view (berada di sebelah kiri gambar di atas) menampilkan suatu “what you see is what you get”, artinya apa yang kita lihat di sana akan ditampilkan saat aplikasi dijalankan. Layout view, sementara itu, hanya menampilkan blueprint dari suatu desain di mana setiap widget ditampilkan dalam bentuk kotak-kotak. Seperti yang bisa dilihat pada Gabamr 25–1 di atas, Layout view juga menampilkan koneksi constraint (dalam kasus di atas terdapat opposing constriant yang memosisikan sebuah button di tengah layar). Constraint-constraint tersebut akan diperjelas di dalam Design view saat widget tertentu terpilih atau pointer mouse berada di atasnya seperti yang digambarkan Gambar 25–2:

Tampilan koneksi constraint di kedua views bisa diubah menggunakan menu toolbar yang ada di Gambar 25–3:

Selain dua mode untuk menampilkan layout antarmuka tadi, Layout Editor tool juga memberikan tiga cara berbeda untuk mengatur bagaimana koneksi constraint suatu layout ditentukan.

Autoconnect Mode

Autoconnect, sesuai namanya, akan secara otomatis memberikan koneksi constriant saat suatu widget ditambahkan ke dalam layout. Mode autoconnect dapat diaktifkan maupun dinonaktifkan menggunakan tombol toolbar seperti pada Gambar 25–4:

Mode autoconnect menggunakan algoritma untuk menentukan constraint yang paling cocok untuk diberikan berdasarkan lokasi sisi suatu widget terhadap parent layout-nya saat ditambahkan. Jika pemberian koneksi otomatis tidak sesuai harapan, nantinya kita bisa mengubah koneksi constraint tersebut secara manual.

Inference Mode

Inference mode menggunakan metode heuristic yang terdiri atas algoritma dan kemungkinan-kemungkinan lain untuk memosisikan suatu widget secara otomatis setelah widget tersebut ditambahkan ke layout. Mode ini biasanya dipakai ketia fitur Autoconnect sudah dimatikan dan objek yang ditambahkan ke layout tidak memiliki constraint apapun. Fitur ini memungkinkan suatu layout untuk didesain hanya dengan drag and drop widget ke canvas layout dengan merubah ukuran atau posisinya saat dibutuhkan. Secara sederhana, metode ini membuat kita bisa mendesain layout suatu aplikasi tanpa perlu memilikirkan koneksi constriant-nya. Mode inference dapat dipakai kapanpun untuk memberikan constraint pada widget-widget yang belum memilikinya.

Constraint dapat diberikan secara otomatis ke sebuah layout ketika tombol Infer constraint (Gambar 25–5) di klik:

Sama seperti mode Autoconnect, akan selalu ada kemungkinan Layout Editor untuk memberikan constraint yang tidak sesuai, sehingga harus dimodifikasi dan diperbaiki secara manual.

Mengatur Constraint Secara Manual

Opsi ketiga untuk memberikan koneksi constraint ialah dengan memberikannya secara manual. Saat memberikan koneksi constraint secara manual di Layout Editor, ada beberapa hal yang perlu diketahui. Perhatikan contoh widget pada Gambar 25–6 berikut:

Garis zigzag (A) merupakan koneksi constraint yang menghubungkan sisi suatu widget ke sebuah target. Kotak kecil (B) di setiap sudut objek merupakan resize handle yang saat diklik dan ditarik akan mengubah ukuran widget. Lingkaran kecil (C) yang ada di setiap sisi merupakan constraint anchor (pemegang constraint). Untuk memberikan koneksi constriant, klik pada anchor, tahan, lalu tarik ke elemen yang diinginkan (misalnya guideline, salah satu sisi parent atau salah satu sisi widget lain) seperti pada Gambar 25–7. Saat memberikan koneksi ke salah satu sisi widget lain, cukup drag dari anchor ke anchor salah satu sisi widget lain hingga berwarna hijau, lalu lepas klik mouse.

Selain anchor pada sisi suatu widget, terdapat anchor tambahan untuk menandakan baseline constriant pada konten yang ada di dalam widget tersebut. Untuk menampilkan tanda ini, cukup klik saja button yang ada tulisan ‘ab’ (ditunjuk oleh penanda D pada Gambar 25–6). Untuk memberikan koneksi constriant dari suatu handle baseline constraint, cukup arahkan mouse ke atas handle sampai berkedip sebelum mengklik dan menariknya ke tujuan (misalnya ke baesline anchor widget lain seperti pada Gambar 25–8). Saat baseline anchor tujuan berwarna hijau, lepas tombol mouse:

Untuk menyembunyikan baseline anchor, klik lagi baseline button untuk yang kedua kalinya.

Menambahkan Constraint di Panel Inspector

Constraint dapat pula di tambahkan ke sebuah view di dalam Android Studio Layout Editor menggunakan panel Inspector yang ada di jendela Attributes seperti pada Gambar 25–9. Kotak yang berada di tengah merepresentasikan view yang saat ini sedang terpilih dan area disekitarnya adalah constraint yang aktif di view tersebut:

Ketidakhadiran dari suatu constraint di salah satu sisi view dapat dilihat dari titik-titik diserta lingkaran biru dengan tanda plus (pada contoh di atas yaitu pada sisi bagian bawah). Untuk menambah constraint, cukup klik pada lingkaran biru ini dan layout editor akan menambahkan sebuah constraint ke view yang paling cocok menurutnya.

Menghapus Constraints

Untuk menghapus suatu constraint, cukup klik anchor yang sedang aktif. Constraint selanjutnya akan di hapus dari layout (saat mouse di arahkan ke atas anchor ia akan berubah menjadi merah yang menyatakan bahwa saat di klik ia akan menghapus anchor tersebut).

Jika ingin menghapus seluruh constraint sekaligus maka klik salah satu widget lalu klik tombol Delete All Constraints yang akan muncul di sebelah widget terpilih seperti pada Gambar 25–11:

Untuk menghapus seluruh constraint dari seluruh widget yang ada di layout, gunakan tombol toolbar yang ditunjukkan oleh Gambar 25–12:

Mengatur Constraint Bias

Di bab sebelumnya, kita sudah membahas bagaimana memberikan suatu bais dengan memanfaatkan opposing constraint di suatu widget. Constraint bias dapat diatur di dalam Android Studio Layout Editor menggunakan Inspector yang ada di jendela Attributes seperti pada Gambar 25–13. Dua slider yang ditunjuk oleh panah akan mengatur bias vertikal dan horizontal pada widget yang sedang terpilih.

Margin Constraint dapat digunakan untuk melengkapi margin sehingga bisa memberikan jarak antar elemen. Perhatikan horizontal constraint yang diberikan pada objek Button di Gambar 25–14:

Seperti yang sudah diatur sebelumnya, horizontal constraint membuat posisi objek relatif pada parent ConstraintLayout-nya. Oleh karena itu, widget tersebut memiliki opposing horizontal constraint sehingga posisinya kini berada di tengah. Karena fitur ini, layout memiliki fleksibilitas untuk mengakomodasi ukuran layar yang berbeda juga orientasi layar yang berbeda. Pengaturan horizontal bias juga dapat mengontrol posisi widget sampai ke ujung layar. Contohnya pada Gambar 25–15, memperlihatkan button dengan 100% horizontal bias:

Margin ConstraintLayout akan diberikan di akhir ujung constraint dan memberikan jarak berukuran tetap dimana bias tidak akan bisa melampauinya. Pada Gambar 25–16, constraint sisi sebelah kanan memiliki margin 50dp meskipun horizontal biasnya tetap 100%.

Nilai margin yang ada pada suatu widget dapat dimodifikasi dari dalam Inspector. Seperti pada Gambar 25–17, sebuah menu dropdown dipakai untuk mengubah margin di sisi kanan widget terpilih menjadi 16dp. Selain itu, kita juga bisa mengubahnya dengan mengetikkan langsung nilai yang diinginkan di kotak yang tersedia.

Margin bawaan untuk setiap constriant baru dapat diubah kapanpun melalui opsi pada toolbar yang ditunjuk oleh panah pada Gambar 25–18:

Pentingnya opposing constraint, bias, serta margin telah dibahas di bab sebelumnya yang menjadi fondasi responsive layout design di Android menggunakan ConstraintLayout. Saat sebuah widget diberikan constraint tanpa opposing constraint, maka constraint tersebut akan menggunakan margin untuk jarak constraint-nya. Hal ini bisa dilihat secara visual melalui garis lurus yang disertai besaran margin seperti pada Gambar 25–19.

Constraint di atas akan membuat posisi widget tetap tidak perduli dengan ukuran maupun orientasi layar. Hasilnya bisa dilihat pada Gambar 25–20 dimana posisi widget tidak terlihat saat layar diputar. Masalah yang sama juga akan muncul pada perangkat berlayar lebih kecil.

Saat diberikan opposing constriant, ia akan digambarkan oleh garis-garis lancip (yang memberikan tanda bahwa posisi tersebut tidak pasti pada titik koordinat X dan Y):

Pada layout di atas, vertical dan horizontal bias telah diatur sehingga posisi widget tersebut akan selalu berjarak 90% dari bawah serta berjarak 35% dari sisi kiri parent-nya. Saat layar di putar, maka widget tersebut masih akan memiliki persentase posisi yang sama, relatif terhadap layar yang sekarang dilihat:

Penting untuk selalu memperhitungkan baik bias maupun opposing constraint saat mendesain antarmuka secara manual dan melakukan koreksi saat membuat constraint otomatis.

Mengatur Ukuran Widget

Ukuran sebuah widget di dalam ConstraintLayout juga bisa diatur lewat Inspector. Seperti yang sempat disebutkan sebelumnya, ukuran widget dapat berupa wrap content, ukuran pasti atau mengikuti constraint (match constraint). Mode yang terpilih digambarkan oleh garis-garis yang ada di dalam kotak seperti pada Gambar 25–23:

Pada gambar di atas, baik ukuran horizontal maupun vertikal diatur menggunakan mode wrap content (digambarkan panah-panah ke dalam). Inspector menggunakan indikator visual berikut untuk menggambarkan tiga mode ukuran widget:

- Fixed Size/Ukuran tetap

- Match Constraint/Mengikuti constraint

- Wrap Content

Untuk mengubah pengaturan yang sudah ada, cukup klik pada indikator tersebut. Saat ukuran sebuah view diatur dalam mode match constraint, garis biru pada sisi-sisi tertentu akan berubah menjadi lancip dari yang biasanya garis lurus. Pada Gambar 25–24 contohnya, karena lebar dari view diatur menjadi match constraint maka garisnya berubah:

Selain itu, ukuran widget dapat pula diperpanjang baik secara horizontal maupun vertikal sampai memenuhi besar maksimal yang bisa dicapai melalui opsi Expand horizontally dan Expand vertically. Opsi-opsi ini bisa dilihat dengan cara klik kanan pada sebuah wdiget di dalam layout lalu memilih opsi Organize pada menu yang muncul (Gambar 25–25). Saat dipilih, widget terpilih akan mendapatkan tambahan lebar atau tinggi untuk mengisi ruang kosong yang tersedia.

Menggunakan Guidelines

Guidelines memberikan elemen tambahan dimana kita bisa mengarahkan suatu constraint. GUidelines bisa ditambah lewat klik kanan pada layout dan memiliki opsi Add Vertical Guideline atau Add Horizontal Guideline atau menggunakan menu pada toolbar seperti pada Gambar 25–26:

Setelah ditambahkan, sebuah guideline akan tampil sebagai garis putus-putus di layout dan dapat digeser dengan drag and drop. Untuk memberikan constriant ke guideline, klik pada handler constriant suatu widget lalu tarik ke guideline sebelum di lepas. Pada Gambar 25–27, sisi kiri dari dua Button terhubung oleh constraint ke sebuah vertical guideline.

Posisi dari sebuah vertical guideline dapat diatur dengan ukuran tetap dari posisi atas, bawah, kiri, atau kanan parent. Vertical guideline pada contoh gambar di atas contohnya, memiliki posisi 96dp dari sisi kiri parent.

Kita juga bisa memberikan posisi dengan persentase dari keseluruhan lebar atau tinggi parent. Untuk mengubah mode guideline, pilih salah satu guideline yang diinginkan lalu klik lingkaran pada bagian atas atau kiri guideline (tergantung pada apakah guideline tersebut vertikal atau horizontal). Gambar 25–28, contohnya, akan menampilkan sebuah guideline yang diposisikan menggunakan persentase:

Menambahkan Barriers

Barrier dapat ditambah dengan cara klik kanan di layout dan memilih salah satu dari Add Vertical Barrier atau Add Horizontal Barrier, atau menggunakan menu pada toolbar seperti pada Gambar 25–29:

Setelah sebuah barrier ditambahkan ke layout, ia akan terdaftar sebagai salah satu item di panel Component Tree:

Untuk menambah suatu view sebagai reference view (yang dalam arti lain sebagai view yang menentukan posisi barrier), cukup drag widget tersebut ke dalam barrier. Pada Gambar 25–31, contohnya, widget bernama textView1 dan textView2 telah diatur sebagai reference widget untuk barrier1:

Setelah reference view di tambahkan, barrier perlu tahu ke mana ia perlu menentukan arah barrier berdasarkan dua view tadi. Pengaturan arah barrier diatur dari dalam jendela Attributes tool saat barrier terpilih di panel Component Tree:

Gambar berikut menunjukkan sebuah layout dengan sebuah barrier yang di dalamnya terdapat textView1 dan textView2 sebagai reference view serta textView3 sebagai constrained view. Karena barrier akan bergerak dari sisi sebelah kanan reference view ke arah constraint view, maka barrier directionnya di atur ke end:

Widget Group Alignment

Layout Editor Android Studio memberikan banyak pilihan alignment saat dua atau lebih widget terpilih di layout. Cukup klik sambil menekan tombol shift di setiap widget untuk ikut terseleksi, lalu klik kanan dan pilih opsi-opsi untuk mensejajarkan widget-widget terpilih:

Seperti pada Gambar 25–35 di bawah, opsi-opsi tersebut juga tersedia sebagai sebuah tombol di toolbar Layout Editor:

Mengubah Layout lain ke ConstraintLayout

Untuk layout yang dibuat dengan layout terdahulu (seperti RelativeLayout atau LinearLayout), Layout Editor telah memiliki opsi untuk mengubahnya menjadi ConstriantLayout.

Saat Layout Editor tampil dalam Design mode, panel Component Tree akan terlihat di bagian bawah Palette. Mengubah sebuah layout menjadi ConstraintLayout dapat dilakukan dengan memilih layout yang ingin diubah, klik kanan lalu pilih Convert <jenis layout> to Constraint Layout:

Saat opsi ini terpilih, Android Studio akan mengubah layout sekarang menjadi Constriant Layout dan menggunakan inference untuk menentukan constriant yang paling sesuai.

Kesimpulan

Layout Editor yang telah didesain ulang bersama dengan ConstraintLayout membuat proses desain antarmuka yang kompleks di Android Studio menjadi lebih cepat dan intuitif. Bab ini telah membahas konsep-konsep seperti constraint, margin, dan bias lebih mendetail serta membahas bagaimana memanfaatkan fitur-fitur desain berbasis ConstraintLayout yang telah terintegrasi di Layout Editor.