How to use UIVisualEffectView to Blur Image

Question

Could someone give a small example of applying the blur to an image   I ve been trying to figure out the code for a while now    still new at obj c      The UIVisualEffectView provides a simple abstraction over complex   visual effects  Depending on the desired effect  the results may   affect content layered behind the view or content added to the view   s   contentView       Apply a UIVisualEffectView to an existing view to apply a blur or   vibrancy effect to the exiting view  After you add the   UIVisualEffectView to the view hierarchy  add any subviews to the   contentView of the UIVisualEffectView  Do not add subviews directly to   the UIVisualEffectView itself    https   developer apple com documentation uikit uivisualeffectview   apple ref occ instp UIVisualEffectView contentView

User · Answer

I prefer creating Visual Effects via Storyboard - no code used for creating or maintaining UI Elements. It gives me full landscape support, too. I have made a little demo of using UIVisualEffects with Blur and also Vibrancy.

Demo on Github

User · Answer

You can also use the interface builder to create these effects easily for simple situations  Since the z-values of the views will depend on the order they are listed in the Document Outline  you can drag a UIVisualEffectView onto the document outline before the view you want to blur  This automatically creates a nested UIView  which is the contentView property of the given UIVisualEffectView  Nest things within this view that you want to appear on top of the blur     You can also easily take advantage of the vibrancy UIVisualEffect  which will automatically create another nested UIVisualEffectView in the document outline with vibrancy enabled by default  You can then add a label or text view to the nested UIView  again  the contentView property of the UIVisualEffectView   to achieve the same effect that the    slide to unlock  UI element

User · Answer

- void  addBlurEffectOverImageView  UIImageView     imageView       UIVisualEffect  blurEffect      blurEffect    UIBlurEffect effectWithStyle UIBlurEffectStyleDark        UIVisualEffectView  visualEffectView      visualEffectView     UIVisualEffectView alloc  initWithEffect blurEffect        visualEffectView frame    imageView bounds        imageView addSubview visualEffectView

User · Answer

Here is how to use UIVibrancyEffect and UIBlurEffect with UIVisualEffectView  Objective-C      Blur effect UIBlurEffect  blurEffect    UIBlurEffect effectWithStyle UIBlurEffectStyleDark   UIVisualEffectView  blurEffectView     UIVisualEffectView alloc  initWithEffect blurEffect    blurEffectView setFrame self view bounds    self view addSubview blurEffectView       Vibrancy effect UIVibrancyEffect  vibrancyEffect    UIVibrancyEffect effectForBlurEffect blurEffect   UIVisualEffectView  vibrancyEffectView     UIVisualEffectView alloc  initWithEffect vibrancyEffect    vibrancyEffectView setFrame self view bounds       Label for vibrant text UILabel  vibrantLabel     UILabel alloc  init    vibrantLabel setText   Vibrant     vibrantLabel setFont  UIFont systemFontOfSize 72 0f     vibrantLabel sizeToFit    vibrantLabel setCenter  self view center       Add label to the vibrancy view   vibrancyEffectView contentView  addSubview vibrantLabel       Add the vibrancy view to the blur view   blurEffectView contentView  addSubview vibrancyEffectView     Swift 4          Blur Effect     let blurEffect   UIBlurEffect style  UIBlurEffectStyle dark      let blurEffectView   UIVisualEffectView effect  blurEffect      blurEffectView frame   view bounds     view addSubview blurEffectView          Vibrancy Effect     let vibrancyEffect   UIVibrancyEffect blurEffect  blurEffect      let vibrancyEffectView   UIVisualEffectView effect  vibrancyEffect      vibrancyEffectView frame   view bounds         Label for vibrant text     let vibrantLabel   UILabel       vibrantLabel text    Vibrant      vibrantLabel font   UIFont systemFont ofSize  72 0      vibrantLabel sizeToFit       vibrantLabel center   view center         Add label to the vibrancy view     vibrancyEffectView contentView addSubview vibrantLabel          Add the vibrancy view to the blur view     blurEffectView contentView addSubview vibrancyEffectView

User · Answer

Just put this blur view on the imageView  Here is an example in Objective-C   UIVisualEffect  blurEffect  blurEffect    UIBlurEffect effectWithStyle UIBlurEffectStyleLight    UIVisualEffectView  visualEffectView  visualEffectView     UIVisualEffectView alloc  initWithEffect blurEffect    visualEffectView frame   imageView bounds   imageView addSubview visualEffectView     and Swift   var visualEffectView   UIVisualEffectView effect  UIBlurEffect style   Light        visualEffectView frame   imageView bounds  imageView addSubview visualEffectView

User · Answer

If anyone would like the answer in Swift     var blurEffect   UIBlurEffect style  UIBlurEffectStyle Dark     Change  Dark into  Light if you d like   var blurView   UIVisualEffectView effect  blurEffect   blurView frame   theImage bounds     theImage  is an image  I think you can apply this to the view too    Update    As of now  it s available under the IB so you don t have to code anything for it

[ios] How to use UIVisualEffectView to Blur Image?

Examples related to ios

Examples related to objective-c

Examples related to uiview

Examples related to uikit

Examples related to uivisualeffectview