Reusable SwiftUI views with initializers and enums

Cards that differ only in color or wording do not need separate view types. Initializers expose those differences, while enums limit configuration to meaningful choices.

Default property values

Properties such as title and backgroundColor make a view reusable. Assign defaults when a standard configuration is useful.

struct TestView: View {
    
    // Assign default property values
    let backgroundColor: Color = .red
    let title: String = "Apple"
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView() // Create an instance
    }
}

Initializers

An initializer supplies the values an instance needs. self refers to the current instance, so self.backgroundColor is its stored property. Swift structures can receive a synthesized memberwise initializer when a custom one is not provided.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    // Initializer
    init(backgroundColor: Color, title: String) {
        self.backgroundColor = backgroundColor
        self.title = title
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView(backgroundColor: .red, title: "Apple") // Supply initial values
    }
}

Related properties can be configured together during initialization.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    init(title: String) {
        self.title = title
        // Initialize backgroundColor from the title
        if title == "Apple" {
            self.backgroundColor = .red
        } else {
            self.backgroundColor = .orange
        }
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView(title: "Orage") // Supply initial values
    }
}

Enumerations

An enum defines a limited set of meaningful configurations. Use its cases to select related content and appearance values together.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    // Define the available configurations as an enum
    enum Fruit {
        case apple
        case orange
        case grape
    }
    
    init(fruit: Fruit) { // Initialize with an enum case
	    // Initialize the properties from the supplied configuration
        if fruit == .apple {
            self.title = "Apple"
            self.backgroundColor = .red
        } else if fruit == .orange {
            self.title = "Orange"
            self.backgroundColor = .orange
        } else {
            self.title = "Grape"
            self.backgroundColor = .purple
        }
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
    	VStack {
        	TestView(fruit: .grape) // Initialize the grape configuration
			TestView(fruit: .apple) // Initialize the apple configuration
    	}
    }
}