Kloningan Instagram menggunakan SwiftUI dan GraphQL – ProfileView
Hari ini di bagian 3 dari Aplikasi klon Instagram dengan GraphQL kita akan masuk lebih dalam ke SwiftUI, membangun tampilan Profil.
Kita akan belajar menggunakan kembali struktur di SwiftUI dan membahas beberapa kontrol: VStack, HStack, GeometryReader, Teks, Tombol, Spacer, Gambar, Pembagi, dan lain-lain.
Pada artikel sebelumnya, kita telah mempelajari cara mendaftarkan pengguna dan cara login pengguna, dengan masing-masing UI di Aplikasi klon Instagram kita. Hari ini kita akan membuatnya jauh lebih baik.
Kencangkan sabuk pengaman Anda dan mari kita mulai!
Untuk pembelajaran yang lebih baik, unduh proyek Klon Instagram iOS dengan kode sumber.
Contents
- 1 Apakah Anda ingin memulai dengan cepat?
- 2 Apa yang sebenarnya akan kita buat
- 3 HStack, Vstack, Zstack apa?
- 4 Dapat digunakan kembali
- 5 Membuat Tampilan Profil kita
- 6 HStack kedua
- 7 Menambahkan Tombol Edit Profil dan Pembagi
- 8 Mengejek Timeline kita
- 9 Tampilan Bawah
- 10 Dan Akhirnya…
- 11 Kesimpulan
- 12 Referensi
- 13 Apa kelebihan SwiftUI?
- 14 Apa itu Hstack, Vstack dan Zstack?
- 15 Apa fitur terbaik SwiftUI?
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:
SwiftUI membuatnya sangat mudah untuk membuat antarmuka yang kompleks karena Anda dapat menggunakan kembali banyak komponen dengan sangat mudah dan langsung.
Satu-satunya hal yang harus kita pelajari adalah bagaimana cara membuat komponen-komponen yang dapat digunakan kembali tersebut. Satu tampilan itu sebenarnya adalah kombinasi dari beberapa tampilan yang terintegrasi ke dalam satu hasil akhir.
Daftar komponen yang disederhanakan adalah sebagai berikut:
Dimana:
- VStack
- Hstack
- Kontrol yang sebenarnya (tombol, pembagi, dll)
HStack, Vstack, Zstack apa?
SwiftUI membangun UI-nya dengan menyelaraskan tampilan secara vertikal menggunakan VStack (Vertical Stack) dan horizontal menggunakan HStack (Horizontal Stack) dan melapisi tampilan dengan Zstack (Z seperti pada z-index).
Setiap kali Anda membutuhkan satu tampilan di bawah tampilan lainnya, Anda harus menggunakan VStack.
Setiap kali Anda membutuhkan satu tampilan di samping tampilan lainnya, Anda harus menggunakan HStack.
Setiap kali Anda membutuhkan satu tampilan di atas tampilan lainnya, Anda harus menggunakan ZStack.
Karena tampilan utama kita akan terdiri dari banyak tampilan yang ditempatkan secara horizontal di bawah yang lain, kita akan memasukkan semuanya ke dalam VStack utama dan mulai dari sana, tetapi ada satu lagi yang perlu kita gunakan untuk memenuhi seluruh layar: GeometryReader.
Ini memungkinkan kita untuk merender segala sesuatu sebagai fungsi dari ukuran dan koordinat (GeometryReader).
Dapat digunakan kembali
Reusability adalah salah satu keunggulan SwiftUI, sehingga kita bisa membuat kontrol yang kompleks dan menggunakannya kembali di mana pun dibutuhkan.
Untuk Aplikasi ini, ada dua komponen utama yang akan kita gunakan kembali dalam tampilan yang berbeda: Timeline dan bilah bawah:
Untuk alasan ini, kita akan membuat kode UI tersebut secara terpisah agar lebih terorganisir. Semua kode UI lain yang spesifik untuk suatu tampilan dapat tetap berada di dalam file kode tampilan tersebut.
Jadi mari kita mulai…
Membuat Tampilan Profil kita
Tambahkan file SwiftUI baru dan beri nama ProfileView.swift.
Karena kita akan menyusun komponen-komponen untuk mengisi layar, mari kita mulai menambahkan GeometryReader agar kita bisa memastikan semua kontrol di dalamnya akan menggunakan ukuran dan koordinatnya:
struct ProfileView: View {
var body: some View {
GeometryReader { geometri dalam
}
}
}
Sekarang, tampilan kita akan dibangun ke dalam VStack utama yang akan berisi semua kontrol kita, jadi mari kita tambahkan juga
struct ProfileView: View {
var body: some View {
GeometryReader { geometri dalam
VStack {
}
}
}
}
Dan “baris” kontrol pertama kita adalah yang paling atas:
Apa yang terlihat seperti baris kontrol sederhana sebenarnya adalah beberapa kontrol:
- teks “nama pengguna”
- panah kecil yang mengarah ke bawah di sebelahnya
- Spacer untuk mengisi ruang antara panah kecil dan kontrol berikutnya
- tombol Hamburger di sebelah kanan
Kita akan menggunakan ikon untuk tombol-tombol tersebut, jadi pastikan Anda menemukan beberapa ikon gratis. Tempat yang bagus untuk menemukannya adalah Freepik.
Jadi, mari kita tambahkan HStack kita:
struct ProfileView: Tampilan {
var body: some View {
GeometryReader { geometri dalam
VStack{
HStack {
}
}
}
}
}
Dan di dalamnya, Teks pertama kita:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack{
HStack {
Text("nama pengguna")
}
}
}
}
}
Sejauh ini mungkin itu yang membawa Anda ke sini:
Baiklah. Ini adalah sebuah permulaan.
Mari kita ratakan ke sisi kiri dengan menambahkan
(alignment: .leading)
ke VStack kita:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack(alignment: .leading){
HStack {
Text("nama pengguna")
}
}
}
}
}
Kita juga dapat menambahkan beberapa properti Teks untuk membuatnya lebih konsisten dengan desain kita:
Untuk mengatur warnanya menjadi lightBlueColor yang didefinisikan di AppDelegate:
.foregroundColor (warnaBiru muda)
Untuk mengubah berat font:
.fontWeight(.semibold)
Dan terakhir untuk menambahkan padding (spasi) di bagian depan:
.padding(.leading, 10)
Dan kode Anda sekarang akan terlihat seperti ini:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
}
}
}
}
}
Dan UI Anda akan terlihat seperti ini:
Sekarang mari kita tambahkan tombol panah kecil.
Seperti yang telah Anda pelajari di Bagian 2 dari artikel ini, tambahkan gambar panah ke bawah untuk tombol kita, dan mari tambahkan tombol ke kode SwiftUI kita:
Button(action: {}){
}
Dan tambahkan gambar kita ke dalamnya:
Tombol (action: {}){
Image("panah ke bawah")
.mengubah ukuran ()
.frame(width: 10, height: 10)
}
Dan hanya untuk penyesuaian, mari kita tambahkan beberapa bantalan di bagian atas:
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Kode lengkap kita sekarang akan menjadi seperti ini:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
}
}
}
}
}
Dan UI kita:
Sekarang mari kita tambahkan tombol hamburger dengan cara yang sama:
Button(action: {}){
Image("menu")
.resizable()
.frame(width: 20, height: 20)
.padding()
Kode lengkap kami:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Tombol (action: {}){
Image("menu")
.mengubah ukuran ()
.frame(width: 20, height: 20)
} .padding()
}
}
}
}
}
Dan pandangan kita:
Seandainya saja ada sesuatu yang dapat kita letakkan di antara kedua tombol tersebut untuk mengambil semua ruang di antara keduanya dan menyelaraskan semuanya…
Spacer()
Sekarang tampilannya jadi lebih bagus!
Kode lengkap kita sejauh ini:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pengatur jarak ()
Tombol (action: {}) {
Image("menu")
.mengubah ukuran()
.frame(width: 20, height: 20)
} .padding()
}
}
}
}
}
Dan sekarang mari kita perbaiki ketinggian HStack tersebut dan berikan beberapa padding di sisi depan, dan kita siap menggunakannya:
.frame(height: 50) .padding(.leading, 10)
Kode lengkap:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pengatur jarak ()
Tombol (action: {}) {
Image("menu")
.mengubah ukuran()
.frame(width: 20, height: 20)
}.padding()
}.frame(height: 50)
.padding(.leading, 10)
}
}
}
}
Sekarang kita bisa memulai…
HStack kedua
Saat kita membuat segala sesuatu di dalam VStack utama, setiap kontrol baru yang kita tambahkan di luar HStack pertama akan secara otomatis diletakkan di bawahnya.
Jadi sekarang saatnya untuk melakukan HStack kedua dan membangun bagian kedua dari layar kita:
Ini juga akan menjadi sebuah HStack, yang berisi 4 VStack di dalamnya: satu untuk Gambar dan teks di bawahnya, dan 3 untuk angka-angka dengan teks di bawahnya.
Karena Anda mungkin sudah memahami konsepnya sekarang, saya akan memberikan kode lengkap untuk HStack baru ini:
HStack{
VStack{
Image("logo-sosial")
.resizable()
.frame(width: 90, height: 90)
.clipShape(Circle())
.shadow(radius: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Nama Anda")
.foregroundColor(WarnaBiru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor (warna biru muda)
.fontWeight(.bold)
Text("Publikasi")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Pengikut")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Mengikuti")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
} .frame(height: 100)
.padding(.leading, 10)
Dan kode lengkapnya adalah:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack(alignment: .leading){
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pengatur jarak ()
Tombol (action: {}) {
Image("menu")
.mengubah ukuran()
.frame(width: 20, height: 20)
} .padding()
}.frame(height: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-sosial")
.resizable()
.frame(width: 90, height: 90)
.clipShape(Circle())
.shadow(radius: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Nama Anda")
.foregroundColor(WarnaBiru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor (warna biru muda)
.fontWeight(.bold)
Text("Publikasi")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Pengikut")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Mengikuti")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
} .frame(height: 100)
.padding(.leading, 10)
}
}
}
}
Jadi, tampilan kita akan terlihat seperti ini:
Rapi!
Menambahkan Tombol Edit Profil dan Pembagi
Kita mungkin tergoda untuk berpikir bahwa tombol Edit Profile dan Divider di bawahnya harus berada di dalam VStack:
Tapi itu tidak benar-benar diperlukan karena seluruh View kita ada di dalam VStack utama kita, jadi kita bisa menambahkannya ke kode kita:
Button(action: {}){
Text("Edit Profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
.frame(width: 400)
.padding()
Pembatas ()
yang akan terlihat seperti ini:
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri dalam
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pengatur jarak ()
Tombol (action: {}) {
Image("menu")
.mengubah ukuran()
.frame(width: 20, height: 20)
} .padding()
}.frame(height: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-sosial")
.resizable()
.frame(width: 90, height: 90)
.clipShape(Circle())
.shadow(radius: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Nama Anda")
.foregroundColor(WarnaBiru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor (warna biru muda)
.fontWeight(.bold)
Text("Publikasi")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Pengikut")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Mengikuti")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
} .frame(height: 100)
.padding(.leading, 10)
Tombol (action: {}){
Text("Edit Profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Pembatas ()
}
}
}
}
dan UI kami:
Mengejek Timeline kita
Tampilan garis waktu kita akan digunakan di bagian lain dari aplikasi, sehingga masuk akal untuk memecahnya dalam file yang berbeda.
Hal ini dapat digunakan kembali dari dalam ProfileView kita sama saja, namun hal ini akan membuat segalanya lebih terorganisir ketika kita membagi kode.
Membuat file TimelineView.swift.
Ada banyak cara berbeda untuk menampilkan data di SwiftUI, tetapi saya memilih cara ini untuk Aplikasi saya:
- Tampilan Timeline kami adalah VStack dari LineView
- Setiap LineView adalah HStack yang terdiri dari 3 PreviewView
- Setiap PreviewView memiliki Gambar di dalamnya
Hal pertama yang akan saya lakukan adalah membuat sebuah struct untuk menampung data kita. Saya akan menamakannya struct Preview dan akan memiliki 2 parameter: sebuah id (tipe Int) untuk melakukan iterasi dan sebuah imageURL (tipe String) yang akan menyimpan URL untuk gambar yang akan saya berikan:
struct Preview {
var id: Int
let imageUrl: String
}
Seperti yang saya katakan, Anda dapat memilih cara lain untuk menampilkan data Anda, tetapi saya merasa ini sangat mudah untuk dipahami, jadi mari kita tambahkan struct untuk PreviewView kita terlebih dahulu.
Struct kita memiliki properti Preview yang akan saya atur nanti, tetapi akan menggunakan properti imageURL untuk merender gambar:
struct PreviewView: View {
biarkan pratinjau: Pratinjau
var body: beberapa View {
Gambar (pratinjau.imageUrl)
.mengubah ukuran ()
.frame(width: 136, height: 136)
}
}
dengan itu selesai, kita dapat menambahkan struct untuk LineView kita, yang menerima sebuah array dari 3 Preview untuk ditampilkan di baris.
Saya akan mengubahnya di masa depan untuk merefleksikan data yang sebenarnya, tetapi untuk saat ini, tidak apa-apa:
struct LineView: View {
let previewArray:[Preview]
var body: some View {
HStack (spasi: 2) {
PreviewView(preview: previewArray[0])
PreviewView(preview: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
Terakhir, kita dapat membuat sebuah Array dari objek Preview yang akan kita ulangi:
let previews:[Preview] = [
Pratinjau(id: 0, imageUrl: "1"),
Pratinjau(id: 1, imageUrl: "2"),
Pratinjau(id: 2, imageUrl: "3"),
Preview(id: 3, imageUrl: "4"),
Preview(id: 4, imageUrl: "5"),
Preview(id: 5, imageUrl: "6"),
Preview(id: 6, imageUrl: "7"),
Preview(id: 7, imageUrl: "8"),
Preview(id: 8, imageUrl: "9"),
Preview(id: 9, imageUrl: "10"),
Preview(id: 10, imageUrl: "11"),
Preview(id: 11, imageUrl: "12"),
Pratinjau(id: 12, imageUrl: "13")
]
Array ini memiliki 13 objek dan saya mereferensikan gambar yang akan saya gunakan dengan nama dari 1 hingga 13. Saya juga menyimpan gambar-gambar tersebut di folder Assets, tapi sekali lagi, saya akan mengubahnya di masa mendatang:
Sekarang setelah semuanya selesai, kita dapat mengulang-ulang Array kita dan membuat LinePreview dengan mengoper 3 objek pratinjau ke dalamnya.
Perhatikan bahwa saya mengoper objek yang sama, tetapi sekali lagi, ini bersifat sementara untuk tampilan dan akan diubah:
var body: beberapa View {
ScrollView {
VStack(alignment: .leading, spasi: 2){
ForEach(previews, id: \.id) { pratinjau dalam
LineView(previewArray: [pratinjau, pratinjau, pratinjau])
}
}
}
}
Jadi, kode lengkapnya adalah seperti ini:
struct TimelineView: View {
let previews:[Preview] = [
Pratinjau(id: 0, imageUrl: "1"),
Pratinjau(id: 1, imageUrl: "2"),
Preview(id: 2, imageUrl: "3"),
Preview(id: 3, imageUrl: "4"),
Preview(id: 4, imageUrl: "5"),
Preview(id: 5, imageUrl: "6"),
Preview(id: 6, imageUrl: "7"),
Preview(id: 7, imageUrl: "8"),
Preview(id: 8, imageUrl: "9"),
Preview(id: 9, imageUrl: "10"),
Preview(id: 10, imageUrl: "11"),
Preview(id: 11, imageUrl: "12"),
Pratinjau(id: 12, imageUrl: "13")
]
var body: some View {
ScrollView {
VStack(alignment: .leading, spasi: 2){
ForEach(pratinjau, id: \.id) { pratinjau dalam
LineView(previewArray: [pratinjau, pratinjau, pratinjau])
}
}
}
}
}
struct TimelineView_Previews: PreviewProvider {
static var pratinjau: beberapa View {
TimelineView()
}
}
struct Preview {
var id: Int
let imageUrl: String
}
struct LineView: View {
let previewArray:[Pratinjau]
var body: some View {
HStack (spasi: 2) {
PreviewView(preview: previewArray[0])
PreviewView(preview: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
struct PreviewView: Melihat {
biarkan pratinjau: Pratinjau
var body: beberapa View {
Gambar (pratinjau.imageUrl)
.mengubah ukuran ()
.frame(width: 136, height: 136)
}
}
Dan jika kita memanggilnya dari ProfileView.swift tepat di bawah Pembagi:
...
Tombol (action: {}) {
Text("Edit Profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
.frame(width: 400)
.padding()
Pembatas ()
TimelineView().padding(.leading, 10)
...
Kita juga dapat menambahkan pembatas lain tepat di bawahnya sehingga kita mendapatkan hasil akhir yang kita inginkan:
...
Tombol (action: {}){
Text("Edit Profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
.frame(width: 400)
.padding()
Pembatas ()
TimelineView().padding(.leading, 10)
Pembagi()
...
Bagaimana tampilannya?
Apakah sudah terlihat bagus?
Mari kita selesaikan dengan menambahkan…
Tampilan Bawah
Tampilan bawah akan menjadi file lain, karena kita akan menggunakannya di beberapa bagian aplikasi.
Buat file BottomView.swift Anda dan di dalamnya buat HStack (karena tombol akan berdampingan) dari 4 tombol dengan Spacer di antaranya. Jangan lupa ikon-ikonnya!
struct BottomView: View {
var body: beberapa View {
HStack {
Tombol (action: {}) {
Image("home")
.mengubah ukuran()
.frame(width: 30, height: 30)
} .padding()
Spacer()
Tombol (action: {}){
Gambar ("cari")
.mengubah ukuran()
.frame(width: 30, height: 30)
.padding()
Spacer()
Tombol (action: {}){
Gambar ("tombol tambah")
.mengubah ukuran()
.frame(width: 30, height: 30)
.padding()
Spacer()
Tombol (action: {}){
Image("hati")
.mengubah ukuran()
.frame(width: 30, height: 30)
.padding()
Spacer()
Tombol (action: {}){
Gambar ("pengguna")
.mengubah ukuran()
.frame(width: 30, height: 30)
}.padding()
}.frame(height: 35)
}
}
Ini sangat mudah! Mari kita integrasikan ke dalam ProfileView.swift, tepat di bawah Divider terakhir kita:
...
Pembagi()
TimelineView().padding(.leading, 10)
Pembagi()
BottomView()
...
Jadi kode lengkap dari ProfileView adalah:
import SwiftUI
struct ProfileView: View {
var body: beberapa View {
GeometryReader { geometri in
VStack (perataan: .leading) {
HStack {
Text("nama pengguna")
.foregroundColor (warna biru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
Tombol (action: {}){
Image("panah ke bawah")
.resizable()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pengatur jarak ()
Tombol (action: {}) {
Image("menu")
.mengubah ukuran()
.frame(width: 20, height: 20)
} .padding()
}.frame(height: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-sosial")
.resizable()
.frame(width: 90, height: 90)
.clipShape(Circle())
.shadow(radius: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Nama Anda")
.foregroundColor(WarnaBiru muda)
.fontWeight(.semibold)
.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor (warna biru muda)
.fontWeight(.bold)
Text("Publikasi")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Pengikut")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Mengikuti")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
} .frame(height: 100)
.padding(.leading, 10)
Tombol (action: {}){
Text("Edit Profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Pembatas ()
TimelineView().padding(.leading, 10)
Pembagi()
BottomView()
}
}
}
}
struct ProfileView_Previews: PreviewProvider {
static var pratinjau: beberapa View {
ProfileView()
}
}
Dan Akhirnya…
Kita memiliki ProfileView yang lengkap:
Sekarang, betapa mengagumkannya itu!
Kesimpulan
Hari ini Anda telah mempelajari cara meniru Tampilan Profil ke dalam Aplikasi Anda. Ini masih hanya sebuah tiruan, tetapi kita akan memberikan beberapa fungsionalitas dari waktu ke waktu.
Anda telah mempelajari cara membuat dan menggunakan kembali komponen di SwiftUI dan bagaimana menggunakannya dengan indah untuk membuat tampilan yang kompleks. Luar biasa!
Kami akan membuat beberapa tampilan lain di artikel berikutnya!
Tetap disini!
Referensi
- Bagian 1 dari seri ini adalah artikel Instagram Clone.
- Bagian 2 adalah artikel Klon Instagram Cepat.
- Bagian 3 adalah artikel Profil Klon Instagram.
- Bagian 4 adalah artikel Tampilan Utama Insta Clone.
- Unduh proyek Instagram Clone iOS dengan kode sumber dan mulailah menggunakan Back4App.
Daftar sekarang ke Back4App dan mulai membuat Aplikasi Klon Instagram Anda.
Apa kelebihan SwiftUI?
Jika Anda ingin membuat tiruan seperti aplikasi Instagram, SwiftUI akan melakukan keajaibannya.
Membantu dalam membangun antarmuka yang kompleks
Menggunakan kembali komponen
Proses untuk menggunakan kembali antarmuka sederhana dan mudah
Anda seharusnya hanya memiliki pengetahuan untuk menggunakan kembali komponen-komponen tersebut secara bersamaan.
Apa itu Hstack, Vstack dan Zstack?
Nama-nama ini terhubung karena representasi AS. SwiftUI membangun UI-nya dengan pola berikut.
-UI dibangun secara vertikal dengan menggunakan Vertical Stack
-UI dibangun secara horizontal dengan menggunakan horizontal stack
-Tampilan yang tumpang tindih dibangun dengan ZStack
Apa fitur terbaik SwiftUI?
Fitur terbaik SwiftUI adalah dapat digunakan kembali. Anda dapat menggunakan kembali komponen-komponen tersebut berulang kali untuk membuat tampilan. Fitur ini berlaku untuk semua aplikasi. Anda perlu tahu cara menggunakan komponen-komponen ini.
