How to Extract Subviews in SwiftUI

In this tutorial, we will see how to extract subviews in SwiftUI.

We can extract subviews by creating separate views and then using them within a parent view. This helps us organize our code, making it more readable, and promoting reusability.

Now, follow the steps below to achieve this task.

Create Subview Structs

First of all, we have to create separate structs for the subviews we want to extract. Here I am going to create two subviews and then I will use those subviews in the parent view.

Example

struct Subview1: View {
    var body: some View {
        Text("Subview 1")
            .font(.largeTitle)
            .foregroundColor(.mint)
    }
}

struct Subview2: View {
    var body: some View {
        Text("Subview 2")
            .font(.largeTitle)
            .foregroundColor(.brown)
    }
}

In the above code, I have defined two subviews which are Subview1 and Subview2, each subview represents a separate section of the user interface.

We can use these Subview1 and Subview2 structures within our main SwiftUI view (ContentView) by simply calling them where needed.

Define the parent view and use those subviews

Now, I will create a parent view called ContentView and use those subviews within it to utilize them.

Example

struct ContentView: View {
    var body: some View {
        VStack {
            Subview1() // Using Subview1
                .padding()
            
            Subview2() // Using Subview2
                .padding()
        }
    }
}

In the above code, the ContentView is using Subview1 and Subview2 within a VStack to structure the UI.

Here is the complete code below.

import SwiftUI

// Subview 1
struct Subview1: View {
    var body: some View {
        Text("Subview 1")
            .font(.title)
            .foregroundColor(.blue)
    }
}

// Subview 2
struct Subview2: View {
    var body: some View {
        Text("Subview 2")
            .font(.title)
            .foregroundColor(.green)
    }
}

// Parent View
struct ContentView: View {
    var body: some View {
        VStack {
            Subview1() // Use Subview1
                .padding()
            
            Subview2() // Use Subview2
                .padding()
        }
    }
}

The above code will create a simple SwiftUI application with a vertical stack of two subviews. Each subview contains a text element with different content and styling (font size and color).

Output:

Dynamic Data in Subviews

As we can see the data in the above program is not dynamic it is static so it is not going to change.  If we want to display dynamic data in our subviews, we can modify the code to include data properties in the subview structs and pass the data when creating instances of the subviews.

Example

struct Subview: View {
    //A property to hold the text/title to be displayed
    let title: String
    //A property to define the text color
    let color: Color
    
    var body: some View {
        // Displays the text specified in the 'title' property
        Text(title)
            .font(.largeTitle)
            // Sets the text color using the 'color' property
            .foregroundColor(color)
    }
}

In the above code, the subview has two properties called title and color of type String and Color. Now, we can pass dynamic data when creating instances of this subview in the ContentView.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Creating an instance of Subview with specific parameters
            Subview(title: "CodeSpeedy", color: .brown)
                .padding()
            // Creating another instance of Subview with specific parameters
            Subview(title: "SwiftSpeedy", color: .green)
        }
    }
}

In the above code, the first Subview instance is initialized with the title “CodeSpeedy” and a text color of brown.

The second Subview instance is initialized with the title “SwiftSpeedy” and a text color of green.

Here is the complete code below

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Subview(title: "CodeSpeedy", color: .brown)
                .padding()
            Subview(title: "SwiftSpeedy", color: .green)
        }
    }
}

// Subview
struct Subview: View {
    
    let title: String
    let color: Color
    
    var body: some View {
        Text(title)
            .font(.largeTitle)
            .foregroundColor(color)
    }
}

Output: