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.

Step-4)

After this, now use a ZStack into the body variable and then use a RoundedRectangle

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.
  • which we already defined in.frame is to control the cardAndImageWidth & height is the cardHeight let constants in Step-3. height or width of the Rectangle. Here card width is the
  • .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

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

Step-6)

After that, Import the SDWebImageSwiftUI by using

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 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

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

Complete Code:

Now use this CardView any place where you want into the

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

Originally published at https://easilylearncpp.blogspot.com.

I am a professional software engineer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store