Mengatur UIView dengan Auto Layout pada iOS

Salah satu isu yang saya temui ketika memulai mengembangkan aplikasi mobile, khususnya pada iOS, adalah dalam hal pengaturan layout antarmuka. Seringkali saya sudah meletakkan dengan rapih, namun ketika dijalankan di iOS Simulator layout-nya menjadi berantakan pada device tertentu. Misalnya saya ingin meletakkan 2 label dengan pasangan text field-nya seperti UIView berikut ini:

UIView pada Storyboard

Terlihat pada Storyboard, UIView tersebut sudah rapih. Tetapi setelah dijalankan di iOS Simualtor, hasilnya berantakan tidak sesuai seperti yang saya bayangkan ketika menuangkannya di Storyboard:

UIView ketika runtime di iOS Simulator

Apple telah menyediakan fitur Auto Layout pada iOS untuk mengkalkukasikan secara dinamis jarak dan posisi dari masing-masing komponen antarmuka, sehingga layout dapat tetap rapih dan dinamis pada device apapun. Awalnya saya kurang memahami perilaku dari Auto Layout, sehingga saya merasa menggunakan Auto Layout justru malah mempersulit pengembangan. Ternyata setelah berulang kali saya mencoba, Auto Layout tidak sesulit itu. Bahkan terasa sangat natural dan logis. Pada artikel ini saya ingin berbagi cara memahami dan memanfaatkan Auto Layout dalam pengembangan aplikasi iOS.

Pertama-tama, pastikan "Use Auto Layout" dan "Use Size Classes" pada property Main.storyboard dalam kondisi terpilih. Kemudian ketika kita sedang mendisain UIView di Storyboard, Size Classes berada di posisi "w Any h Any". 

Size Classes Default

Size Classes "w Any h Any" memiliki arti UIView yang sedang diedit akan diaplikasikan secara universal. Artinya kita hanya cukup mendisain layout sekali untuk berbagai ukuran model device maupun orientasi device. Faktor penting lainnya adalah dalam Auto Layout, kita membutukan sebuah object atau batasan untuk menjadi patokan utama. Misalnya pada contoh di atas, hasil akhir yang kita inginkan adalah keseluruhan disain berada tepat di tengah layar bagian atas. Untuk itu kita membutuhkan sebuah object tambahan sebagai patokan titik tengah horizontal. Ambil saja sebuah label baru dan kita letakkan di antara Name dan text field sebelahnya hinggap snap to horizontal centre grid.

Penambahan Komponen Dummy Posisi Tengah Horizontal

Kecilkan ukurannya, kemudian ketika dalam kondisi memilih label tersebut pilih "Pin" di sudut kanan bawah Storyboard dan pilih "Width" dan "Height", kemudian pilih "Align" dan pilih "Horizontally in Container". Tampilannya akan menjadi seperti ini:

Garis merah ini pertanda ada sebuah contraint yang masih tidak benar. Target kita adalah membuat garis merah ini hilang dan menjadi garis biru yang menandakan layout sudah tidak ambigu. Tahan tombol "Ctrl" dan tarik cursor mouse dari label tersebut ke arah atas container dan lepaskan. Kemudian pilih "Vertical Spacing to Top Layout Guide". Seharusnya garis sudah menjadi biru sekarang. 

Kita sudah memiliki patokan titik horizontal sekarang, yaitu label dummy yang telah dibuat sebelumnya.  Sekarang saatnya memanfaatkan titik tersebut. Geser text field ke kanan, label Name ke kiri. Tahan tombol Ctrl dan mouse dari text field ke titik horizontal, begitu pula dengan label Name. Tarik pula dari masing-masing label dan text field ke arah atas ke top container. Jangan lupa untuk membuat fix width pada textfield. Coba jalankan kembali ke iOS Simulator. Seharusnya sekarang posisinya sudah lebih dinamis dan rapih, baik pada oritivertikal maupun horizontal.

Lakukan hal serupa pada label Role dan textfield-nya, kemudian hide titik horizontal. Hasil akhirnya kurang lebih seperti ini:

Selamat mencoba! :)