Collections (Array, Dictionary, Set) in iOS Swift - Mini App: Build & Ship

Build: Collections Demo

This screen shows examples of three common collections in Swift: an Array, a Dictionary, and a Set. It displays their contents in separate sections so you can see how each collection works.

Target UI

-------------------------
| Collections Demo       |
|-----------------------|
| Array:                |
| - Apple               |
| - Banana              |
| - Cherry              |
|-----------------------|
| Dictionary:           |
| - A: Apple            |
| - B: Banana           |
| - C: Cherry           |
|-----------------------|
| Set:                  |
| - Apple               |
| - Banana              |
| - Cherry              |
-------------------------

Display an Array of strings labeled 'Array' with three fruit names.

Display a Dictionary with single-letter keys and fruit names as values labeled 'Dictionary'.

Display a Set of strings labeled 'Set' with the same fruit names.

Use SwiftUI VStack and Text views to layout the content clearly.

Each collection section should have a title and list its items below.

Starter Code

iOS Swift

import SwiftUI

struct CollectionsDemoView: View {
    // TODO: Define the collections here

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            // TODO: Add UI for Array

            // TODO: Add UI for Dictionary

            // TODO: Add UI for Set
        }
        .padding()
        .navigationTitle("Collections Demo")
    }
}

struct CollectionsDemoView_Previews: PreviewProvider {
    static var previews: some View {
        CollectionsDemoView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

iOS Swift

import SwiftUI

struct CollectionsDemoView: View {
    let fruitsArray = ["Apple", "Banana", "Cherry"]
    let fruitsDictionary = ["A": "Apple", "B": "Banana", "C": "Cherry"]
    let fruitsSet: Set<String> = ["Apple", "Banana", "Cherry"]

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            VStack(alignment: .leading, spacing: 5) {
                Text("Array:")
                    .font(.headline)
                ForEach(fruitsArray, id: \.self) { fruit in
                    Text("- \(fruit)")
                }
            }

            VStack(alignment: .leading, spacing: 5) {
                Text("Dictionary:")
                    .font(.headline)
                ForEach(fruitsDictionary.sorted(by: { $0.key < $1.key }), id: \.key) { key, value in
                    Text("- \(key): \(value)")
                }
            }

            VStack(alignment: .leading, spacing: 5) {
                Text("Set:")
                    .font(.headline)
                ForEach(Array(fruitsSet).sorted(), id: \.self) { fruit in
                    Text("- \(fruit)")
                }
            }
        }
        .padding()
        .navigationTitle("Collections Demo")
    }
}

struct CollectionsDemoView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            CollectionsDemoView()
        }
    }
}

We defined three collections: an Array, a Dictionary, and a Set, each holding fruit names. The Array keeps order, so we list its items directly. The Dictionary is sorted by keys to show items in order. The Set is unordered, so we convert it to an Array and sort it before displaying. Each collection is shown in its own VStack with a bold title and a list of items below. This layout helps beginners see how these collections store and present data differently.

Final Result

Completed Screen

-------------------------
| Collections Demo       |
|-----------------------|
| Array:                |
| - Apple               |
| - Banana              |
| - Cherry              |
|-----------------------|
| Dictionary:           |
| - A: Apple            |
| - B: Banana           |
| - C: Cherry           |
|-----------------------|
| Set:                  |
| - Apple               |
| - Banana              |
| - Cherry              |
-------------------------

The screen shows three sections labeled Array, Dictionary, and Set.

Each section lists the fruit names as text lines.

No interactive elements; this screen is for display only.

Stretch Goal

Add a button that shuffles the Array and updates the displayed order when tapped.

💡 Hint

Use @State to hold the array and call shuffle() inside the button's action closure.