CODEWITHSUNDEEP
iosswiftuiviewbluralpha
Ice
Ice

Reputation: 757

How create transparent view with with blur effect?

I learn how to create UI and in www find peace of design which I want to repeat it by myself. I can create main view and then add subView with all element like as example below, but I can't create subView with blurred effect like as on example, I am trying to create subview then add other peace of view and add blur but I can create copy like as an example.

What is the correct way to create this view? I can't understand which manipulation I need to do with view for this effect, it is a tricks with alpha of view and blur effect or something else? effect of view

Upvotes: 1

Views: 10165

Answers (2)

Ice
Ice

Reputation: 757

I am solved this task using next approach:

First: Was created gradient layer for subview.

Second: Was added UIVisualEffectView with VibrancyEffect.

How create gradient was used information from this website ( https://www.appcoda.com/cagradientlayer/ )

And for vibrancy effect was used source code from this project ( https://github.com/ide/UIVisualEffects )

My source code:

func createGradientLayer() {
    gradientLayer = CAGradientLayer()
    gradientLayer.cornerRadius = 10
    gradientLayer.frame = self.placeholder.bounds
    gradientLayer.locations = [0.0, 0.35]
 
    gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
 
    self.placeholder.layer.addSublayer(gradientLayer)
}

override func viewDidLoad() {
    super.viewDidLoad()

    createGradientLayer()


    let lightBlur = UIBlurEffect(style: .light)
    let lightBlurView = UIVisualEffectView(effect: lightBlur)
    lightBlurView.layer.cornerRadius = 10
    lightBlurView.layer.masksToBounds = true
    
    placeholder.addSubview(lightBlurView)
    
    lightBlurView.frame.size.height = placeholder.frame.size.height
    lightBlurView.frame.size.width = placeholder.frame.size.width

    let lightVibrancyView = vibrancyEffectView(forBlurEffectView: lightBlurView)
    lightBlurView.contentView.addSubview(lightVibrancyView)
    
}

   fileprivate func vibrancyEffectView(forBlurEffectView blurEffectView:UIVisualEffectView) -> UIVisualEffectView {
        let vibrancy = UIVibrancyEffect(blurEffect: blurEffectView.effect as! UIBlurEffect)
        let vibrancyView = UIVisualEffectView(effect: vibrancy)
        vibrancyView.frame = blurEffectView.bounds
        vibrancyView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return vibrancyView
    }

Final example: final result

Upvotes: 1

Teddichiiwa
Teddichiiwa

Reputation: 791

I found an excellent tutorial that might help you to create a smooth transparent view with blur effect: https://www.raywenderlich.com/167-uivisualeffectview-tutorial-getting-started

Upvotes: 1

Related Questions