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 theUIVisualEffectView
. Do not add subviews directly to theUIVisualEffectView
itself.
This question is related to
ios
objective-c
uiview
uikit
uivisualeffectview
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.
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.
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 :)
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)
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = _imageView.bounds;
[_imageView addSubview:visualEffectView];
}
Source: Stackoverflow.com