MIT School Muslimah : Mengenal Auto Layout Dalam XCode

Apa itu auto layout? Mengutip penjelasan resmi dari situs Apple, auto layout adalah..

..a constraint-based, descriptive layout system.

..wow penjelasan yang.. singkat dan padat ya. Hmm jadi apa itu ‘constraint-based‘? Apa pula itu ‘descriptive layout system‘? Untuk memahaminya dengan lebih mudah, mari kita simak cerita Adi.

Autoresizing (alih-alih Auto Layout)

Adi baru belajar menjadi iOS developer. Dia sedang membuat aplikasi sederhana yang terdiri atas tiga view berupa persegi panjang berwarna merah, hijau, dan biru dengan ukuran tertentu. Setelah menyusun tampilan yang ia inginkan pada view controller, Adi pun menjalankan aplikasinya pada simulator iPhone 5. Tampaklah hasil seperti ini:
Screen Shot 2016-03-24 at 23.35.37

“Sudah bagus,” pikir Adi lugu. Tapi tentu tidak semua user menggunakan iPhone 5. Menyadari hal itu, Adi pun mencoba menjalankan aplikasinya pada simulator iPhone 4s, dan hasilnya:

Screen Shot 2016-03-24 at 23.35.16

“Waduh, birunya jadi kepotong gini,” pikir Adi. Dia pun memeriksa panel size inspector dan menyadari bahwa setting autoresizing-nya belum benar. Maka Adi mengatur agar kotak view merah memiliki fixed-margin ke sebelah kiri dan atas, kotak view hijau memiliki fixed-margin ke sebelah kanan dan atas, serta kotak view biru memiliki fixed-margin ke sebelah kiri, kanan, dan bawah. Tak lupa Adi mengatur agar panjang dan lebar ketiga kotak otomatis menyesuaikan panjang dan lebar layar.

Screen Shot 2016-03-24 at 23.40.41

Adi menjalankan simulator iPhone 4s-nya lagi dan melihat hasil ini:

Screen Shot 2016-03-24 at 23.39.26

Lumayan. Tapi Adi orang yang perfeksionis. Dia bisa melihat bahwa ada perbedaan jarak antara kotak merah-hijau dengan kotak merah – biru. Padahal Adi mau ketiga kotak tersebut memiliki jarak yang persis sama. Tapi ternyata tidak hanya itu. Adi juga menemukan cacat ketika layar device ada dalam landscape mode, seperti ini:

Screen Shot 2016-03-24 at 23.45.34

“Waduh, nggak bisa kalau begini,” pikir Adi bingung. Adi tidak mengerti bagaimana agar komputer dapat memahami maksudnya. Yang dia inginkan hanyalah agar:

  • kotak merah dan kotak hijau memiliki panjang yang sama
  • kotak merah, hijau, dan biru memiliki lebar yang sama
  • kotak merah dan kotak hijau berjarak 20 pixel secara horizontal
  • kotak biru berjarak 20 pixel secara vertikal dari dua kotak di atasnya
  • keseluruhan kotak berjarak 20 pixel dari tepi kiri, bawah, dan kanan layar
  • kotak merah dan hijau berjarak 0 pixel (mepet) dari tepi atas layar

Padahal kalau saja Adi tahu tentang fitur auto layout, tentu dia tidak akan bingung.

Autoresizing vs Auto Layout

Ketika membuat aplikasinya, Adi menetapkan posisi (koordinat x, y) setiap kotak beserta ukuran (panjang x lebar) masing-masing.

Kemudian Adi mengatur agar, berapapun ukuran layarnya, tiap kotak memiliki posisi yang tetap terhadap tepi layar (fixed margin). Adi juga mengatur agar ukuran kotak dapat berubah secara proporsional menyesuaikan ukuran layar.

Langkah kedua yang dilakukan oleh Adi ini disebut autoresizing. Dengan autoresizing kita hanya bisa mengatur relasi antara view dengan superview, tapi kita tidak bisa mengatur relasi antar-view. Dengan kata lain, kita hanya bisa mengatur hubungan antara masing-masing kotak dengan keseluruhan bidang layar, tapi kita tidak bisa mengatur hubungan antara kotak merah dengan kotak hijau, ataupun antara kotak merah dengan kotak biru. Dengan autoresizing, Kita bisa mengatur agar kotak merah selalu dimulai pada koordinat (20, 20), atau agar lebar kotak biru berubah fleksibel menyesuaikan ukuran layar. Namun, kita tidak bisa mengatur agar, misalnya, kotak hijau dimulai tepat 20 pixel setelah kotak merah.

Untuk mengatasi masalahnya, Adi perlu menggunakan auto layout. Pada dasarnya dengan menggunakan auto layout Adi akan lebih leluasa menetapkan relasi tata letak setiap elemen dalam aplikasinya.

Menggunakan Auto Layout

Untuk mulai menggunakan auto layout, centanglah ‘Use Auto Layout’ pada file inspector dari view controller. Pilihan ini umumnya merupakan pilihan default, jadi pastikan saja sudah tercentang.Screen Shot 2016-03-25 at 00.41.24

Dengan menggunakan auto layout, kita bisa mengatur relasi antara elemen-elemen dalam view controller menggunakan constraint. Constraint sendiri, sesuai namanya, adalah ibarat ‘batasan’ yang kita berikan kepada masing-masing elemen. Untuk menambahkan constraint, kita cukup men-select salah satu view yang kita inginkan dan membuka icon ‘Pin’ yang berada di kanan bawah interface builder, seperti ini:

Screen Shot 2016-03-25 at 00.34.06

Pada bagian paling atas dari jendela ‘pin’ ada setting constraint jarak atau spacing. Kita bisa menetapkan jarak tertentu untuk sisi kiri (leading), atas (top), kanan (trailing), maupun bawah (bottom) dari setiap elemen terhadap elemen lain. Tepat di bawahnya adalah setting ukuran panjang dan lebar elemen. Di bawahnya lagi adalah setting untuk membuat dua elemen memiliki panjang atau lebar yang sama.

Biar tidak membingungkan, mari kita coba turuti keinginan Adi satu-satu.

1. Kotak merah dan kotak hijau memiliki panjang yang sama: Select kotak merah beserta kotak hijau, klik icon pin, dan centang bagian ‘equal widths’.

2. Kotak merah, hijau, dan biru memiliki lebar yang sama: Select kotak merah, hijau, dan biru. Centang bagian ‘equal heights’.

3. Kotak merah dan kotak hijau berjarak 20 pixel secara horizontal: Select kotak merah, aktifkan spacing di sisi kanan. Pastikan angka dalam kotak adalah 20, seperti ini:
Screen Shot 2016-03-25 at 12.49.50

4. Kotak biru berjarak 20 pixel secara vertikal dari dua kotak di atasnya: Select kotak biru, aktifkan spacing di sisi atas. Pastikan angkanya 20.

5. Keseluruhan kotak berjarak 20 pixel dari tepi kiri, bawah, dan kanan layar, serta kotak merah dan hijau berjarak 0 pixel (mepet) dari tepi atas layar: Select kotak merah, aktifkan spacing di sisi kiri sebesar 20 pixel dan sisi atas 0 pixel. Select kotak hijau, aktifkan spacing di sisi kanan sebesar 20 pixel dan sisi atas 0 pixel. Select kotak biru, aktifkan spacing di sisi kiri, bawah, dan kanan masing-masing sebesar 20 pixel.

Sudah. Dengan begini XCode dapat memahami dan menjalankan keinginan Adi. Mudah ya. Beginilah tampilan landscape dari aplikasi Adi setelah menggunakan auto layout:

Screen Shot 2016-03-25 at 15.48.17

Ragam constraint bukan cuma itu lho. Di sebelah kiri icon pin terdapat icon align yang dapat memberi kita lebih banyak pilihan untuk mengatur posisi suatu elemen. Ingin memastikan suatu gambar selalu berada di tengah layar secara horizontal? Secara vertikal? Bisa, tinggal klik saja.

Screen Shot 2016-03-25 at 15.38.22

Sementara di sebelah kanan icon pin terdapat icon ‘resolve auto layout issues’ yang berguna jika kita mengalami masalah dengan constraint-constraint yang kita buat. Beberapa opsi yang tercetak samar pada jendela ini akan bisa dipilih (clickable) jika elemen yang sedang kita select memiliki constraint yang ‘tidak beres’. Kita bisa melihat tanda dari tidak beresnya constraint suatu elemen ketika mendapati garis berwarna merah serta notifikasi error pada document outline.

Screen Shot 2016-03-25 at 15.38.57

Terkadang kita perlu membuat cukup banyak constraint dalam satu view controller. Untuk mengecek setiap constraint dengan lebih mudah, kita dapat melihatnya pada panel document outline.

Screen Shot 2016-03-25 at 15.46.38

Constraint-Based, Descriptive…

Untuk menutup sekilas ulasan tentang auto layout ini, mari kita kembali pada pengertian auto layout. Masih ingat?

“Auto layout is a constraint-based, descriptive layout system.”

Pada dasarnya, dengan menggunakan auto layout Adi benar-benar bisa ‘memerintahkan’ kepada aplikasinya, “Pokoknya aku mau jarak kotaknya mepet ke atas, tapi ada jaraknya ke sebelah kiri-kanan-bawah,” atau “Pokoknya jarak antara tiap kotak segini,” atau “Pokoknya aku mau kotak yang merah sama hijau sama persis ukurannya,” tanpa perlu menghitung sendiri di titik mana ia harus meletakkan tiap kotak. Juga tanpa perlu menghitung sendiri seberapa besar ia harus menggambar kotaknya.

Awalnya Adi pusing sekali dengan konsep auto layout. Tapi Adi tahu bahwa dengan memaksimalkan auto layout ia dapat mengatur tata letak aplikasinya dengan lebih mudah di masa depan. Adi hanya butuh lebih banyak berlatih dan mengeksplorasi XCode. Semangat ya, Adi! 😀

11eogr

Loading Facebook Comments ...