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

OBJECTIVE-C

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = self.accessImageView.bounds;
[self.accessImageView addSubview:visualEffectView];

SWIFT 3.0

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

von : https://stackoverflow.com/a/24083728/4020910

Answer 2

Die Verwendung von UIImageEffects

Für Personen, die mehr Kontrolle wünschen, könnte man Apples UIImageEffects Beispielcode verwenden.

Den Code für UIImageEffects kannst du von der Apple Developer Library kopieren: Bild verschwommen machen und einfärben

Und so wendet man es an:

#import "UIImageEffects.h"
...

self.originalImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"deinBild.png"]];

Answer 3

func blurBackgroundUsingImage(image: UIImage)
{
    var frame                   = CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)
    var imageView               = UIImageView(frame: frame)
    imageView.image             = image
    imageView.contentMode       = .ScaleAspectFill
    var blurEffect              = UIBlurEffect(style: .Light)
    var blurEffectView          = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame        = frame
    var transparentWhiteView    = UIView(frame: frame)
    transparentWhiteView.backgroundColor = UIColor(white: 1.0, alpha: 0.30)
    var viewsArray              = [imageView, blurEffectView, transparentWhiteView]

    for index in 0..

Answer 4

Diese Antwort basiert auf Mitja Semolic's exzellenter früherer Antwort. Ich habe sie auf Swift 3 umgewandelt, eine Erklärung dazu hinzugefügt, was in Kommentaren passiert, sie zu einer Erweiterung eines UIViewController gemacht, damit jeder VC es nach Belieben aufrufen kann, ein unverwischtes View hinzugefügt, um eine selektive Anwendung zu zeigen, und einen Abschlussblock hinzugefügt, damit der aufrufende View-Controller nach Abschluss des Verwischens tun kann, was er möchte.

    import UIKit
//Diese Erweiterung implementiert eine Verwischung des gesamten Bildschirms, zeigt eine HUD an und wartet dann und entfernt die Ansicht.
    extension UIViewController {
        func blurAndShowHUD(duration: Double, message: String, completion: @escaping () -> Void) { //mit Abschlussblock
            //1. Erstellen des Verwischeffekts & des Bereichs, den er einnehmen wird
            let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
            let blurEffectView = UIVisualEffectView()//(effect: blurEffect)
            blurEffectView.frame = self.view.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        //2. Fügen Sie den Effektbereich zum Hauptbereich hinzu
            self.view.addSubview(blurEffectView)
        //3. Erstellen des HUDs und hinzufügen zum Hauptbereich
        let hud = HudView.getHUD(view: self.view, withMessage: message)
        self.view.addSubview(hud)
        //4. Beginnen Sie den Verwischeffekt auf den Effektbereich anzuwenden
        UIView.animate(withDuration: 0.01, animations: {
            blurEffectView.effect = blurEffect
        })
        //5. Halten Sie die Anwendung des Verwischeffekts an, um den gewünschten Verwischungsgrad zu erreichen
        self.view.pauseAnimationsInThisView(delay: 0.004)
        //6. Entfernen Sie die Ansicht (& den HUD) nach Abschluss der Dauer
        DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
            blurEffectView.removeFromSuperview()
            hud.removeFromSuperview()
            self.view.resumeAnimationsInThisView()
            completion()
        }
    }
}

extension UIView {
    public func pauseAnimationsInThisView(delay: Double) {
        let time = delay + CFAbsoluteTimeGetCurrent()
        let timer = CFRunLoopTimerCreateWithHandler(kCFAllocatorDefault, time, 0, 0, 0, { timer in
            let layer = self.layer
            let pausedTime = layer.convertTime(CACurrentMediaTime(), from: nil)
            layer.speed = 0.0
            layer.timeOffset = pausedTime
        })
        CFRunLoopAddTimer(CFRunLoopGetCurrent(), timer, CFRunLoopMode.commonModes)
    }
    public func resumeAnimationsInThisView() {
        let pausedTime  = layer.timeOffset

        layer.speed = 1.0
        layer.timeOffset = 0.0
        layer.beginTime = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
    }
}

Ich habe bestätigt, dass es mit sowohl iOS 10.3.1 als auch iOS 11 funktioniert

Answer 5

Ein wichtiges Supplement zu @Joey's Antwort

Dies gilt für eine Situation, in der Sie einen Hintergrund mit verschwommenem Hintergrund präsentieren möchten UIViewController mit UINavigationController.

// Nehmen wir an, Sie haben den Weichzeichnungseffekt mit Ihrem präsentierten Ansicht-Controller durchgeführt
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController];

// das ist sehr wichtig, wenn Sie dies nicht tun, wird der Weichzeichnungseffekt nach dem Anzeigen des Ansichtscontrollers verdunkelt
// Der Grund dafür ist, dass Sie tatsächlich den Navigationscontroller präsentieren, nicht den präsentierten Controller
// Bitte beachten Sie, dass es "OverFullScreen" und nicht "OverCurrentContext" ist
nav.modalPresentationStyle = UIModalPresentationOverFullScreen;

UIViewController *präsentierterViewController = [[UIViewController alloc] init]; 
// die Moduspräsentationsweise des präsentierten Ansicht-Controllers ist "OverCurrentContext"
präsentierterViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[presentierenderViewController presentViewController:nav animated:YES completion:nil];

Viel Spaß!