
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!