Erstellen einer verschwommenen Überlagerungsansicht

Question

In der Musik-App des neuen iOS sehen wir ein Albumcover hinter einer Ansicht, die es verwischt.

Wie kann so etwas erreicht werden? Ich habe die Dokumentation gelesen, aber dort nichts gefunden.

Answer 1

Hier ist eine schnelle Implementierung in Swift mit der Verwendung von CIGaussianBlur:

func blur(image image: UIImage) -> UIImage {
    let radius: CGFloat = 20;
    let context = CIContext(options: nil);
    let inputImage = CIImage(CGImage: image.CGImage!);
    let filter = CIFilter(name: "CIGaussianBlur");
    filter?.setValue(inputImage, forKey: kCIInputImageKey);
    filter?.setValue("\(radius)", forKey:kCIInputRadiusKey);
    let result = filter?.valueForKey(kCIOutputImageKey) as! CIImage;
    let rect = CGRectMake(radius * 2, radius * 2, image.size.width - radius * 4, image.size.height - radius * 4)
    let cgImage = context.createCGImage(result, fromRect: rect);
    let returnImage = UIImage(CGImage: cgImage);

    return returnImage;
}

Answer 2

Ich denke, die einfachste Lösung dafür ist, UIToolbar zu überschreiben, der in iOS 7 alles dahinter verschwommen macht. Es ist ziemlich hinterhältig, aber es ist sehr einfach für Sie zu implementieren und schnell!

Sie können es mit jeder Ansicht machen, machen Sie sie einfach zu einer Unterklasse von UIToolbar anstelle von UIView. Sie können es sogar mit einer UIViewController View Eigenschaft machen, zum Beispiel...

1) Erstellen Sie eine neue Klasse, die eine "Unterklasse von" UIViewController ist, und wählen Sie das Kästchen für "Mit XIB für Benutzeroberfläche".

2) Wählen Sie die Ansicht aus und gehen Sie zum Identitätsinspektor im rechten Panel (Alt-Befehl-3). Ändern Sie die "Klasse" zu UIToolbar. Gehen Sie nun zum Attributinspektor (Alt-Befehl-4) und ändern Sie die "Hintergrund" Farbe auf "Transparente Farbe".

3) Fügen Sie eine Unteransicht zur Hauptansicht hinzu und verbinden Sie sie über ein IBOutlet in Ihrer Schnittstelle. Nennen Sie es backgroundColorView. Es wird etwas wie folgt aussehen, als private Kategorie in der Implementierungsdatei (.m).

@interface BlurExampleViewController ()
@property (weak, nonatomic) IBOutlet UIView *backgroundColorView;
@end

4) Gehen Sie zur Implementierungsdatei des View-Controllers (.m) und ändern Sie die Methode -viewDidLoad wie folgt:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.barStyle = UIBarStyleBlack; // das wird einen schwarzen Farbschimmer wie im Originalbeitrag geben
    self.backgroundColorView.opaque = NO;
    self.backgroundColorView.alpha = 0.5;
    self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
}

Dies gibt Ihnen eine dunkelgraue Ansicht, die alles dahinter verschwommen macht. Keine lustigen Geschäfte, keine langsame Core Image-Verschwommenheit, verwendend alles, was Ihnen vom Betriebssystem/ SDK zur Verfügung gestellt wird.

Sie können die Ansicht dieses View-Controllers zu einer anderen Ansicht hinzufügen, wie folgt:

[self addChildViewController:self.blurViewController];
[self.view addSubview:self.blurViewController.view];
[self.blurViewController didMoveToParentViewController:self];

// animieren Sie den self.blurViewController in die Ansicht

Lassen Sie mich wissen, wenn etwas unklar ist, ich helfe gerne!

---

Bearbeiten

UIToolbar wurde in 7.0.3 geändert, um bei Verwendung eines farbigen Schimmers möglicherweise unerwünschte Effekte zu erzeugen.

Früher konnten wir die Farbe mit barTintColor setzen, aber wenn Sie das zuvor gemacht haben, müssen Sie die Alphakomponente auf weniger als 1 setzen. Andernfalls ist Ihre UIToolbar eine komplett undurchsichtige Farbe - ohne Schimmer.

Dies kann wie folgt erreicht werden: (wobei self eine Unterklasse von UIToolbar ist)

UIColor *color = [UIColor blueColor]; // zum Beispiel
self.barTintColor = [color colorWithAlphaComponent:0.5];

Dies gibt der verschwommenen Ansicht einen bläulichen Farbton.

Answer 3

Benutzerdefinierte Unschärfeskala

Sie können es versuchen UIVisualEffectView mit benutzerdefinierter Einstellung als -

class BlurViewController: UIViewController {
    private let blurEffect = (NSClassFromString("_UICustomBlurEffect") as! UIBlurEffect.Type).init()

    override func viewDidLoad() {
        super.viewDidLoad()
        let blurView = UIVisualEffectView(frame: UIScreen.main.bounds)
        blurEffect.setValue(1, forKeyPath: "blurRadius")
        blurView.effect = blurEffect
        view.addSubview(blurView)
    }   
}

Ausgabe:- für blurEffect.setValue(1... & blurEffect.setValue(2..

Answer 4

Falls dies jemandem hilft, hier ist eine schnelle Erweiterung, die ich basierend auf der Antwort von Jordan H erstellt habe. Sie ist in Swift 5 geschrieben und kann von Objective-C aus verwendet werden.

extension UIView {

    @objc func blurBackground(style: UIBlurEffect.Style, fallbackColor: UIColor) {
        if !UIAccessibility.isReduceTransparencyEnabled {
            self.backgroundColor = .clear

            let blurEffect = UIBlurEffect(style: style)
            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            //always fill the view
            blurEffectView.frame = self.self.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            self.insertSubview(blurEffectView, at: 0)
        } else {
            self.backgroundColor = fallbackColor
        }
    }

}

HINWEIS: Wenn Sie den Hintergrund eines UILabel verwischen möchten, ohne den Text zu beeinflussen, sollten Sie einen Container UIView erstellen, das UILabel zur Container UIView als Subview hinzufügen, die Hintergrundfarbe des UILabels auf UIColor.clear setzen und dann blurBackground(style: UIBlurEffect.Style, fallbackColor: UIColor) auf die Container UIView aufrufen. Hier ist ein schnelles Beispiel dafür in Swift 5:

let frame = CGRect(x: 50, y: 200, width: 200, height: 50)
let containerView = UIView(frame: frame)
let label = UILabel(frame: frame)
label.text = "Einige Text"
label.backgroundColor = UIColor.clear
containerView.addSubview(label)
containerView.blurBackground(style: .dark, fallbackColor: UIColor.black)

Answer 5

Die akzeptierte Antwort ist richtig, aber hier fehlt ein wichtiger Schritt: Wenn diese Ansicht - für die du einen verwischten Hintergrund möchtest - mit [self presentViewController:vc animated:YES completion:nil] präsentiert wird.

Standardmäßig wird dadurch der Blur aufgehoben, da UIKit die Ansicht des Präsentators entfernt, die du eigentlich verwischst. Um diese Entfernung zu vermeiden, füge diese Zeile vor der vorherigen hinzu:

vc.modalPresentationStyle = UIModalPresentationOverFullScreen;

Oder verwende andere Over -Stile.