Membuat Tampilan Sederhana dengan SwiftUI
Mendesain halaman detail hotel menggunakan SwiftUI
SwiftUI adalah framework yang diperkenalkan Apple dalam acara WWDC tahun 2018 silam. Framework ini dibuat dengan tujuan mempermudah pekerjaan para User Interface (UI) Developer. Bagi yang pertama kali mencoba mungkin akan merasa aneh dan membingungkan, namun jika sudah terbiasa pasti akan terasa jauh lebih mudah daripada mendesain dengan Storyboard.
Kali ini, kita akan belajar bagaimana membuat tampilan halaman detail mengenai salah satu hotel. Tanpa banyak basa-basi, kita langsung mulai ya!
Tampilan Halaman
Berikut adalah tampilan yang ingin kita buat :
Di atas adalah contoh tampilan halaman informasi. Di halaman tersebut mencakup Image, Button, dan TextView. Masing -masing akan kita bedah satu persatu. Pertama, pastikan kalian memilih SwiftUI sebagai pilihan interface-nya. Selanjutnya buka file ContentView.swift, lalu isi kode berikut sebagai awalan.
Karena gambar yang digunakan sebagai cover akan melewati batas Safe Area maka kita gunakan .edgeIgnoringSafeArea(.top)
Image Header
Selanjutnya masuk ke bagian pertama. Berikut adalah tampilan pertama yang ingin kita buat :
Pertama-tama kita letakkan gambar yang diinginkan dalam folder Assets.xcassets. Lalu, tambahkan kode berikut diantara ContentView : View dan var body : some View :
@State var heartToggle = falseKode diatas adalah sebagai penentu apakah status tombol ‘hati’ sedang dipilih atau tidak.
Sekarang, kita mulai membuat tampilan atas dengan meletakkan kode berikut , tepat di dalam VStack:
Disini pasti ditemui error di bagian yang bertuliskan .buttonStyle(MyButtonStyle) . Tapi tenang saja, kita akan bahas itu nanti :-). Sementara ini aku akan jelaskan kode di atas dulu.
Disini kita menggunakan UIScreen.main.bounds untuk mengambil lebar dan tinggi layar device kita, lalu kita pergunakan untuk ukuran gambarnya.
Selanjutnya di bawah Image() terdapat HStack untuk memposisikan Judul dan tombolnya, untuk memberikan jarak antara keduanya kita cukup gunakan Spacer().
Kode di bawah digunakan untuk ikon tombol ‘hati’ :
Image(systemName: heartToogle ? "heart.fill" : "heart")Kode tersebut menggunakan 2 String di dalamnya, cara itu disebut dengan Conditional Modifier, dimana gambar tombol akan berubah berdasarkan kondisi true dan false. Sedangkan untuk tombol kedua, kita gunakan atribut yang sama dengan yang pertama hanya saja tanpa Conditional Modifier.
Sekarang kita akan kembali membahas error yang terjadi di awal. Jadi buttonStyle() itu memanggil sebuah struct yang bernama MyButtonStyle() dan akan menjadi sebuah View Modifier. Untuk itu, letakkan kode berikut di bawah struct ContentView :
Bottom Content
Error sudah teratasi, harusnya kita sudah memiliki tampilan yang sama seperti contoh. Selanjutnya kita mulai masuk ke bagian konten :
Bagian ini jelas jauh lebih mudah karena hanya berupa teks saja. Akan tetapi jika ingin kodenya, ini dia :
Selesai!! harusnya kita sudah berhasil membuat halaman detail hotel. Mungkin ini agak rumit bagi yang tidak terbiasa mendesain interface dengan kode. Namun sisi baiknya, kita bahkan tidak perlu mengatur constraint dari setiap tampilan, bahkan membuat custom button terasa lebih praktis dengan SwiftUI.
Penutup
Lagipula, terima kasih telah membaca artikel ini, semoga bermanfaat. Jangan lupa untuk terus belajar :-).
Berikut juga link untuk kode selengkapnya.
