# SwiftUI: Membangun Antarmuka Modern untuk iOS

> Panduan lengkap membangun antarmuka modern dengan SwiftUI: sintaks deklaratif, komponen, animasi, dan praktik terbaik untuk iOS 18.

- Published: 2026-01-05
- Updated: 2026-04-02
- Author: Anthony Fillion-Maillet
- Tags: swiftui, ios, swift, ui, apple
- Reading time: 12 min

---

SwiftUI telah mengubah cara pengembangan antarmuka di seluruh platform Apple. Dengan sintaks deklaratif dan integrasi native, framework ini memungkinkan pembuatan aplikasi yang elegan dengan jumlah kode yang jauh lebih sedikit. iOS 18 membawa peningkatan performa yang signifikan beserta kemampuan-kemampuan baru.

> **Why SwiftUI in 2026?**
>
> SwiftUI kini telah matang di iOS 18, menawarkan rendering yang dioptimalkan, manajemen memori yang lebih baik, dan integrasi UIKit yang disederhanakan. Framework ini menjadi standar untuk aplikasi iOS baru.

## Memahami Paradigma Deklaratif

Sebelum menulis kode, penting untuk memahami apa yang membuat SwiftUI berbeda. Dengan UIKit (framework yang lebih lama), pengembang harus memberitahu iOS **bagaimana cara** membangun antarmuka langkah demi langkah: "buat label, tempatkan di sini, ubah warnanya saat pengguna mengklik". Ini adalah paradigma **imperatif**.

SwiftUI bekerja secara berbeda: pengembang mendeskripsikan **apa** yang ingin ditampilkan, dan framework menangani sisanya. Perbedaannya seperti navigasi GPS: pendekatan imperatif memberikan petunjuk belokan satu per satu, sedangkan pendekatan deklaratif cukup menyebutkan tujuan akhir.

### View Pertama

Dalam SwiftUI, setiap elemen antarmuka adalah sebuah `View`. View merupakan struct yang mendeskripsikan apa yang harus muncul di layar. Berikut adalah layar pertama dengan judul, subjudul, dan tombol:

```swift
// ContentView.swift
import SwiftUI

// Each screen is a struct that implements the View protocol
struct ContentView: View {

    // The "body" property describes what the view displays
    // "some View" means "a type of View, but Swift figures it out automatically"
    var body: some View {

        // VStack = "Vertical Stack": stacks elements vertically
        // spacing: 20 = 20 points of space between each element
        VStack(spacing: 20) {

            // A simple text with style modifiers
            Text("Welcome to SharpSkill")
                .font(.largeTitle)      // Large title font
                .fontWeight(.bold)      // Bold text

            Text("Prepare for your iOS interviews")
                .font(.subheadline)     // Smaller font
                .foregroundColor(.secondary)  // Gray secondary color

            // Button with an action (closure) and a label
            Button("Get Started") {
                print("Button tapped!")
            }
            .buttonStyle(.borderedProminent)  // Filled blue button style
        }
        .padding()  // Adds margins around the VStack
    }
}
```

Perhatikan strukturnya: pertama dideklarasikan apa yang dibutuhkan (teks, tombol), lalu elemen-elemen disusun secara vertikal (VStack), dan gaya diterapkan melalui **modifier** (`.font()`, `.padding()`).

> **Poin utama**: Dalam SwiftUI, objek antarmuka tidak "dibuat" secara manual — melainkan **dideskripsikan** antarmuka yang diinginkan. SwiftUI yang menangani pembuatan, pembaruan, dan penghapusan elemen yang sebenarnya.

### Modifier: Mentransformasi View

Modifier adalah metode yang dirantai setelah sebuah view untuk mentransformasinya. Anggap saja seperti filter yang diterapkan satu per satu. **Urutan sangat penting** karena setiap modifier membuat view baru yang membungkus view sebelumnya.

Berikut contoh yang menunjukkan mengapa urutan itu krusial:

```swift
// ModifiersOrder.swift

// Example 1: padding THEN background
Text("SwiftUI")
    .padding()           // 1. Adds 16pt of space around the text
    .background(.blue)   // 2. Blue background covers text + padding
    .foregroundColor(.white)
// Result: white text on blue rectangle with margins

// Example 2: background THEN padding (reversed order!)
Text("SwiftUI")
    .background(.blue)   // 1. Tight blue background around text only
    .padding()           // 2. Transparent padding around blue background
    .foregroundColor(.white)
// Result: white text on small blue rectangle, surrounded by empty space
```

Perbedaannya terletak pada: kasus pertama, padding berada "di dalam" background. Pada kasus kedua, padding berada "di luar". Detail yang halus namun sangat penting untuk menguasai tata letak.

## Mengorganisasi Antarmuka dengan Stacks

SwiftUI menyediakan tiga kontainer utama untuk mengorganisasi view. Bayangkan ketiganya sebagai kotak yang mengatur kontennya dengan cara berbeda.

### VStack, HStack, dan ZStack

- **VStack** (Vertical Stack): menyusun elemen dari atas ke bawah
- **HStack** (Horizontal Stack): menyusun elemen dari kiri ke kanan
- **ZStack** (Z-axis Stack): menumpuk elemen satu di atas yang lain

Mari membangun kartu profil pengguna yang menggabungkan ketiga stack. Tujuannya: menampilkan foto dengan badge verifikasi, nama, dan peran pengguna.

```swift
// ProfileCard.swift

struct ProfileCard: View {
    var body: some View {
        // Main HStack: photo on left, info on right
        HStack(spacing: 16) {

            // ZStack to overlay the badge on the photo
            ZStack(alignment: .bottomTrailing) {
                // Profile image (circle)
                Image("avatar")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .clipShape(Circle())

                // Green "verified" badge at bottom right
                Image(systemName: "checkmark.circle.fill")
                    .foregroundColor(.green)
                    .background(Circle().fill(.white))  // White circle behind
            }

            // VStack to stack name and role vertically
            VStack(alignment: .leading, spacing: 4) {
                Text("Marie Dupont")
                    .font(.headline)

                Text("iOS Developer")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            // Spacer pushes everything to the left
            Spacer()

            // Chevron on right indicates it's tappable
            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(12)
    }
}
```

Trik utamanya adalah `Spacer()`: elemen tak terlihat yang mengisi seluruh ruang yang tersedia. Tanpa Spacer, elemen-elemen akan berada di tengah. Dengan Spacer, konten didorong ke kiri dan chevron tetap menempel di kanan.

> **Xcode Tip**
>
> Gunakan `⌘ + click` pada view apa pun di Xcode untuk membuka visual inspector. Modifier dapat ditambahkan tanpa perlu mengetik kode secara manual.

## Mengelola State dengan @State dan @Binding

Manajemen state adalah inti dari SwiftUI. State adalah data apa pun yang dapat berubah dan harus memperbarui antarmuka. Ketika state berubah, SwiftUI secara otomatis menghitung ulang view yang terpengaruh.

### @State: State Lokal sebuah View

`@State` adalah property wrapper yang memberitahu SwiftUI: "pantau variabel ini, dan segarkan view ketika nilainya berubah". Cocok digunakan untuk state lokal dari satu view.

Mari membuat penghitung interaktif untuk memahami mekanismenya:

```swift
// CounterView.swift

struct CounterView: View {
    // @State creates a "source of truth" for this view
    // private because state shouldn't be modified from outside
    @State private var count = 0

    var body: some View {
        VStack(spacing: 30) {
            // This Text updates automatically when count changes
            Text("\(count)")
                .font(.system(size: 72, weight: .bold))

            HStack(spacing: 40) {
                // Decrement button
                Button(action: {
                    count -= 1  // Modifies state → view refreshes
                }) {
                    Image(systemName: "minus.circle.fill")
                        .font(.largeTitle)
                }

                // Increment button
                Button(action: {
                    count += 1
                }) {
                    Image(systemName: "plus.circle.fill")
                        .font(.largeTitle)
                }
            }
        }
    }
}
```

Saat tombol ditekan, nilai `count` berubah. SwiftUI mendeteksi perubahan ini dan mengeksekusi ulang `body` untuk memperbarui tampilan. Tidak perlu memperbarui label secara manual — semuanya otomatis.

### @Binding: Berbagi State Antar View

Terkadang view anak perlu memodifikasi state milik view induk. Di sinilah `@Binding` berperan: membuat koneksi dua arah ke `@State` yang sudah ada.

Berikut contoh konkret: field input nama pengguna dengan validasi real-time.

```swift
// UsernameValidation.swift

// Parent view: owns the state
struct SignupForm: View {
    @State private var username = ""       // Source of truth
    @State private var isValid = false     // Validation state

    var body: some View {
        VStack(spacing: 20) {
            // We pass BINDINGS (with $) to the child view
            UsernameField(username: $username, isValid: $isValid)

            Button("Create Account") {
                // Submit the form
            }
            .disabled(!isValid)  // Disabled if invalid
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}
```

View anak menerima binding dan dapat memodifikasinya:

```swift
// Child view: receives and modifies state via @Binding
struct UsernameField: View {
    @Binding var username: String   // Connection to parent's @State
    @Binding var isValid: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TextField("Username", text: $username)
                .textFieldStyle(.roundedBorder)
                .onChange(of: username) { oldValue, newValue in
                    // Validation: at least 3 characters
                    isValid = newValue.count >= 3
                }

            // Visual feedback
            HStack {
                Image(systemName: isValid ? "checkmark.circle" : "xmark.circle")
                Text("Minimum 3 characters")
            }
            .font(.caption)
            .foregroundColor(isValid ? .green : .red)
        }
    }
}
```

Ketika pengguna mengetik di TextField, `username` dimodifikasi melalui binding. View induk melihat perubahan ini dan dapat menggunakannya. Ini adalah komunikasi dua arah yang bersih.

> **Warning**
>
> Gunakan `@State` hanya untuk state sederhana dan lokal. Untuk data yang dibagikan antar beberapa layar atau logika yang kompleks, disarankan menggunakan `@Observable` (iOS 17+) atau pola MVVM.

## Menampilkan Daftar Dinamis

Daftar ada di mana-mana dalam aplikasi mobile. SwiftUI menyediakan `List` untuk menampilkan koleksi data dengan gaya native iOS (separator, aksi geser, dan sebagainya).

### Membuat Daftar Sederhana

Untuk menampilkan daftar, diperlukan dua hal: data dan cara mengidentifikasinya. Protokol `Identifiable` memungkinkan SwiftUI mengetahui view mana yang sesuai dengan data mana.

Mari mulai dengan mendefinisikan model data:

```swift
// Models/Interview.swift

// Identifiable lets SwiftUI track each element
struct Interview: Identifiable {
    let id = UUID()           // Auto-generated unique identifier
    let technology: String
    let difficulty: String
    let questionCount: Int
}
```

Sekarang mari buat daftarnya. Idenya adalah melakukan iterasi pada data dengan `ForEach` dan membuat baris untuk setiap elemen:

```swift
// InterviewListView.swift

struct InterviewListView: View {
    // Data to display (in reality, this would come from an API)
    @State private var interviews = [
        Interview(technology: "iOS", difficulty: "Intermediate", questionCount: 25),
        Interview(technology: "Android", difficulty: "Advanced", questionCount: 30),
        Interview(technology: "React", difficulty: "Beginner", questionCount: 20)
    ]

    var body: some View {
        // NavigationStack enables the navigation bar
        NavigationStack {
            List {
                // ForEach iterates over each interview
                // Thanks to Identifiable, no need to specify id:
                ForEach(interviews) { interview in
                    InterviewRow(interview: interview)
                }
            }
            .navigationTitle("My Interviews")
        }
    }
}
```

Dan berikut view untuk setiap baris, diekstrak ke dalam komponen terpisah agar lebih mudah dibaca:

```swift
// InterviewRow.swift

struct InterviewRow: View {
    let interview: Interview

    var body: some View {
        HStack {
            // Left column: title and subtitle
            VStack(alignment: .leading, spacing: 4) {
                Text(interview.technology)
                    .font(.headline)

                Text(interview.difficulty)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            Spacer()

            // Badge with question count
            Text("\(interview.questionCount) Q")
                .font(.caption)
                .fontWeight(.medium)
                .padding(.horizontal, 8)
                .padding(.vertical, 4)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(8)
        }
        .padding(.vertical, 4)
    }
}
```

Mengekstrak `InterviewRow` ke dalam struct terpisah membuat kode lebih mudah dibaca dan dapat digunakan kembali. Ini adalah praktik terbaik SwiftUI.

### Menambahkan Aksi: Hapus dan Urutkan Ulang

Daftar iOS secara native mendukung penghapusan (geser ke kiri) dan pengurutan ulang (seret dan lepas). SwiftUI membuatnya sangat mudah dengan `.onDelete` dan `.onMove`:

```swift
// InterviewListView.swift (enhanced version)

struct InterviewListView: View {
    @State private var interviews = [/* ... data ... */]

    var body: some View {
        NavigationStack {
            List {
                ForEach(interviews) { interview in
                    InterviewRow(interview: interview)
                }
                // Swipe to delete
                .onDelete(perform: deleteInterview)
                // Drag and drop to reorder
                .onMove(perform: moveInterview)
            }
            .navigationTitle("My Interviews")
            .toolbar {
                // "Edit" button that activates edit mode
                EditButton()
            }
        }
    }

    // Deletes elements at specified indices
    private func deleteInterview(at offsets: IndexSet) {
        interviews.remove(atOffsets: offsets)
    }

    // Moves elements from one position to another
    private func moveInterview(from source: IndexSet, to destination: Int) {
        interviews.move(fromOffsets: source, toOffset: destination)
    }
}
```

Hanya dengan 4 baris kode tambahan (`.onDelete`, `.onMove`, `EditButton`, dan dua fungsi), daftar menjadi sepenuhnya interaktif. Inilah keunggulan SwiftUI.

## Menganimasi Antarmuka

SwiftUI unggul dalam hal animasi. Berbeda dengan UIKit yang memerlukan banyak kode untuk animasi, di sini semuanya bersifat deklaratif: cukup deskripsikan state akhir dan SwiftUI yang menganimasi transisinya.

### Animasi Implisit dengan withAnimation

Cara paling sederhana untuk membuat animasi adalah membungkus perubahan state dalam `withAnimation`. SwiftUI mendeteksi apa yang berubah dan secara otomatis menganimasi properti visual yang terpengaruh.

```swift
// AnimatedCard.swift

struct AnimatedCard: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 20)
                .fill(.blue)
                // Dimensions change based on state
                .frame(
                    width: isExpanded ? 300 : 150,
                    height: isExpanded ? 200 : 100
                )

            Button(isExpanded ? "Collapse" : "Expand") {
                // withAnimation animates ALL visual changes
                // resulting from this state change
                withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) {
                    isExpanded.toggle()
                }
            }
            .padding(.top)
        }
    }
}
```

Saat tombol ditekan, `isExpanded` berubah. Berkat `withAnimation`, perubahan ukuran persegi panjang dianimasi dengan efek pegas. Tidak perlu menentukan apa yang harus dianimasi — SwiftUI yang menanganinya.

### Transition: Menganimasi Kemunculan dan Penghilangan

Transition menentukan bagaimana sebuah view muncul atau menghilang. Secara default, efeknya adalah fade (`opacity`), tetapi dapat dikustomisasi:

```swift
// TransitionDemo.swift

struct TransitionDemo: View {
    @State private var showDetails = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Details") {
                withAnimation(.easeInOut(duration: 0.3)) {
                    showDetails.toggle()
                }
            }

            // This view appears/disappears with a transition
            if showDetails {
                DetailCard()
                    // Asymmetric transition: different for entry and exit
                    .transition(
                        .asymmetric(
                            insertion: .scale.combined(with: .opacity),  // Entry: zoom + fade
                            removal: .slide                               // Exit: slide
                        )
                    )
            }
        }
    }
}

struct DetailCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Interview Details")
                .font(.headline)
            Text("25 questions • 45 minutes")
                .foregroundColor(.secondary)
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(16)
    }
}
```

Di sini, kartu muncul dengan efek zoom dari tengah (scale + opacity) dan menghilang dengan bergeser ke samping (slide). Mikroanimasi seperti ini membuat antarmuka terasa hidup dan profesional.

> **Performance**
>
> SwiftUI secara otomatis mengoptimalkan animasi. Gunakan `.spring()` untuk nuansa yang natural, dan hindari animasi yang terlalu panjang (> 0,5 detik) yang dapat mengganggu pengguna.

## Memuat Data Asinkron

Dalam aplikasi nyata, data sering kali berasal dari API. Swift Concurrency (async/await) terintegrasi sempurna dengan SwiftUI melalui modifier `.task`.

### Pola Loading / Error / Success

Berikut pola standar untuk menampilkan data dari API. Tiga state yang ditangani: loading, error, dan success.

```swift
// AsyncDataView.swift

struct AsyncDataView: View {
    @State private var questions: [Question] = []
    @State private var isLoading = true
    @State private var errorMessage: String?

    var body: some View {
        Group {
            if isLoading {
                // State: loading in progress
                ProgressView("Loading...")

            } else if let error = errorMessage {
                // State: error
                VStack(spacing: 16) {
                    Image(systemName: "exclamationmark.triangle")
                        .font(.largeTitle)
                        .foregroundColor(.orange)
                    Text(error)
                    Button("Retry") {
                        Task { await loadQuestions() }
                    }
                }

            } else {
                // State: success, display data
                List(questions) { question in
                    Text(question.title)
                }
            }
        }
        // .task runs automatically when the view appears
        .task {
            await loadQuestions()
        }
        // Pull-to-refresh
        .refreshable {
            await loadQuestions()
        }
    }

    private func loadQuestions() async {
        isLoading = true
        errorMessage = nil

        do {
            // Async API call
            questions = try await QuestionService.shared.fetchQuestions()
        } catch {
            errorMessage = "Unable to load questions"
        }

        isLoading = false
    }
}
```

Modifier `.task` sangat penting: menjalankan tugas asinkron saat view muncul dan secara otomatis membatalkannya saat view menghilang. Kebocoran memori tidak mungkin terjadi.

## Kesimpulan

SwiftUI telah menjadi bagian yang tidak terpisahkan dari pengembangan iOS modern. Dengan hadirnya iOS 18, framework ini mencapai tingkat kematangan yang membuatnya sangat cocok untuk aplikasi produksi.

### Poin-Poin Utama

- **Paradigma deklaratif**: mendeskripsikan apa yang diinginkan, bukan bagaimana membangunnya
- **@State dan @Binding**: mengelola state secara reaktif dan meneruskannya antar view
- **Stacks**: menggabungkan VStack, HStack, dan ZStack untuk tata letak yang fleksibel
- **List**: menampilkan koleksi dengan kode minimal dan interaksi native
- **Animasi**: menggunakan `withAnimation` untuk transisi halus otomatis
- **Async/await**: memuat data dengan `.task` dan menangani state loading/error

### Daftar Periksa

- Memahami perbedaan antara imperatif (UIKit) dan deklaratif (SwiftUI)
- Menguasai modifier dan urutan penerapannya
- Mengetahui kapan menggunakan @State vs @Binding vs @Observable
- Membangun tata letak dengan Stacks
- Mengimplementasikan daftar dengan aksi (hapus, pindahkan)
- Menganimasi perubahan state dengan withAnimation

SwiftUI membuka peluang untuk membangun aplikasi elegan di seluruh ekosistem Apple. Cara terbaik untuk belajar adalah dengan mempraktikkannya: buatlah proyek pribadi kecil dan bereksperimen dengan setiap konsep dari artikel ini.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/blog/ios/swiftui-building-modern-interfaces