Aplikasi Kloning Instagram menggunakan SwiftUI dan GraphQL – HomeView

Hari ini di bagian 4 dari Aplikasi kloningan Instagram dengan GraphQL, kita akan melanjutkan mempelajari beberapa SwiftUI, membangun tampilan Home.

Pada artikel sebelumnya, kita telah mempelajari cara mendaftarkan pengguna dan cara login pengguna serta membuat tampilan Profil dengan masing-masing UI di Aplikasi kloningan Instagram. Hari ini kita akan menggunakan kembali beberapa kode tersebut dan membuat sesuatu yang mirip dengan UIScrollView dengan banyak konten.

Kencangkan sabuk pengaman Anda dan mari kita mulai!

Untuk pembelajaran yang lebih baik, unduh proyek Klon Instagram iOS dengan kode sumber.

Apakah Anda ingin memulai dengan cepat?

Kloning Aplikasi ini dari Hub kami dan mulai gunakan tanpa kerepotan!

Apa yang sebenarnya akan kita buat

Kita akan membuat tampilan berikut ini:

Seperti yang telah kita lihat sebelumnya, SwiftUI membuatnya sangat mudah untuk membuat tampilan yang kompleks karena Anda dapat menggunakan ulang banyak komponen dengan sangat mudah. Kata kunci di sini adalah “menggunakan kembali”.

Ingatkah Anda bahwa kita sudah membuat kode untuk bilah bawah itu? Kita akan menggunakannya kembali untuk ini. Segala sesuatu yang lain adalah baru.

Saya tidak akan membahas VStacks dan HStacks lagi, jadi jika Anda melewatkan bagian itu, periksa kembali di sini.

Komponen UI kita

Layar ini pada dasarnya terdiri dari empat komponen:

• Bilah atas (dengan kamera, string Back4Gram, ikon rumah, dan ikon pesawat kertas)
• Bilah riwayat (dengan ikon-ikon untuk riwayat)
• Tampilan Detail Garis Waktu (dengan postingan yang sebenarnya)
• Bilah bawah (yang akan kita gunakan kembali)

Mari kita mulai membangunnya!

Bilah Atas

Bilah atas terdiri atas lima komponen:

• Tombol kamera
• String Back4Gram
• Spacer
• Tombol rumah
• Tombol bidang kertas

Tambahkan ikon untuk tombol-tombol yang telah Anda pelajari, dan mari kita mulai membuat kode.

Buat file HomeView.swift Anda dan mari kita tambahkan GeometryReader sehingga kita dapat mengubah ukuran semuanya dengan baik:

Dan sama seperti tutorial sebelumnya, mari kita tambahkan VStack karena semuanya akan ditampilkan dalam sumbu vertikal:

Bilah atas kita akan menjadi gabungan komponen yang disejajarkan secara horizontal, jadi mari tambahkan HStack untuk membuatnya:

Dan terakhir, tambahkan kontrol yang akan kita gunakan:

Bagaimana tampilannya?

Kita akan pergi ke banyak tempat!

Sekarang mari kita bahas sedikit tentang

Bilah Sejarah

Bilah riwayat itu sendiri merupakan komponen yang kompleks. Komponen ini mirip seperti UIScrollView dari UIKit lama, namun di dalamnya terdapat kontrol yang terdiri dari gambar dan teks di bawahnya (alias VStack). Mari kita buat struktur tersebut:

Menempatkannya ke dalam VStack utama kita semudah menambahkan ScrollView. Dan untuk membuatnya lebih bagus, mari kita buat agar hanya bergulir secara horizontal dan menyembunyikan indikator gulir:

dan terakhir tambahkan ke VStack utama kita:

Memeriksa tampilan:

Sekarang, mari kita lanjutkan dan tambahkan terlebih dahulu…

Bilah Bawah

Sekarang mari kita nikmati semua kegunaannya. Cukup tambahkan dari file BottomBar.swift ke dalam kode kita:

Dan kode lengkap kita:

Bukankah itu mudah? Bagaimana tampilannya?

Sweeft!

Menambahkan beberapa Kompleksitas

Bagian yang paling kompleks dari View ini adalah tampilan Timeline Detail.

Agar tetap konsisten dengan apa yang kita lakukan di TimelineView, mari kita buat file baru bernama TimlineDetailView.swift dan di dalamnya kita buat sebuah struct baru yang akan menyimpan data seperti di TimelineView.

Ingat kita telah memiliki struktur Pratinjau yang dideklarasikan di TimelineView, jadi mari kita gunakan kembali struktur tersebut.

Struct akan menerima Preview sehingga kita dapat mengambil imageUrl nantinya:

Setelah selesai, mari kita tambahkan tampilan itu sendiri:

Konten utama juga akan berada di dalam VStack:

Dan VStack tersebut akan memiliki empat komponen:

• Sebuah HStack dengan logo, teks, dan tombol tiga titik
• Gambar postingan
• Sebuah HStack dengan tombol hati, tombol komentar, tombol pesawat kertas, dan tombol bendera
• Sebuah VStack yang berisi teks “Disukai oleh…” dan “Lihat semua komentar””

Jadi mari kita mulai dengan menambahkan HStack pertama:

Dan menambahkan kontrol di dalamnya:

Kemudian Gambar:

HStack kedua kami dengan semua tombol:

Dan kontrolnya:

Dan yang terakhir adalah teks kami VStack:

Sekarang, di dalam TimelineDetailView kita, mari kita meng-hardcode beberapa Preview:

Dan terakhir, lakukan perulangan dengan menambahkan PreviewDetailView ke ScrollView:

Terakhir, mari kita tambahkan ke HomeView:

Terakhir, mari kita lihat hasilnya:

Betapa kerennya itu!

Kesimpulan

Penggunaan ulang adalah kunci utama dalam SwiftUI.

Hari ini Anda telah mempelajari cara menggunakan kembali BottomView dan struktur Preview dari artikel kita sebelumnya.

Sudah waktunya untuk beberapa fungsionalitas dan saya tidak sabar menunggunya.

Nantikan terus!

Referensi

• Bagian 1 dari seri ini adalah Aplikasi Klon Instagram.
• Bagian 2 adalah Klon Instagram Swift.
• Bagian 3 adalah Profil Instagram.
• Bagian 4 adalah Tampilan Beranda Instagram.
• Unduh proyek Instagram Clone iOS dengan kode sumber dan mulailah menggunakan Back4App.

Daftar sekarang ke Back4App dan mulai buat Aplikasi Klon Instagram Anda.