0

design is here: enter image description here

So the button stackview is having a blur & transparent view on top of another ImageView. How can I make this work? I've tried the blur effectview and visual effectview but all failed on fulfill this design. I also try to usign the CIFilter to blur the background image of the StackView but still not the same one.

Answer for the comment, code for blur effectveiw and visual view. see below image for the real result.

let test: UIView = {
    let test = UIView()
    test.backgroundColor = .clear
    return test
}()
let blurEffect = UIBlurEffect(style: .extraLight)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.translatesAutoresizingMaskIntoConstraints = false
    pictureImageView.insertSubview(blurView, at: 0)
    blurView.snp.makeConstraints { (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    }
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyView.translatesAutoresizingMaskIntoConstraints = false
    vibrancyView.contentView.addSubview(test)
    blurView.contentView.addSubview(vibrancyView)
    vibrancyView.snp.makeConstraints { (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    }

enter image description here

Update, after add the alpha @Narjes mentioned below, the only code added is the blurView.alpha = 0.3, and the result is here, seems missing the blur effect. enter image description here

o1xhack
  • 87
  • 9

1 Answers1

0

your mistake is not setting the alpha here

update: set the UIBlurEffect to .regular .

  • keep alpha in 1.0 , because decreasing it also decreases blur.

updated: here is what are you looking for:

        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.alpha = 1.0
        blurView.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        pictureImageView.insertSubview(blurView, at: 0)
        blurView.center.x = self.view.center.x
        blurView.center.y = self.view.center.y * 1.7
        
        blurView.layer.cornerRadius = 10.0
        blurView.clipsToBounds = true
        blurView.layer.borderWidth = 2
        blurView.layer.borderColor = #colorLiteral(red: 0.1356498897, green: 0.3658460379, blue: 1, alpha: 1)

updated: and the result will be like this :updated image

  • tip: make sure for UI problems you use Xcode UI Debugger, it will help you see the layers in run time
Narjes
  • 26
  • 1
  • 9
  • Nope. Not setting an alpha value is not the critical issue. – El Tomato Aug 06 '21 at 11:44
  • but as you can see in @o1xhack image he doesn't have a problem with the frame, he set the frame with constraints otherwise it wouldn't be shown! as I understood, his problem was the transparency cuz he has a rectangle down there. – Narjes Aug 06 '21 at 11:51
  • @Narjes I've added the alpha and put the result picture in the question. seems there is no blur stuff that our design have. – o1xhack Aug 12 '21 at 09:51
  • @o1xhack fixed for you and updated the answer. now i get it you wanted transparency with blur, sorry – Narjes Aug 12 '21 at 16:48
  • @o1xhack and by the way if bluring is not enough you should use transparent blur image instead because it's the end of it and you cant reduce transparency and keep the blur . this is how this component works – Narjes Aug 12 '21 at 17:15
  • 1
    @Narjes Thanks for the update. so it seems that alpha=1 will make the blur view not transparent. So what I want is a blur transparent view that can see the down layer of the picture imageview. – o1xhack Aug 13 '21 at 03:40
  • your welcome. so UIBlurEffect.reqular worked? right ? – Narjes Aug 13 '21 at 10:24