#30DaysOfSwiftUI Day 2: Understanding the Fundamentals of View in SwiftUI

Pada hari kedua dari challenge #30DaysOfSwiftUI, kita akan mempelajari konsep dasar tentang View dalam SwiftUI. View merupakan elemen terpenting dalam pembuatan antarmuka pengguna (UI) dalam SwiftUI.

Apa yang Akan Kita Pelajari?

• Memahami Konsep View.
• Menjelajahi Berbagai Views Dasar dalam SwiftUI
• Memahami bagaimana menggabungkan View menggunakan Stacks dan Modifier.

A. Memahami Konsep View

View adalah elemen dasar dalam pemabangunan antarmuka pengguna (UI) dalam SwiftUI. Setiap komponen visual dalam aplikasi, seperti teks, gambar, tombol, ataupun form adalah sebuah View. Berikut adalah beberapa poin yang perlu dipahami tentang konsep View dalam SwiftUI:

• Representasi Visual: Setiap View merepresentasikan bagian dari antarmuka pengguna yang akan ditampilkan kepada pengguna.
• Modularitas: View dirancangan untuk bersifat modular, yang berarti kita dapat menggabungkan dan menyusun View dengan cara yang fleksibel untuk membentuk tampilan yang kompleks.
• Reaktif: View dalam SwiftUI bersifat reaktif, yang berarti mereka secara otomatis merespons perubahan data atau kondisi yang terjadi dalam aplikasi.
• Hierarki: View dapaat disusun secara hierarki, di mana satu View dapat menjadi bagia dari View lainnya. Hierarki View memungkinkan kita untuk membangun tampilan yang kompleks dengan cara tersetruktur dan terorganisir.
• Kustomisasi: SwiftUI menyediakan berbagai jenis View yang dapat disesuaikan dengan berbagai cara, mulai dari mengubah penampilan dan gaya hingga menambahkan interaktivitas dan perilaku kustom.

B. Menjelajahi Berbagai View Dasar dalam SwiftUI

Text

Text adalah View yang digunakan untuk menampilkan teks dalam antarmuka aplikasi. Kita dapat menentukan teks yang akan ditampilkan dan menyesuaikan tampilannya menggunakan modifier.

Text("Hello, SwiftUI!")
   .font(.title)
   .foregroundColor(.blue)
   .padding()
   .background(Color.yellow)
   .cornerRadius(10)

Pada contoh di atas, kita menambahkan modifier untuk menggunakan System Fonts bawaaan SwiftUI dengan .font(.title) , selain itu terdapat kode .background(Color.yellow) untuk menambahkan background dari teks.

Image

Image adalah View yang digunakan untuk menampilkan gambar dalam antarmuka pengguna. Kita dapat menentukan gambar yang ingin ditampilkan dan menyesuaikan tampilannya menggunakan modifier. Untuk menampilkan image dari lokal, kita terlebih dahulu harus menambahkan image ke file Assets.xcassets dengan cara drag dan drop gambar ke file ini, sehingga akan menjadi seperti contoh berikut:

Image("cat-meme")
   .resizable()
   .aspectRatio(contentMode: .fit)
   .frame(height: 200)

• resizable() digunakan untuk memberikan akses untuk mengubah ukuran gambar.
• .aspectRatio(contentMode: .fit) untuk menentukan aspect ratio dari gambar untuk menjadi fit dengan frame.
• .frame(height: 200) untuk mengubah ukuran tinggi gambar menjadi 200 dengan lebar yang menyesuaikan ukuran fit dari bawaaan gambar.

Button

Button adalah View yang digunakan untuk membuat tombol yang interaktif dalam antarmuka pengguna. Kita dapat menetukan teks atau konten tombol serta menambahkan aksi yang akan dilakukan ketika tombol ditekan.

Button(action: {
   print("Button Tap Me Tapped")
}) {
   Text("Tap Me")
   .font(.headline)
   .foregroundColor(.white)
   .padding()
   .background(Color.blue)
   .cornerRadius(10)
}

Pada contoh di atas kita membuat View Button dengan aksi me-print Button Tap Me Tapped ke terminal ketika button diklik.

C. Memahami Bagaimana Menggabungkan View menggunakan Stacks dan Modifier

Stacks dalam SwiftUI merupakan tata letak yang digunakan untuk menyusun View secara vertikal (VStack), horizontal (HStack), atau berlapis (ZStack). Dengan menggunakan Stacks dapat memungkinkan kita untuk menggabungkan View secara terstruktur. Berikut contoh penggunaan VStack untuk menggabungkan View secara vertikal:

VStack(spacing: 10) {
   Text("Title")
      .font(.title)
   Image("cat-meme")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(height: 150)
   Button(action: {
      print("Tapped")
   }) {
      Text("Tap Me")
   }
}

Pada kode tersebut kita membuat View yang digabungkan secara vertikal. Selain itu kita juga menambahkan spacing/padding sebesar 10 untuk antar View yang terdapat didalam Stacks itu.

Kesimpulan

• Setiap komponen visual dalam aplikasi, seperti teks, gambar, tombol, atau formulir, adalah View.
• Kita dapat menyesuaikan tampilan dan perilaku Views menggunakan modifiers seperti font, warna, dan latar belakang.
• Dengan menggunakan Stacks dan modifiers, kita dapat menggabungkan View secara terstruktur dan membuat tampilan yang kompleks dalam aplikasi SwiftUI.

GitHub - hutomosaktikartiko/Learn30DaysOfSwiftUI