Erstellen einer unscharfen Überlagerungsansicht

Antworten:

552

Mit UIVisualEffectViewdiesem Effekt können Sie diesen Effekt erzielen. Dies ist eine native API, die hinsichtlich Leistung und hervorragender Akkulaufzeit optimiert wurde. Außerdem ist sie einfach zu implementieren.

Schnell:

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

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

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

Ziel c:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

Wenn Sie diesen Ansichts-Controller modal präsentieren, um den zugrunde liegenden Inhalt zu verwischen, müssen Sie den modalen Präsentationsstil auf Über aktuellen Kontext setzen und die Hintergrundfarbe auf Löschen setzen, um sicherzustellen, dass der zugrunde liegende Ansichts-Controller sichtbar bleibt, sobald dieser über dem Bildschirm angezeigt wird.

Jordan H.
quelle
7
Zur Verdeutlichung des insertSubView:belowSubView:Kommentars in diesem Code habe ich Folgendes verwendet, um die Unschärfe als Hintergrund für die Ansicht view.insertSubview(blurEffectView, atIndex: 0)
festzulegen
2
Ist es unter Bezugnahme auf die obige Antwort notwendig, "if (! UIAccessibilityIsReduceTransparencyEnabled ())" zu überprüfen, oder können wir das überspringen?
GKK
3
Wenn Sie Ihren View Controller präsentieren, stellen Sie sicher, dass Sie modalPresentationStyle = .overCurrentContext ändern und die Hintergrundfarbe als klar
festlegen
3
Funktioniert super !!! Benötigen Sie eine einzelne Änderung: [self.view insertSubview: blurEffectView atIndex: 1];
Abhishek Thapliyal
2
In iOS 11 ist eine manuelle Überprüfung nicht erforderlich UIAccessibilityIsReduceTransparencyEnabled().
Nate Whittaker
284

Kernbild

Da das Bild im Screenshot statisch ist, können Sie es CIGaussianBlurvon Core Image aus verwenden (erfordert iOS 6). Hier ist ein Beispiel: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.m

Wohlgemerkt, dies ist langsamer als die anderen Optionen auf dieser Seite.

#import <QuartzCore/QuartzCore.h>

- (UIImage*) blur:(UIImage*)theImage
{   
    // ***********If you need re-orienting (e.g. trying to blur a photo taken from the device camera front facing camera in portrait mode)
    // theImage = [self reOrientIfNeeded:theImage];

    // create our blurred image
    CIContext *context = [CIContext contextWithOptions:nil];
    CIImage *inputImage = [CIImage imageWithCGImage:theImage.CGImage];

    // setting up Gaussian Blur (we could use one of many filters offered by Core Image)
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    [filter setValue:[NSNumber numberWithFloat:15.0f] forKey:@"inputRadius"];
    CIImage *result = [filter valueForKey:kCIOutputImageKey];

    // CIGaussianBlur has a tendency to shrink the image a little, 
    // this ensures it matches up exactly to the bounds of our original image
    CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

    UIImage *returnImage = [UIImage imageWithCGImage:cgImage];//create a UIImage for this function to "return" so that ARC can manage the memory of the blur... ARC can't manage CGImageRefs so we need to release it before this function "returns" and ends.
    CGImageRelease(cgImage);//release CGImageRef because ARC doesn't manage this on its own.

    return returnImage;

    // *************** if you need scaling
    // return [[self class] scaleIfNeeded:cgImage];
}

+(UIImage*) scaleIfNeeded:(CGImageRef)cgimg {
    bool isRetina = [[[UIDevice currentDevice] systemVersion] intValue] >= 4 && [[UIScreen mainScreen] scale] == 2.0;
    if (isRetina) {
        return [UIImage imageWithCGImage:cgimg scale:2.0 orientation:UIImageOrientationUp];
    } else {
        return [UIImage imageWithCGImage:cgimg];
    }
}

- (UIImage*) reOrientIfNeeded:(UIImage*)theImage{

    if (theImage.imageOrientation != UIImageOrientationUp) {

        CGAffineTransform reOrient = CGAffineTransformIdentity;
        switch (theImage.imageOrientation) {
            case UIImageOrientationDown:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, M_PI);
                break;
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformRotate(reOrient, M_PI_2);
                break;
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, 0, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, -M_PI_2);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationUpMirrored:
                break;
        }

        switch (theImage.imageOrientation) {
            case UIImageOrientationUpMirrored:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.height, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationDown:
            case UIImageOrientationLeft:
            case UIImageOrientationRight:
                break;
        }

        CGContextRef myContext = CGBitmapContextCreate(NULL, theImage.size.width, theImage.size.height, CGImageGetBitsPerComponent(theImage.CGImage), 0, CGImageGetColorSpace(theImage.CGImage), CGImageGetBitmapInfo(theImage.CGImage));

        CGContextConcatCTM(myContext, reOrient);

        switch (theImage.imageOrientation) {
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.height,theImage.size.width), theImage.CGImage);
                break;

            default:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.width,theImage.size.height), theImage.CGImage);
                break;
        }

        CGImageRef CGImg = CGBitmapContextCreateImage(myContext);
        theImage = [UIImage imageWithCGImage:CGImg];

        CGImageRelease(CGImg);
        CGContextRelease(myContext);
    }

    return theImage;
}

Stapelunschärfe (Box + Gauß)

  • StackBlur Dies implementiert eine Mischung aus Box- und Gaußscher Unschärfe. 7x schneller als nicht beschleunigter Gaußscher, aber nicht so hässlich wie Box Blur. Eine Demo finden Sie hier (Java-Plugin-Version) oder hier (JavaScript-Version). Dieser Algorithmus wird in KDE und Camera + und anderen verwendet. Das Accelerate Framework wird nicht verwendet, ist aber schnell.

Framework beschleunigen

  • In der Sitzung „Implementieren der Benutzeroberfläche unter iOS“ von WWDC 2013 erklärt Apple, wie ein unscharfer Hintergrund erstellt wird (um 14:30 Uhr), und erwähnt eine Methode, applyLightEffectdie im Beispielcode mithilfe von Accelerate.framework implementiert ist.

  • GPUImage verwendet OpenGL-Shader, um dynamische Unschärfen zu erstellen. Es gibt verschiedene Arten von Unschärfen: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Es gibt sogar einen GPUImageiOSBlurFilter, der „den vom iOS 7-Kontrollfeld bereitgestellten Unschärfeeffekt vollständig replizieren sollte“ ( Tweet , Artikel ). Der Artikel ist detailliert und informativ.

    - (UIImage *) blurryGPUImage: (UIImage *) Bild mit BlurLevel: (NSInteger) blur {
        GPUImageFastBlurFilter * blurFilter = [GPUImageFastBlurFilter neu];
        blurFilter.blurSize = blur;
        UIImage * result = [blurFilter imageByFilteringImage: image];
        Ergebnis zurückgeben;
    }}

Andere Sachen

Andy Matuschak sagte auf Twitter: "Wissen Sie, viele Orte, an denen es so aussieht, als würden wir es in Echtzeit tun, sind statisch mit cleveren Tricks."

Auf doubleencore.com heißt es: „Wir haben festgestellt, dass ein Unschärferadius von 10 pt plus eine Erhöhung der Sättigung um 10 pt den Unschärfeeffekt von iOS 7 unter den meisten Umständen am besten nachahmt.“

Ein Blick auf die privaten Header von Apples SBFProceduralWallpaperView .

Schließlich ist dies keine echte Unschärfe, aber denken Sie daran, dass Sie rasterizationScale festlegen können, um ein pixeliges Bild zu erhalten: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/

Jano
quelle
Danke für die Antwort! Ein Problem ist gelöst. Aber wir haben noch ein Problem. Wie bekomme ich ein Titelbild in iOS 7. Wenn es möglich ist?
kondratyevdev
Wenn Sie meinen, wie Sie das Hintergrundbild von Ihrem Telefon erhalten, wissen Sie noch nichts. Ich habe diese Funktionalität in den API-Unterschieden nicht gesehen . Möglicherweise wird eine private API verwendet.
Jano
Eine Sache, die mir aufgefallen ist (und ich könnte völlig falsch liegen), ist, dass Apples Unschärfe auch eine kleine Farbsättigung zu verursachen scheint. Ich denke also nicht, dass es eine einfache Gaußsche Unschärfe ist.
Xtravar
Denken Sie an den Skalierungsfaktor, wenn Sie das zurückgeben, UIImagesonst wird es auf einem Retina-Gerät viel zu groß aussehen ...
Stephen Darlington
Wissen Sie, ob ein solcher Effekt auf eine UITableViewCell angewendet werden kann, ohne die Leistung zu beeinträchtigen?
Leonardo
15

Ich habe beschlossen, eine schriftliche Objective-C-Version aus der akzeptierten Antwort zu veröffentlichen, um mehr Optionen in dieser Frage bereitzustellen.

- (UIView *)applyBlurToView:(UIView *)view withEffectStyle:(UIBlurEffectStyle)style andConstraints:(BOOL)addConstraints
{
  //only apply the blur if the user hasn't disabled transparency effects
  if(!UIAccessibilityIsReduceTransparencyEnabled())
  {
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = view.bounds;

    [view addSubview:blurEffectView];

    if(addConstraints)
    {
      //add auto layout constraints so that the blur fills the screen upon rotating device
      [blurEffectView setTranslatesAutoresizingMaskIntoConstraints:NO];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTop
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTop
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeBottom
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeBottom
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeLeading
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeLeading
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTrailing
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTrailing
                                                      multiplier:1
                                                        constant:0]];
    }
  }
  else
  {
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
  }

  return view;
}

Die Einschränkungen können entfernt werden, wenn Sie Incase möchten, wenn Sie nur den Hochformatmodus unterstützen, oder wenn ich dieser Funktion einfach ein Flag hinzufüge, um sie zu verwenden oder nicht.

valbu17
quelle
1
Für neue Leute (mich) ist eine Möglichkeit, die obige Methode aufzurufen: [self applyBlurToView: self.view withEffectStyle: UIBlurEffectStyleDark andConstraints: YES]; (Danke NorthBlast)
tmr
14

Ich glaube nicht, dass ich den Code posten darf, aber der obige Beitrag, in dem der WWDC-Beispielcode erwähnt wird, ist korrekt. Hier ist der Link: https://developer.apple.com/downloads/index.action?name=WWDC%202013

Die gesuchte Datei ist die Kategorie in UIImage und die Methode ist applyLightEffect.

Wie ich oben in einem Kommentar erwähnt habe, hat der Apple Blur eine Sättigung und andere Dinge außer Unschärfe. Eine einfache Unschärfe reicht nicht aus ... wenn Sie ihren Stil emulieren möchten.

xtravar
quelle
8
Diese Verbindung ist unterbrochen. Hier ist der richtige Link: developer.apple.com/downloads/index.action?name=WWDC%202013
olivaresF
Beachten Sie, dass dieser Beispielcode XCode 5.0 und iOS SDK 7.0 erfordert (die noch nicht öffentlich veröffentlicht wurden)
Mike Gledhill
Vielen Dank für den festen Link, aber es gibt ein paar Beispielcodes, welcher die relevante UIImage-Kategorie enthält?
Leonardo
1
@ Leonardo iOS_RunningWithASnap.zip
John Starr Dewar
1
... oder iOS_UIImageEffects.zip ist genau dies.
John Starr Dewar
9

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

Sie können es mit jeder Ansicht tun, machen Sie es einfach zu einer Unterklasse von UIToolbarstatt UIView. Sie können dies sogar mit UIViewControllerder viewEigenschaft eines tun , zum Beispiel ...

1) Erstellen Sie eine neue Klasse, die eine "Unterklasse von" ist, UIViewControllerund aktivieren Sie das Kontrollkästchen für "Mit XIB für Benutzeroberfläche".

2) Wählen Sie die Ansicht und gehen Sie zum Identitätsinspektor im rechten Bereich (Alt-Befehl-3). Ändern Sie die "Klasse" in UIToolbar. Gehen Sie nun zum Attributinspektor (Alt-Befehl-4) und ändern Sie die Farbe "Hintergrund" in "Farbe löschen".

3) Fügen Sie der Hauptansicht eine Unteransicht hinzu und verbinden Sie sie mit einem IBOutlet in Ihrer Benutzeroberfläche. Nennen Sie es backgroundColorView. Es wird ungefähr so ​​aussehen, als private Kategorie in der Implementierungsdatei ( .m).

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

4) Gehen Sie zur View Controller Implementation ( .m) - Datei und ändern Sie die -viewDidLoadMethode wie folgt:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.barStyle = UIBarStyleBlack; // this will give a black blur as in the original post
    self.backgroundColorView.opaque = NO;
    self.backgroundColorView.alpha = 0.5;
    self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
}

Dadurch erhalten Sie eine dunkelgraue Ansicht, die alles dahinter verwischt. Kein lustiges Geschäft, keine langsame Unschärfe des Kernbilds, mit allem, was Ihnen vom OS / SDK zur Verfügung gestellt wird.

Sie können die Ansicht dieses Ansichtscontrollers wie folgt zu einer anderen Ansicht hinzufügen:

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

// animate the self.blurViewController into view

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


Bearbeiten

Die UIToolbar wurde in 7.0.3 geändert, um bei Verwendung einer farbigen Unschärfe einen möglicherweise unerwünschten Effekt zu erzielen.

Früher konnten wir die Farbe mit einstellen barTintColor, aber wenn Sie dies zuvor getan haben, müssen Sie die Alpha-Komponente auf weniger als 1 einstellen. Andernfalls hat Ihre UIToolbar eine vollständig undurchsichtige Farbe - ohne Unschärfe.

Dies kann wie folgt erreicht werden: (unter Berücksichtigung selfeiner Unterklasse von UIToolbar)

UIColor *color = [UIColor blueColor]; // for example
self.barTintColor = [color colorWithAlphaComponent:0.5];

Dies verleiht der unscharfen Ansicht einen bläulichen Farbton.

Sam
quelle
1
Kein schlechter Mann. Ich habe diese drei Linien in meiner Ansicht verwendet: self.backgroundColorView.opaque = NO; self.backgroundColorView.alpha = 0.5; self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];Aber der Hintergrund ist nicht unscharf, machen Sie einfach einen schönen Übereffekt. Trotzdem danke!
IgniteCoders
1
Mit dieser Technik sehe ich überhaupt keine Unschärfe. Es wird nur eine farbige Überlagerung erstellt.
MusiGenesis
Stellen Sie sicher, dass das farbige Overlay-Alpha kleiner als 1 ist. Sie können eine UIToolbar ohne den Ansichts-Controller verwenden. Dies kann je nach Bedarf einfacher sein.
Sam
ordentlicher Trickmann. Ich habe meine Ansicht im Storyboard in die UIToolbar-Klasse konvertiert und dann den Ansichtshintergrund in klare Farben geändert. Es gab einen weißen unscharfen Hintergrund. Wenn Sie Alpha kleiner als 1 machen, verschwindet der verschwommene Effekt.
Badr
9

Hier ist eine schnelle Implementierung in Swift mit 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;
}
kev
quelle
7

Benutzerdefinierte Unschärfeskala

Sie können UIVisualEffectView mit benutzerdefinierten Einstellungen versuchen , wie -

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.. Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Jack
quelle
3
Die Arbeit wird eingestellt, wenn in der nächsten Version von iOS der Name dieses Parameters geändert wird.
Ariel Bogdziewicz
@ArielBogdziewicz arbeitet derzeit. Ich werde aktualisieren, wenn es eine API-Variation in wwdc gibt.
Jack
Ähm ... nein, Sie möchten niemals auf private APIs zugreifen. Sie sind aus einem bestimmten Grund privat. Sie werden sich ändern, sie werden kaputt gehen und / oder Apple wird Ihre App ablehnen. Verwenden Sie eine andere Methode, es gibt viele. Ein großes Lob für das Finden des Hacks, aber nicht empfohlen.
n13
@ Jack Vielen Dank für diese Antwort! Dies ist die einzige Lösung, die ich für mein Problem gefunden habe: Verwischen einer Ansicht entsprechend der Position einer anderen Ansicht. Ich habe jedoch noch eine andere Frage. Gibt es eine Möglichkeit, meinem UIBlurEffect Lebendigkeit zu verleihen? Wenn das so ist, wie? Muss ich dazu eine andere Ansicht über meiner blurView erstellen? Ich habe es versucht, aber es stürzte immer ab, wenn ich es benutzte. (NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()Würde mich sehr über Hilfe freuen!
Moritz
@ Moritz habe es nicht versucht. Aber es sollte funktionieren. Sie können versuchen und überprüfen.
Jack
7

Mit UIViewPropertyAnimator können Sie auf einfache Weise benutzerdefinierte Unschärfen hinzufügen, ohne mit privaten APIs zu feilschen :

Deklarieren Sie zunächst die Klasseneigenschaft:

var blurAnimator: UIViewPropertyAnimator!

Stellen Sie dann Ihre Unschärfeansicht ein in viewDidLoad():

let blurEffectView = UIVisualEffectView()
blurEffectView.backgroundColor = .clear
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

blurAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [blurEffectView] in
    blurEffectView.effect = UIBlurEffect(style: .light)
}

blurAnimator.fractionComplete = 0.15 // set the blur intensity.    

Hinweis: Diese Lösung ist nicht für UICollectionView/ UITableViewZellen geeignet

Adam Bardon
quelle
1
Dies ist die einzige Lösung, die ich gefunden habe, wenn Sie die Transparenz von UIVisualEffectView steuern möchten.
Denis Kutlubaev
6

Geben Sie hier die Bildbeschreibung ein

Mit Xcode können Sie es einfach tun. Befolgen Sie die Schritte von xcode. Drage visuelle Effektansicht auf Ihrer uiview oder Bildansicht.

Viel Spaß beim Codieren :)

Mehedi Hasan
quelle
5

Die akzeptierte Antwort ist korrekt, aber hier fehlt ein wichtiger Schritt, falls diese Ansicht - für die Sie einen unscharfen Hintergrund wünschen - mit dargestellt wird

[self presentViewController:vc animated:YES completion:nil]

Standardmäßig wird dadurch die Unschärfe aufgehoben, da UIKit die Ansicht des Präsentators entfernt, die Sie tatsächlich verwischen. Um dieses Entfernen zu vermeiden, fügen Sie diese Zeile vor der vorherigen hinzu

vc.modalPresentationStyle = UIModalPresentationOverFullScreen;

Oder verwenden Sie andere OverStile.

Aleksandar Vacić
quelle
3

ZIEL 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

BennyTheNerd
quelle
2

Verwenden von UIImageEffects

Für Leute, die mehr Kontrolle wünschen, können Sie den UIImageEffectsBeispielcode von Apple verwenden.

Sie können den Code für UIImageEffectsaus der Apple Developer Library kopieren : Verwischen und Abtönen eines Bildes

Und so wenden Sie es an:

#import "UIImageEffects.h"
...

self.originalImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];
Zakaria Braksa
quelle
Wie benutze ich das in Swift
Devjme
2
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..<viewsArray.count {
        if let oldView = self.view.viewWithTag(index + 1) {
            var oldView         = self.view.viewWithTag(index + 1)
            // Must explicitly unwrap oldView to access its removeFromSuperview() method as of Xcode 6 Beta 5
            oldView!.removeFromSuperview()
        }
        var viewToInsert        = viewsArray[index]
        self.view.insertSubview(viewToInsert, atIndex: index + 1)
        viewToInsert.tag        = index + 1
    }
}
Durul Dalkanat
quelle
1

Ich habe dies zufällig gefunden, habe wirklich großartige (fast doppelte Ergebnisse mit Apples) erzielt und verwende das Acceleration-Framework. - http://pastebin.com/6cs6hsyQ * Nicht von mir geschrieben

Jake
quelle
8
Es ist eigentlich Apple-Code von WWDC 2013 mit falschem Copyright.
Shmidt
Sind die Codes von WWDC nicht urheberrechtlich geschützt und der Zugriff ist nur Mitgliedern mit kostenpflichtigen Abonnements gestattet?
SAFAD
1
Möglicherweise, aber den Code oben habe ich mit Google gefunden. Ich habe das Urheberrecht nicht geändert und bin davon ausgegangen (und gehe immer noch davon aus), dass es den richtigen Urheberrechtsanspruch hat. Wenn Apple nicht einverstanden ist, sollten sie sich bemühen, es zu beseitigen. Ich sehe die Relevanz nicht.
Jake
1

Diese Antwort basiert auf der hervorragenden früheren Antwort von Mitja Semolic . Ich habe es in Swift 3 konvertiert, eine Erklärung zu den Ereignissen in Kommentaren hinzugefügt, es zu einer Erweiterung eines UIViewControllers gemacht, damit jeder VC es nach Belieben aufrufen kann, eine unscharfe Ansicht hinzugefügt, um eine selektive Anwendung anzuzeigen, und einen Abschlussblock hinzugefügt, damit Der aufrufende Ansichts-Controller kann nach Abschluss der Unschärfe tun, was er will.

    import UIKit
//This extension implements a blur to the entire screen, puts up a HUD and then waits and dismisses the view.
    extension UIViewController {
        func blurAndShowHUD(duration: Double, message: String, completion: @escaping () -> Void) { //with completion block
            //1. Create the blur effect & the view it will occupy
            let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
            let blurEffectView = UIVisualEffectView()//(effect: blurEffect)
            blurEffectView.frame = self.view.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        //2. Add the effect view to the main view
            self.view.addSubview(blurEffectView)
        //3. Create the hud and add it to the main view
        let hud = HudView.getHUD(view: self.view, withMessage: message)
        self.view.addSubview(hud)
        //4. Begin applying the blur effect to the effect view
        UIView.animate(withDuration: 0.01, animations: {
            blurEffectView.effect = blurEffect
        })
        //5. Halt the blur effects application to achieve the desired blur radius
        self.view.pauseAnimationsInThisView(delay: 0.004)
        //6. Remove the view (& the HUD) after the completion of the duration
        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 sowohl mit iOS 10.3.1 als auch mit iOS 11 funktioniert

James Jordan Taylor
quelle
1

Eine wichtige Ergänzung zu @ Joeys Antwort

Dies gilt für eine Situation , in der Sie einen verschwommenen-Hintergrund präsentieren mögen UIViewControllermit UINavigationController.

// suppose you've done blur effect with your presented view controller
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController];

// this is very important, if you don't do this, the blur effect will darken after view did appeared
// the reason is that you actually present navigation controller, not presented controller
// please note it's "OverFullScreen", not "OverCurrentContext"
nav.modalPresentationStyle = UIModalPresentationOverFullScreen;

UIViewController *presentedViewController = [[UIViewController alloc] init]; 
// the presented view controller's modalPresentationStyle is "OverCurrentContext"
presentedViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

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

Genießen!

Steveluoxin
quelle
1

Swift 3 Version von Kevs Antwort auf die Rückgabe eines unscharfen Bildes -

func blurBgImage(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);

        if let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage{

            let rect = CGRect(origin: CGPoint(x: radius * 2,y :radius * 2), size: CGSize(width: image.size.width - radius * 4, height: image.size.height - radius * 4))

            if let cgImage = context.createCGImage(result, from: rect){
                return UIImage(cgImage: cgImage);
                }
        }
        return nil;
    }
Pramod
quelle
1

Code 2019

Hier ist ein ausführlicheres Beispiel mit der erstaunlichen @ AdamBardon-Technik.

@IBDesignable class ButtonOrSomethingWithBlur: UIButton {

    var ba: UIViewPropertyAnimator?
    private lazy var blurry: BlurryBall = { return BlurryBall() }()

    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        // Setup the blurry ball.  BE SURE TO TEARDOWN.
        // Use superb trick to access the internal guassian level of Apple's
        // standard gpu blurrer per stackoverflow.com/a/55378168/294884

        superview?.insertSubview(blurry, belowSubview: self)
        ba = UIViewPropertyAnimator(duration:1, curve:.linear) {[weak self] in
            // note, those duration/curve values are simply unusued
            self?.blurry.effect = UIBlurEffect(style: .extraLight)
        }
        ba?.fractionComplete = live.largeplaybutton_blurfactor
    }

    override func willMove(toSuperview newSuperview: UIView?) {

        // Teardown for the blurry ball - critical

        if newSuperview == nil { print("safe teardown")
            ba?.stopAnimation(true)
            ba?.finishAnimation(at: .current)
        }
    }

    override func layoutSubviews() { super.layoutSubviews()
        blurry.frame = bounds, your drawing frame or whatever
    }

{Nebenbei: Als allgemeine technische Angelegenheit für iOS ist sie didMoveToWindowmöglicherweise besser für Sie geeignet als didMoveToSuperview. Zweitens können Sie den Teardown auf eine andere Weise ausführen, aber der Teardown besteht aus den beiden dort gezeigten Codezeilen.}

BlurryBallist nur ein UIVisualEffectView. Beachten Sie die Eingaben für eine visuelle Effektansicht. Wenn Sie abgerundete Ecken oder was auch immer benötigen, tun Sie dies in dieser Klasse.

class BlurryBall: UIVisualEffectView {

    override init(effect: UIVisualEffect?) { super.init(effect: effect)
        commonInit() }

    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder)
        commonInit() }

    private func commonInit() {
        clipsToBounds = true
        backgroundColor = .clear
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.width / 2
    }
}
Fattie
quelle
0

Apple hat eine Erweiterung für die UIImage-Klasse namens UIImage + ImageEffects.h bereitgestellt. In dieser Klasse haben Sie die gewünschten Methoden, um Ihre Ansicht zu verwischen

Preet
quelle
1
Können Sie weitere Informationen zu diesen Methoden teilen?
Mike Laren
0

Hier ist der Swift 2.0-Code für die Lösung, die in der akzeptierten Antwort bereitgestellt wurde :

    //only apply the blur if the user hasn't disabled transparency effects
    if !UIAccessibilityIsReduceTransparencyEnabled() {
        self.view.backgroundColor = UIColor.clearColor()

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

        self.view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
    } else {
        self.view.backgroundColor = UIColor.blackColor()
    }
RaptoX
quelle
0

Wenn Sie eine dunkle Unschärfeansicht für tableView hinzufügen, wird dies auf wunderbare Weise Folgendes bewirken:

tableView.backgroundColor = .clear
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = tableView.bounds
blurEffectView.autoresizingMask = [.flexibleHeight, .flexibleWidth]


// Assigning blurEffectView to backgroundView instead of addSubview to tableView makes tableView cell not blocked by blurEffectView 
tableView.backgroundView = blurEffectView
Ciao
quelle
0

Sie können Ihre Hintergrundunschärfe direkt mit "Visuelle Effektansicht mit Unschärfe" und "Visuelle Effektansicht mit Unschärfe und Lebendigkeit" erstellen.

Alles, was Sie tun müssen, um Blur Background in der iOS-Anwendung zu erstellen, ist ...

  1. Suchen Sie in der Objektbibliothek nach "Visuelle Effektansicht mit Unschärfe"

Schritt 1 Bild

  1. Ziehen Sie die "Visuelle Effektansicht mit Unschärfe" in Ihr Storyboard und richten Sie sie ein ...

Schritt 2 Bild

  1. Endlich ... Sie machen Ihre App Hintergrund verwischen!

Anwendungslayout vor dem Klicken auf eine Schaltfläche!

Anwendungsansicht Nach dem Klicken auf die Schaltfläche wird der gesamte Anwendungshintergrund unscharf!

Treffen Sie Patel
quelle
0

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 aus Ziel C 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 UILabels verwischen möchten, ohne den Text zu beeinflussen, sollten Sie eine Container-UIView erstellen, das UILabel als Unteransicht zur Container-UIView hinzufügen, die Hintergrundfarbe des UILabels auf UIColor.clear setzen und dann blurBackground (Stil) aufrufen : UIBlurEffect.Style, fallbackColor: UIColor) auf dem Container UIView. Hier ist ein kurzes 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 = "Some Text"
label.backgroundColor = UIColor.clear
containerView.addSubview(label)
containerView.blurBackground(style: .dark, fallbackColor: UIColor.black)
Tyler Wood
quelle
-1

Swift 4:

So fügen Sie ein Overlay oder die Popup-Ansicht hinzu Sie können auch die Container-Ansicht verwenden, mit der Sie einen kostenlosen View Controller erhalten (Sie erhalten die Container-Ansicht aus der üblichen Objektpalette / Bibliothek).

Schritte:

Haben Sie eine Ansicht (ViewForContainer im Bild), die diese Containeransicht enthält, um sie zu dimmen, wenn der Inhalt der Containeransicht angezeigt wird. Schließen Sie die Steckdose im ersten View Controller an

Blenden Sie diese Ansicht aus, wenn 1st VC geladen wird

Beim Klicken auf die Schaltfläche einblenden, geben Sie hier die Bildbeschreibung ein

Um diese Ansicht zu verkleinern, wenn der Inhalt der Containeransicht angezeigt wird, setzen Sie den Hintergrund der Ansichten auf Schwarz und die Deckkraft auf 30%

Ich habe eine Antwort auf die Erstellung der Popview-Ansicht in einer anderen Stackoverflow-Frage hinzugefügt: https://stackoverflow.com/a/49729431/5438240

Naishta
quelle
-3

Die einfache Antwort lautet: Unteransicht hinzufügen und Alpha ändern.

UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
UIView *subView = [[UIView alloc] initWithFrame:popupView.frame];
UIColor * backImgColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_Img.png"]];
subView.backgroundColor = backImgColor;
subView.alpha = 0.5;
[mainView addSubview:subView];
Sohail
quelle