How to make card view in swift

Well, this sounds pretty simple CardView. If you are are an Android Developer. Then hopefully you must be known by this term. If you are not an android developer then do not need to worry. Basically, CardView is a separation of view with some attraction and shadow. And this is very important to know that CardView is and Material Design functionality. In iOS, we do not have any pre-define CardView class. So for achieving this Material Design Functionality, you need to do some workout!. 🙂 So let us start with some coding.

In your Xcode Project Create a new Swift File with Name CardView Now you need to import UIKIT Package

import UIKit

1. Now Copy the given code in your class file

@IBDesignable class CardView: UIView {
    var cornnerRadius : CGFloat = 2
    var shadowOfSetWidth : CGFloat = 0
    var shadowOfSetHeight : CGFloat = 5
    
    var shadowColour : UIColor = MyColor.shadow_color
    var shadowOpacity : CGFloat = 0.5
    
    override func layoutSubviews() {
        layer.cornerRadius = cornnerRadius
        layer.shadowColor = shadowColour.cgColor
        layer.shadowOffset = CGSize(width: shadowOfSetWidth, height: shadowOfSetHeight)
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornnerRadius)
        layer.shadowPath = shadowPath.cgPath
        layer.shadowOpacity = Float(shadowOpacity)
    }
}

This is very simple, Now open your StoryBoard. From the StoryBoard select you view controller wherever you want to make a card view. On that controller take a UIView and assign the CardView class to Selected UIView from the Identity Inspector, Which is located in the right drawer of Xcode.

This is the output of the code

The Above code is without radius(only 2f). if you want to make RadiusCardView then use the below class.

@IBDesignable class CardViewRadius: UIView {
    var cornnerRadius : CGFloat = 8
    var shadowOfSetWidth : CGFloat = 0
    var shadowOfSetHeight : CGFloat = 5
    
    var shadowColour : UIColor = MyColor.shadow_color
    var shadowOpacity : CGFloat = 0.2
    
    override func layoutSubviews() {
        layer.cornerRadius = cornnerRadius
        layer.shadowColor = shadowColour.cgColor
        layer.shadowOffset = CGSize(width: shadowOfSetWidth, height: shadowOfSetHeight)
        
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornnerRadius)
        
        layer.shadowPath = shadowPath.cgPath
        
        layer.shadowOpacity = Float(shadowOpacity)
        
    }
}

Both are very simple and if you see both then there is only one line difference which is only increase the cornnerRadius from 2 to 8. If you want more then you can increase more and also you can do more customisation with the code as per your requirement. this is just and example of CardView

Wish you good luck 🙂 Happy Coding