Wie verwende ich UIVisualEffectView, um Bilder zu verwischen?

208

Könnte jemand ein kleines Beispiel für das Anwenden der Unschärfe auf ein Bild geben? Ich habe jetzt schon eine Weile versucht, den Code herauszufinden :( noch neu bei obj c!

Das UIVisualEffectViewbietet eine einfache Abstraktion über komplexe visuelle Effekte. Abhängig vom gewünschten Effekt können sich die Ergebnisse auf Inhalte auswirken, die hinter der Ansicht liegen, oder auf Inhalte, die der Inhaltsansicht der Ansicht hinzugefügt wurden.

Wenden Sie a UIVisualEffectViewauf eine vorhandene Ansicht an, um einen Unschärfe- oder Vibrationseffekt auf die verlassene Ansicht anzuwenden. Nachdem Sie die UIVisualEffectView zur Ansichtshierarchie hinzugefügt haben, fügen Sie der contentView der Unteransichten hinzu UIVisualEffectView. Fügen Sie keine Unteransichten direkt zu sich UIVisualEffectViewselbst hinzu.

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView

cNoob
quelle
1
UIVisualEffectViewcontentView
Achten
Wenn Sie es einer Unteransicht hinzufügen und den Rahmen festlegen, vergessen Sie nicht, den Rahmen in viewDidLayoutSubviews zu aktualisieren, um sicherzustellen, dass die Drehung funktioniert.
Steve Moser

Antworten:

415

Fügen Sie diese Unschärfeansicht einfach in die Bildansicht ein. Hier ist ein Beispiel in Ziel-C:

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

und Swift:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)
BS
quelle
3
ich danke dir sehr! Ich habe vergessen, den Frame festzulegen :( Es gibt noch nichts auf Google für Visual, daher sollte dies der erste Suchbegriff sein :)
cNoob
1
Hoffe besser, die API ändert sich nicht! Dies ist einer der Gründe, warum es schwierig sein kann, noch nicht veröffentlichte Apple-APIs zu diskutieren. Beispielsweise ändern sich einige der UIKit Dynamics-APIs zwischen Beta und Release geringfügig. Nichts Wichtiges, aber sie hätten jeden Beispielcode beschädigt, der gegen die ursprünglichen APIs geschrieben wurde.
Zev Eisenberg
5
Gibt es überhaupt eine Möglichkeit, die Unschärfe zu animieren?
Ruben Martinez Jr.
3
@BS Sie können das Alpha der visuellen Effektansicht animieren. Boom.
Maciej Trybiło
2
UIBlurEffect ist fantastisch, aber beachten Sie, dass es auf älteren Geräten wie iPad2 nicht funktioniert. Ich habe stundenlang versucht herauszufinden, warum nur eine durchscheinende Schicht über meinen Bildschirm gelegt und nicht verwischt wurde. Das lag alles daran, dass ich auf einem älteren Gerät getestet habe
Keith
135

Hier erfahren Sie, wie Sie UIVibrancyEffect und UIBlurEffect mit UIVisualEffectView verwenden

Ziel 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)
Matt Rundle
quelle
1
Die Problemumgehung funktioniert auch ohne Unterklasse, definieren extension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Sie
1
Apple scheint den Fehler behoben zu haben. Die Problemumgehung für Unterklassen / Erweiterungen ist in iOS 8 Beta 2 nicht mehr erforderlich.
Benjamin Mayo
2
Vielen Dank. Ich habe die Fehlerbehebung getestet und bestätigt und die Antwort bearbeitet.
Matt Rundle
1
Ich versuche, dies meiner Ansicht hinzuzufügen, aber jedes Mal, wenn ich die Ansicht präsentiere, wird sie immer wieder unscharf, bis ich einen weißen Hintergrund erhalte ... Ich entferne die Ansicht mit removeFromSuperView, nachdem ich sie geschlossen habe, aber ich erhalte das gleiche Ergebnis. .. irgendwelche Ideen?
George Asda
@ GeorgeAsda wie wäre es, anstatt anzurufen removeFromSuperView, machst du das [self.visualEffectView setHidden:NO];? Das Zuweisen und Hinzufügen zur Ansicht ist teurer als das Ausblenden oder Anzeigen.
Yoon Lee
46

Sie können den Interface Builder auch verwenden, um diese Effekte für einfache Situationen einfach zu erstellen. Da die Z-Werte der Ansichten von der Reihenfolge abhängen, in der sie in der Dokumentgliederung aufgeführt sind, können Sie a UIVisualEffectViewvor der Ansicht, die Sie verwischen möchten, auf die Dokumentkontur ziehen. Dadurch wird automatisch eine Verschachtelung erstellt UIView, die die contentViewEigenschaft der angegebenen ist UIVisualEffectView. Verschachteln Sie Dinge in dieser Ansicht, die über der Unschärfe angezeigt werden sollen.

XCode6 Beta5

Sie können auch die Lebendigkeit leicht nutzen UIVisualEffect, wodurch automatisch eine weitere UIVisualEffectViewin der Dokumentkontur verschachtelte Lebendigkeit erstellt wird , wobei die Lebendigkeit standardmäßig aktiviert ist. Sie können dem verschachtelten Element UIView(wieder die contentViewEigenschaft von UIVisualEffectView) eine Beschriftung oder Textansicht hinzufügen , um den gleichen Effekt zu erzielen wie das UI-Element "> Folie zum Entsperren".

Geben Sie hier die Bildbeschreibung ein

Oh
quelle
Können Sie bestätigen, dass das, was durchscheint, tatsächlich verschwommen ist? Mein Bild (was Sie in Ihrer Hierarchie "BackgroundPhoto" genannt haben) wird nur unter einer Ansicht "Unschärfestil: Dunkel durchscheinend" abgeblendet. (Release-Version von Xcode 6.01 und mit dem iOS-Simulator)
Tobinjim
Was meinst du mit "ist nur gedimmt"? Sie glauben nicht, dass es dann verschwommen ist?
Ohhh
Okay, ich werde in ein paar Stunden einen Blick darauf werfen.
Ohhh
Vielen Dank! Sie haben eine Ansichtshierarchie auf Ihrem BackgroundPhoto, die in den Screenshots reduziert ist ... Ich habe gerade eine UIImageView verwendet und ihr ein Foto zugewiesen (ein heller Hund vor grünem Hintergrund - die scharfe Definition zwischen den weißen Beinen und dem grünen Gras ist in der visuellen Effektansicht genauso scharf wie in nicht).
Tobinjim
1
Ich habe gesehen, dass durch Ändern der Art der Unschärfe in Dunkel das Etikett weiß wird ...
Daniel
8

Ich bevorzuge das Erstellen von visuellen Effekten über Storyboard - kein Code zum Erstellen oder Verwalten von UI-Elementen. Es gibt mir auch volle Unterstützung für die Landschaft. Ich habe eine kleine Demo der Verwendung von UIVisualEffects mit Unschärfe und auch Vibrancy gemacht.

Demo auf Github

Patrik Vaberer
quelle
8

Wenn jemand die Antwort in Swift möchte:

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:

Ab sofort ist es unter dem IB verfügbar, sodass Sie nichts dafür codieren müssen :)

Amit Kalra
quelle
2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}
Ananthu R Krishnan
quelle
Fügen Sie einen Text mit Antwort hinzu, wie Ihre Antwort OP bei der Behebung des veröffentlichten Problems
hilft
0

Dies wird verwendet, um helle oder dunkle Hintergründe zu verwischen, damit Text leichter überlagert werden kann. Sie können optional die Lebendigkeit aktivieren, wodurch der Text neben der Unschärfe in einer hellen, kontrastierenden Farbe gerendert wird.

Xab Ion
quelle