Adding clouded shadow to UIView in swift4 - ios

Question

I want to add shadow(it is not like default it somehow clouded and blurred) for my UIView like below
I have written an extension as
func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
self.layer.masksToBounds = false
self.layer.shadowColor = color.cgColor
self.layer.shadowOpacity = opacity
self.layer.shadowRadius = radius
self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
self.layer.shouldRasterize = true
self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
Output:
but not able to get the exact output.
Your help will be thankful.

Answer 1

I believe that you also need to set clipsToBounds.
self.clipsToBounds = false

Answer 2

I use IBInspectable to treat all the views in my app. Try it out
extension UIView {
#IBInspectable var cornerRadius: CGFloat {
set {
layer.cornerRadius = newValue
}
get {
return layer.cornerRadius
}
}
#IBInspectable var borderWidth: CGFloat {
set {
layer.borderWidth = newValue
}
get {
return layer.borderWidth
}
}
#IBInspectable var borderColor: UIColor? {
set {
layer.borderColor = newValue?.cgColor
}
get {
return UIColor(cgColor: layer.borderColor!)
}
}
#IBInspectable var shadowOffset: CGSize {
set {
layer.shadowOffset = newValue
}
get {
return layer.shadowOffset
}
}
#IBInspectable var shadowOpacity: Float {
set {
layer.shadowOpacity = newValue
}
get {
return layer.shadowOpacity
}
}
#IBInspectable var shadowRadius: CGFloat {
set {
layer.shadowRadius = newValue
}
get {
return layer.shadowRadius
}
}
#IBInspectable var shadowColor: UIColor? {
set {
layer.shadowColor = newValue?.cgColor
}
get {
return UIColor(cgColor: layer.shadowColor!)
}
}
}
in your case you should fix shadowOffset property.

Answer 3

You should disable clipToBounds in your 'containerView' (view that has your shadow dropping view placed as a subview)
Take a look at an example:
import UIKit
extension UIView {
func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
self.layer.masksToBounds = false
self.layer.shadowColor = color.cgColor
self.layer.shadowOpacity = opacity
self.layer.shadowRadius = radius
self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
self.layer.shouldRasterize = true
self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
}
let shadowedView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()
let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height:200))
mainView.backgroundColor = .white
mainView.addSubview(shadowedView)
here I will add a view container and enable clipToBounds :
let shadowedView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()
let containerView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
containerView.addSubview(shadowedView)
containerView.clipsToBounds = true
let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
mainView.backgroundColor = .white
mainView.addSubview(containerView)