CODEWITHSUNDEEP
iosswiftios10
Patrick Bodet
Patrick Bodet

Reputation: 681

iOS10 UIView blur effect with shadow

how to have a blur effect on UIView with shadow? If I do:

    override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    let layer = self.view.layer;
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 1.0
    layer.shadowOffset = CGSize(width: 0.0, height: 0.5)
    layer.shadowRadius = 5.0

    self.view.backgroundColor = UIColor.clear

    let blurEffect = UIBlurEffect(style: .light)
    let sideEffectView = UIVisualEffectView(effect: blurEffect)
    sideEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    sideEffectView.frame = self.view.bounds;
    self.view.addSubview(sideEffectView)
}

There is a shadow but no blur effect, and if I do this:

    override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    self.view.backgroundColor = UIColor.clear

    let blurEffect = UIBlurEffect(style: .light)
    let sideEffectView = UIVisualEffectView(effect: blurEffect)
    sideEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    sideEffectView.frame = self.view.bounds;
    self.view.addSubview(sideEffectView)
}

There is a blur effect but no shadow.

Thanks for help!

Upvotes: 4

Views: 4802

Answers (2)

Patrick Bodet
Patrick Bodet

Reputation: 681

Thanks for answer. I also found another solution. With yours, it's not really a shadow (no radius...):

    override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = UIColor.clear

    let blurEffect = UIBlurEffect(style: .light)
    let sideEffectView = UIVisualEffectView(effect: blurEffect)
    sideEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    sideEffectView.frame = self.view.bounds
    self.view.addSubview(sideEffectView)

    let shadowView = UIView(frame: CGRect(x: 0.0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height))
    shadowView.translatesAutoresizingMaskIntoConstraints = false
    shadowView.backgroundColor = UIColor.white
    shadowView.layer.masksToBounds = false
    shadowView.layer.shadowOffset = CGSize(width: 2.5, height: 2.5)
    shadowView.layer.shadowOpacity = 1.0
    shadowView.layer.shadowRadius = 2.5

    self.view.insertSubview(shadowView, at: 0)

    // Set constraints programmatically, as this view is animatable
    NSLayoutConstraint(item: shadowView, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.trailingMargin, multiplier: 1.0, constant: 0.0).isActive = true
    NSLayoutConstraint(item: shadowView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.topMargin, multiplier: 1.0, constant: 0.0).isActive = true
    NSLayoutConstraint(item: shadowView, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.bottomMargin, multiplier: 1.0, constant: 0.0).isActive = true
    NSLayoutConstraint(item: shadowView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1.0, constant: 5.0).isActive = true
}

Blur effect with shadow

Upvotes: 2

nikolovski
nikolovski

Reputation: 4049

I have stumbled on the same problem as you. Couldn't add a layer with a shadow, so resorted to adding an additional UIView to the UIVisualEffectsView's contentView that serves the same purpose:

let borderViewFrame = CGRect(x: 0, y: bounds.maxY, width: bounds.width, height: 0.5)
let borderView = UIView(frame: borderViewFrame)
borderView.backgroundColor = UIColor.black.withAlphaComponent(0.25)
contentView.clipsToBounds = false
contentView.addSubview(borderView)

Upvotes: 0

Related Questions