Minggu lalu, saya melihat bahwa masyarakat berusaha untuk mentransfer pola pembangunan yang terbukti dari UIKit ke SwiftUI. Tapi saya yakin cara terbaik untuk menulis kode efisien menggunakan SwiftUI adalah melupakan semua tentang UIKit dan sepenuhnya mengubah pola pikir Anda dalam hal pengembangan antarmuka pengguna. Minggu ini saya akan berbicara tentang perbedaan utama antara pengembangan menggunakan UIKit dan SwiftUI.
Definisi perbedaan
UIKit adalah kerangka kerja yang didorong oleh peristiwa penting untuk membuat antarmuka pengguna untuk platform iOS. Ini berarti bahwa Anda harus menangani semua perubahan status selama acara seperti memuat tampilan, mengklik tombol, dll. Kerugian besar dari pendekatan ini adalah sulitnya menyinkronkan antarmuka pengguna dengan kondisinya. Segera setelah status berubah, Anda harus secara manual menambah / menghapus / menampilkan / menyembunyikan tampilan dan menyinkronkannya dengan keadaan aplikasi saat ini.
SwiftUI adalah kerangka kerja deklaratif untuk membuat antarmuka pengguna untuk semua platform Apple. Kata kunci dalam hal ini adalah deklaratif. Deklaratif berarti bahwa pengembang perlu menyatakan apa yang ingin ia capai, dan kerangka kerja akan mengurus ini. Kerangka kerja tahu cara terbaik untuk membuat antarmuka pengguna.
UI = f(state)
Di SwiftUI, antarmuka pengguna adalah fungsi dari kondisinya. Ini berarti bahwa setiap kali kondisi tampilan berubah, itu menceritakan properti tubuhnya dan menghasilkan tampilan baru. Perhatikan contoh berikut.
struct ContentView: View { @ObservedObject var store: Store var body: some View { Group { if store.isLoading { Text("Loading...") .font(.subheadline) } else { Image("photo") .font(.largeTitle) } } } }
Pada contoh di atas, ada tampilan yang menampilkan teks "Memuat ..." dan menampilkan gambar di akhir unduhan.
ObserverObject adalah keadaan tampilan ini, dan segera setelah itu berubah, SwiftUI menghitung ulang properti body dan memberikan tampilan baru. Selama pengembangan menggunakan UIKit, perlu untuk menyembunyikan / menampilkan elemen hierarki presentasi secara manual, tetapi di SwiftUI tidak perlu menambah / menghapus indikator pemuatan. Ada beberapa cara dalam SwiftUI untuk menggambarkan keadaan tampilan, untuk mempelajari lebih lanjut tentang mereka, lihat “
Pembungkus Properti di SwiftUI ”.
Sekarang kita akan melihat lebih dekat apa yang terjadi ketika kondisi tampilan berubah. SwiftUI memiliki jejak hierarki pandangan saat ini dan, segera setelah statusnya berubah, ia menghitung tampilan baru. SwiftUI menerapkan algoritma perbandingan untuk memahami perbedaan dan secara otomatis menambah / menghapus / memperbarui tampilan yang diperlukan. Secara default, SwiftUI menggunakan gambar transisi masuk / keluar standar untuk menampilkan / menyembunyikan tampilan, tetapi juga dimungkinkan untuk mengubah transisi secara manual ke animasi lain. Untuk mempelajari lebih lanjut tentang transisi dan animasi di SwiftUI, lihat artikel saya “
Animasi di SwiftUI ”.
Hirarki presentasi
Mari kita bicara tentang hierarki pandangan dan bagaimana SwiftUI benar-benar menampilkan struktur pandangan. Hal pertama yang ingin saya sebutkan adalah bahwa SwiftUI tidak menampilkan struktur tampilan dengan pemetaan satu-ke-satu. Dimungkinkan untuk menggunakan sebanyak mungkin wadah tampilan yang Anda suka, tetapi pada akhirnya, SwiftUI hanya menampilkan tampilan yang masuk akal untuk dirender. Ini berarti bahwa Anda dapat mengekstrak logikanya menjadi representasi kecil, dan kemudian menyusun dan menggunakannya kembali dalam aplikasi. Jangan khawatir, kinerja aplikasi dalam hal ini tidak akan menderita. Untuk mempelajari lebih lanjut tentang cara membuat tampilan di SwiftUI, lihat
artikel ini .
Cara terbaik untuk memahami hierarki representasi kompleks di SwiftUI adalah dengan menampilkan tipenya. SwiftUI menggunakan sistem tipe statis untuk menentukan perbedaan dengan cukup cepat. Pertama-tama, ia memeriksa jenis tampilan, dan kemudian memeriksa nilai-nilai komponen tampilan. Saya bukan penggemar menggunakan refleksi dalam kode kerja, tetapi sangat berguna dalam proses pembelajaran.
print(Mirror(reflecting: ContentView(store: .init()).body))
Dengan menggunakan struktur Mirror, Anda dapat menampilkan tipe tubuh ContentView yang sebenarnya dan mencari tahu cara kerja SwiftUI.
Kesimpulan
Minggu ini, kami mempelajari perbedaan utama antara UIKit dan SwiftUI dan memeriksa secara detail algoritma perbandingan di SwiftUI. Saya harap Anda menikmati artikel ini. Terima kasih telah membaca dan melihat Anda minggu depan!