cover

How to Easily Add Shadow and Corner Radius to UIView in Swift Using Extensions

Hello Everyone, in this article, I will show you how to add both corner radius and shadow to a UIView simultaneously in Swift. You can achieve this easily with a single UIView extension function.

extension UIView {

    //.layerMaxXMinYCorner - topRight
    //.layerMinXMinYCorner - topLeft
    //.layerMaxXMaxYCorner - bottomLeft
    //.layerMinXMaxYCorner - bottomRight
  
    func applyCornerRadiusWithShadow(
           cornerRadius: CGFloat = 10,
           shadowColor: UIColor = .black,
           shadowOffset: CGSize = CGSize(width: 0, height: 2),
           shadowRadius: CGFloat = 5,
           shadowOpacity: Float = 0.5,
           roundedCorners: CACornerMask = [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
       ) {
           let containerView = UIView()
           containerView.translatesAutoresizingMaskIntoConstraints = false
           containerView.layer.cornerRadius = cornerRadius
           containerView.layer.maskedCorners = roundedCorners
           containerView.layer.shadowColor = shadowColor.cgColor
           containerView.layer.shadowOffset = shadowOffset
           containerView.layer.shadowRadius = shadowRadius
           containerView.layer.shadowOpacity = shadowOpacity
           containerView.layer.masksToBounds = false
           
           if let superview = self.superview {
               superview.addSubview(containerView)
               containerView.addSubview(self)
               
               NSLayoutConstraint.activate([
                   containerView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
                   containerView.centerYAnchor.constraint(equalTo: self.centerYAnchor),
                   containerView.widthAnchor.constraint(equalTo: self.widthAnchor),
                   containerView.heightAnchor.constraint(equalTo: self.heightAnchor),
                   self.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
                   self.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
                   self.topAnchor.constraint(equalTo: containerView.topAnchor),
                   self.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
               ])
               
               self.layer.cornerRadius = cornerRadius
               self.layer.maskedCorners = roundedCorners
               self.layer.masksToBounds = true
           }
       }
}

You can customize individual properties as needed, such as applying corner radius to specific corners only.

testView.applyCornerRadiusWithShadow(roundedCorners: [.layerMaxXMinYCorner, .layerMinXMinYCorner])
testView.applyCornerRadiusWithShadow(cornerRadius: 12)
testView.applyCornerRadiusWithShadow(shadowColor: .black)
testView.applyCornerRadiusWithShadow(shadowRadius: 5)
testView.applyCornerRadiusWithShadow(shadowOpacity: 0.5)
testView.applyCornerRadiusWithShadow(shadowOffset: CGSize(width: 0, height: 2))

Alternatively, you can change all properties at once.

testView.applyCornerRadiusWithShadow(cornerRadius: 12, shadowColor: .black, shadowOffset: CGSize(width: 0, height: 2), shadowRadius: 5, shadowOpacity: 0.5, roundedCorners: [.layerMaxXMinYCorner, .layerMinXMinYCorner])

The function creates a new UIView named containerView and applies the necessary shadow and corner rounding properties to this view. Then, it adds the current UIView content (self) into this containerView and defines the necessary constraints. I hope this article was helpful. If you have any questions or suggestions, please feel free to leave a comment. Goodbye!

Author

Ozan Çiçek

Software Developer & Tech Enthusiast

Full-stack developer with a passion for creating beautiful and functional web applications. Always learning and sharing knowledge with the community.

Related Posts