CardView in IOS (Swift & SwiftUI)

The card view is one of the very usable components in the development of Mobile Apps, Softwares, and Websites, etc.  Today I will show you how to create a card view in IOS by using the Swift & SwiftUI. Read the complete blog for a better understanding. 

Step-1) Create the project by using the SwiftUI into the project like this

Step-2) Here I am using SDWebImageSwiftUI for using the image into the card. If you want to add this to the project then click the link below. 

        https://github.com/SDWebImage/SDWebImageSwiftUI

Step-3) Now create a view which is called the CardView like below and define some let constants which will use for framing in the next part of the code. 

        struct CardView: View{

            var body: some View {

        

            }

    

            let cardAndImageWidth: CGFloat = 170

            let cardHeight: CGFloat = 174

            let imageHeight: CGFloat = 116

            let cornerRadius: CGFloat = 5

        }

Step-4) After this, now use a ZStack into the body variable and then use a RoundedRectangle into that ZStack 

        ZStack {

            RoundedRectangle(cornerRadius: cornerRadius)

                .strokeBorder(SwiftUI.Color.gray, lineWidth: 1)

                .frame(width: cardAndImageWidth, height: cardHeight)

                .background(SwiftUI.Color.white)

        }

In this code, the ZStack is like (putting the plate into one by one like a stack) view stack. RoundedRectangle is for putting the Rectangle in the back of the CardView. In RoundedRectangle, we are using the three modifiers. 

• .strokeBorder is using for giving the border to the rectangle like here we are giving the Gray color with border width 1. 
• .frame is to control the height or width of the Rectangle. Here card width is the cardAndImageWidth & height is the cardHeight which we already defined in let constants in Step-3. 
• .background is for giving the background color to the Rectangle. 

Step-5) After that use the VStack under the RoundedRectangle with frame and corner radius 

        VStack(alignment: .leading, spacing: 10) {

                

         }

            .frame(width: cardAndImageWidth, height: cardHeight)

            .cornerRadius(cornerRadius)

    .cornerRadius is for the radius from the corner of the VStack boundery. 

Step-6) After that, Import the SDWebImageSwiftUI by using 

        import SDWebImageSwiftUI

If you added SDWebImageSwiftUI into your project then you can import this otherwise cannot import this. See Step-2 for adding this into the project. 

Step-7) After that use WebImage into that VStack

WebImage(url: URL(string: "https://media.istockphoto.com/photos/cute-little-baby-boy-relaxing-in-bed-after-bath-smiling-happily-picture-id923852236?k=6&m=923852236&s=612x612&w=0&h=yhDRcow62oft0e40RpIm9BcFXPbEFr2YmqVZrzfMcT0="))

                    .resizable()

                    .aspectRatio(contentMode: .fill)

                    .frame(width: cardAndImageWidth, height: imageHeight)

                    .clipped()

WebImage is the component of SDWebImageSwiftUI. The WebImage will take the URL type url and show the image onto the screen. 

Here 

• .resizable() is for resizing the image. If you will not use this then you cannot resize the image. So it's very important. 
• .aspectRatio is for fill this image into the parent view or not. 
• .frame is for the size of the image
• .clipped() is clipping the image into the boundary of the parent view. 

Step-8) After that use VStack below the WebImage

        VStack(alignment: .leading, spacing: 2) {

                    Text("No Name")

                        .font(.custom("Avenir", size: 14))

                        .fontWeight(.bold)

                    Text("No Address")

                        .font(.custom("Avenir", size: 12))

                        .foregroundColor(SwiftUI.Color.gray)

        }

             .padding(.horizontal,12)

             .padding(.bottom,11)

Here I am just showing the two texts vertically and giving the custom font, size, weight & color, etc. 

Complete Code:

struct CardView: View{

    var body: some View {

        ZStack {

            RoundedRectangle(cornerRadius: cornerRadius)

                .strokeBorder(SwiftUI.Color.gray, lineWidth: 1)

                .frame(width: cardAndImageWidth, height: cardHeight)

                .background(SwiftUI.Color.white)

            VStack(alignment: .leading, spacing: 10) {

                WebImage(url: URL(string: "https://media.istockphoto.com/photos/cute-little-baby-boy-relaxing-in-bed-after-bath-smiling-happily-picture-id923852236?k=6&m=923852236&s=612x612&w=0&h=yhDRcow62oft0e40RpIm9BcFXPbEFr2YmqVZrzfMcT0="))

                    .resizable()

                    .aspectRatio(contentMode: .fill)

                    .frame(width: cardAndImageWidth, height: imageHeight)

                    .clipped()

                LazyVStack(alignment: .leading, spacing: 2) {

                    Text("No Name")

                        .font(.custom("Avenir", size: 14))

                        .fontWeight(.bold)

                    Text("No Address")

                        .font(.custom("Avenir", size: 12))

                        .foregroundColor(SwiftUI.Color.gray)

                }

                .padding(.horizontal,12)

                .padding(.bottom,11)

            }

            .frame(width: cardAndImageWidth, height: cardHeight)

            .cornerRadius(cornerRadius)

        }

    }

    

    private let cardAndImageWidth: CGFloat = 170

    private let cardHeight: CGFloat = 174

    private let imageHeight: CGFloat = 116

    private let cornerRadius: CGFloat = 5

}

Now use this CardView any place where you want into the CODE.

If you have any doubt then comment below. Thanks for reading this 🙇‍♂️! :)