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.
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.