Membuat Layout UI Aplikasi iOS Tanpa Interface Builder (Programmatically)
Sekaligus melatih konsistensi dalam menekan ⌘+R
Membuat layout UI untuk aplikasi iOS itu ada 2 cara, pakai Interface Builder (Storyboard atau XIB) maupun programmatically. Keduanya memiliki plus minusnya masing-masing. Kalau pakai Interface Builder kalian bisa drag drop komponen UI nya, lalu atur autolayout constraintnya secara visual. Paling tidak, kita bisa lihat tampilannya seperti apa sebelum di jalankan. Kalau programmatically, ya harus dijalankan aplikasinya sampai terlihat UI nya, ya karena memang tidak ada previewnya 😛.
Bagaimana caranya? Kita akan membuat UI yang sederhana saja, yaitu login UI.
Hapus file Main.storyboard
Ya, dihapus. Biar tidak tergoda kembali lagi ke mantan, eh.
Hapus bagian Main interface
Kosongin saja, layar ini bisa dibuka dengan melihat file xcodeproj dari Xcode.
Siapkan library autolayout
Banyak library untuk mengurusi autolayout secara programmatic, ada Snapkit, PureLayout, Cartography, dan lain-lain.
Saya pribadi lebih suka pakai Snapkit, dan di guide singkat ini saya contohkan pakai Snapkit, karena syntaxnya lebih simple daripada harus mengurusi autolayout secara programmatic pakai NSLayoutConstraint maupun Apple Visual Format, yang menurut saya masih verbose.
Cara installnya silakan dilihat di halaman masing-masing library ya.
Buat klas turunan dari UIView dan komponennya
Klas ini digunakan untuk menggambarkan dan mengatur komponen UI dari aplikasi. Kita buat aja klas, LoginView yang extends dari klas UIView .
Nantinya, kita akan mendeklarasikan komponen-komponen UI nya di klas ini. Ada 2 text field, untuk username dan password, serta 1 tombol untuk login.
UI yang dibuat nantinya akan berbentuk seperti ini…
Supaya mudah dalam mengatur 2 textfield dan button login agar terlihat seperti diatas, maka kita nantinya akan menggunakan UIStackView . UIStackView ini mirip seperti LinearLayout yang ada di Android.
Untuk membuat komponen-komponen UI nya, kita akan membuat instance member pada LoginView , yang diinstansiasi dari klas UITextField dan UIButton .
Baris 5–39 itulah untuk mendeklarasikan komponen-komponen UInya. Namun, sampai detik ini komponen masih belum bisa ditampilkan, karena belum masuk ke hirarki viewnya.
Untuk membuat stackviewnya, kita juga membuat instance dari UIStackView , langkah-langkahnya sama seperti pada waktu mendeklarasikan instance untuk button dan textfield tadi.
stackView diatas akan diinstansiasi belakangan ketika objek akan digunakan, sehingga mekanisme tadi bisa disebut sebagai lazy initialization.
Susunan komponen (button dan textfield) dalam stackView tadi disusun secara vertikal, lalu tiap komponennya memiliki ukuran yang sama serta jarak antara satu komponen dengan yang lainnya sebesar 10 pts.
Mengatur posisi dengan Autolayout
Karena button dan textfieldnya sudah masuk ke stack view, maka kita hanya perlu mengatur posisi stack viewnya saja.
Kita akan memposisikan stackviewnya di tengah-tengah layar, dan posisi kiri dan kanan dari stack view memiliki jarak 40 pts dari sisi kiri dan kanan layar, sehingga ketika digambarkan akan terlihat sebagai berikut:
Sehingga, untuk mengatur layout seperti diatas, maka kode yang digunakan sebagai berikut (baris 17–27):
Fungsi setupViewAndConstraints() akan dipanggil pada initializer init(frame:) ketika akan membuat instance dari LoginView .
Membuat View Controller dengan LoginView sebagai View
Agar view yang kita buat tadi bisa ditampilkan, maka kita butuh klas yang extends dari UIViewController , kita namakan saja LoginViewController .
Pada lifecycle loadView() , kita harus mengatur viewnya dengan LoginView yang telah kita buat sebelumnya. Hampir mirip konsepnya seperti setContentView(layout) di Android.
Set initial view controller dari AppDelegate
Kalau View Controller tadi ingin dijadikan sebagai initial view controller ketika aplikasi pertama kali dijalankan, maka kita harus menambahkan beberapa baris dibawah pada AppDelegate pada fungsi application(_:didFinishLaunchingWithOptions:) .
Lalu kalau dijalankan ya seperti ini…
Sudahkah mendapat gambaran, bagaimana membuat layout UI aplikasi iOS secara programmatic atau tanpa Interface Builder?
Mudah bukan?
Semoga bermanfaat 😄
