SwiftUI, Apple’s innovative UI toolkit, has made it easier than ever to design beautiful, interactive user interfaces for iOS, macOS, watchOS, and tvOS. One of the common UI elements in modern apps is the card-like scroll view, often used to showcase a list of items horizontally. In this article, we’ll walk you through how to create a card-like scroll view in SwiftUI.

What You’ll Build

By the end of this tutorial, you’ll have a horizontal scroll view containing cards. Each card will display an image, a category, a heading, and an author’s name. This design is perfect for showcasing articles, products, or any other content in a visually appealing manner.

Getting Started

First, let’s break down the main components:

1. CardLikeScrollView: This is our main view, containing a title and the horizontal scroll view.
2. CardView: This represents an individual card with an image, category, heading, and author.

Building the CardView

The CardView is designed to be reusable. It takes in four parameters: image, category, heading, and author.

struct CardView: View {
    var image: String
    var category: String
    var heading: String
    var author: String
    ...
}

Inside the CardView, the image is set to be resizable and fit its container. The texts are arranged vertically with the category at the top, followed by the heading and then the author. The entire card has a rounded corner and a subtle border.

Designing the CardLikeScrollView

The CardLikeScrollView contains a title at the top, followed by the horizontal scroll view. Inside the scroll view, we place multiple CardView instances side by side.

struct CardLikeScrollView : View{
    ...
    ScrollView(.horizontal){
        HStack {
            CardView(image: "swiftui-button", category: "SwiftUI", heading: "Drawing Border with Rounded Corners", author: "Simon Ng").frame(width: 300)
            ...
        }
    }
    ...
}

Styling and Final Touches

To make our cards stand out, we’ve added padding and a corner radius. The overlay provides a subtle border to each card, enhancing its appearance.

Conclusion

SwiftUI offers a powerful and intuitive way to design UI components. With just a few lines of code, we’ve created a visually appealing card-like scroll view. This design can be easily adapted for various use cases, making your app look modern and engaging.

Whether you’re showcasing articles, products, or any other content, this card-like scroll view is a versatile component to have in your SwiftUI toolkit. Happy coding!