M Membuat tata letak UI untuk aplikasi iOS itu ada 2 cara, pakai Interface Builder (Storyboard atau XIB) atau secara terprogram. Masing-masing memiliki plus minusnya masing-masing. Kalau pakai Interface Builder kamu bisa drag drop komponen UI-nya, lalu atur autolayout constraintnya secara visual. Paling tidak, kita bisa lihat seperti apa sebelum dijalankan. Jika terprogram, ya harus dijalankan sampai UI terlihat, ya karena memang tidak ada previewnya 😛.
Bagaimana caranya? Kita akan membuat UI yang sederhana saja, yaitu UI login.
Hapus file Main.storyboard
ya, dikeluarkan. Biar tidak tergoda kembali lagi ke mantan, eh.Hapus bagian Antarmuka utama
Bagaimana caranya? Kita akan membuat UI yang sederhana saja, yaitu UI login.
Hapus file Main.storyboard
ya, dikeluarkan. Biar tidak tergoda kembali lagi ke mantan, eh.Hapus bagian Antarmuka utama
Kosongin saja, layar ini bisa dibuka dengan melihat file xcodeproj dari Xcode.
Siapkan autolayout perpustakaan
Banyak perpustakaan untuk meng-autolayout secara terprogram, ada Snapkit, PureLayout, Kartografi, dan lain-lain.
Saya pribadi lebih suka pakai Snapkit, dan di panduan singkat ini saya contohkan pakai Snapkit, karena syntaxnya lebih sederhana daripada harus mengurusi autolayout menggunakan terprogram NSLayoutConstraintmaupun Apple Visual Format, yang menurut saya masih verbose.
Cara installnya silakan dilihat di halaman masing-masing perpustakaan ya.
Buat kelas turunan dari UIView dan komponennya
Klas ini digunakan untuk mengulas dan komponen UI dari aplikasi. Kita buat aja kelas, LoginView yang meluas dari kelas UIView.
Nantinya, kita akan mendeklarasikan komponen-komponen UI-nya di klas ini. Ada 2 bidang teks, untuk nama pengguna dan kata sandi, serta 1 tombol untuk masuk.
UI yang dibuat akan membentuk seperti ini ...
Siapkan autolayout perpustakaan
Banyak perpustakaan untuk meng-autolayout secara terprogram, ada Snapkit, PureLayout, Kartografi, dan lain-lain.
Saya pribadi lebih suka pakai Snapkit, dan di panduan singkat ini saya contohkan pakai Snapkit, karena syntaxnya lebih sederhana daripada harus mengurusi autolayout menggunakan terprogram NSLayoutConstraintmaupun Apple Visual Format, yang menurut saya masih verbose.
Cara installnya silakan dilihat di halaman masing-masing perpustakaan ya.
Buat kelas turunan dari UIView dan komponennya
Klas ini digunakan untuk mengulas dan komponen UI dari aplikasi. Kita buat aja kelas, LoginView yang meluas dari kelas UIView.
Nantinya, kita akan mendeklarasikan komponen-komponen UI-nya di klas ini. Ada 2 bidang teks, untuk nama pengguna dan kata sandi, serta 1 tombol untuk masuk.
UI yang dibuat akan membentuk seperti ini ...
Supaya mudah dalam 2 textfield dan tombol login agar terlihat seperti diatas, maka kita akan menggunakan UIStackView. UIStackView ini mirip dengan 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.
Ditentukan posisi dengan Autolayout
Karena tombol dan textfieldnya sudah masuk ke tampilan stack, 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 kompilasi akan terlihat seperti berikut:
Untuk membuat komponen-komponen UI-nya, kita akan membuat instance member pada LoginView, yang diinstansiasi dari klas UITextField dan UIButton.
Ditentukan posisi dengan Autolayout
Karena tombol dan textfieldnya sudah masuk ke tampilan stack, 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 kompilasi akan terlihat seperti berikut:
Sesuai, untuk tata letak seperti di atas, 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 LoginViewyang telah kita buat sebelumnya. Hampir mirip konsepnya
seperti setContentView (tata letak) di Android.
Atur pengontrol tampilan awal dari AppDelegate
Jika View Controller sebelumnya ingin dibuat sebagai awal view controller, aplikasi pertama kali dijalankan, maka kita harus menambahkan beberapa baris di bawah AppDelegate pada fungsi aplikasi (_: didFinishLaunchingWithOptions :).
Lalu kalau dijalankan ya seperti ini…
Sudah mendapat gambaran, bagaimana membuat layout UI
terprogram atau tanpa Interface Builder?
Mudah bukan?
Semoga Bermanfaat 😄
terprogram atau tanpa Interface Builder?
Mudah bukan?
Semoga Bermanfaat 😄
