Creating a Reusable Card View with SwiftUI 🧑🏿‍💻

In this tutorial, we’ll explore how to create a reusable card view with a gray colored border in SwiftUI. This view will allow you to easily add contents to the face of the card whenever you use it, and also adjust the height of the card view.

Getting Started

To get started, create a new SwiftUI file called “CardView”. In this file, add the following code:

struct CardView: View {
    var height: CGFloat = 200 // default height
    
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.gray, lineWidth: 2)
            .frame(height: height)
            .padding()
    }
}

This code creates a RoundedRectangle shape with a corner radius of 10 and a gray-colored border with a line width of 2.

The frame(height: height) modifier sets the height of the card view to the value of the height variable, which has a default value of 200.

The padding() modifier adds some spacing around the shape.

Using the CardView

To use the CardView, simply add it to your SwiftUI view hierarchy:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("My Card")
                .font(.title)
            
            CardView(height: 250) // adjust height as needed
        }
        .padding()
    }
}

In this example, we add a Text view with the title "My Card", followed by the CardView itself with a height of 250.

You can adjust the height value as needed for your use case.

Customizing the CardView

To customize the CardView, you can modify the RoundedRectangle shape and the border color and width. For example, you can change the border color to red and the line width to 4:

struct CardView: View {
    var height: CGFloat = 200 // default height
    
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.red, lineWidth: 4)
            .frame(height: height)
            .padding()
    }
}

You can also add contents to the face of the card by adding additional views inside the CardView. For example, you can add an image and a label:

struct CardView: View {
    var height: CGFloat = 200 // default height
    
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.gray, lineWidth: 2)
            .frame(height: height)
            .padding()
            .overlay(
                VStack {
                    Image(systemName: "person.circle")
                        .resizable()
                        .frame(width: 50, height: 50)
                    
                    Text("John Doe")
                        .font(.title)
                }
            )
    }
}

This code adds an image of a person with a circle border, followed by a title label with the text “John Doe”. We use the overlay modifier to add these views on top of the RoundedRectangle shape.

Conclusion

In this tutorial, we explored how to create a reusable card view with a gray colored border in SwiftUI. We also showed how to add contents to the face of the card by adding additional views inside the CardView, and how to adjust the height of the card view. With this knowledge, you can create custom card views for your SwiftUI apps that can be easily reused and customized.

I hope you found this tutorial helpful and informative. Happy coding

Give Support or Tip👋🏿

Give a Tip with CashApp: https://cash.app/$DiAlcatic