How to use UIVisualEffectView to Blur Image? How to use UIVisualEffectView to Blur Image? ios ios

How to use UIVisualEffectView to Blur Image?


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.boundsimageView.addSubview(visualEffectView)


Here is how to use UIVibrancyEffect and UIBlurEffect with UIVisualEffectView

Objective-C:

// Blur effectUIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];[blurEffectView setFrame:self.view.bounds];[self.view addSubview:blurEffectView];// Vibrancy effectUIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];[vibrancyEffectView setFrame:self.view.bounds];// Label for vibrant textUILabel *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:

// Blur Effectlet blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)let blurEffectView = UIVisualEffectView(effect: blurEffect)blurEffectView.frame = view.boundsview.addSubview(blurEffectView)// Vibrancy Effectlet vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)vibrancyEffectView.frame = view.bounds// Label for vibrant textlet vibrantLabel = UILabel()vibrantLabel.text = "Vibrant"vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)vibrantLabel.sizeToFit()vibrantLabel.center = view.center// Add label to the vibrancy viewvibrancyEffectView.contentView.addSubview(vibrantLabel)// Add the vibrancy view to the blur viewblurEffectView.contentView.addSubview(vibrancyEffectView)


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.

XCode6 beta5

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.

enter image description here