iOS 7 Translucent Modal View Controller

Die App Store App unter iOS 7 verwendet einen Milchglaseffekt, bei dem die Ansicht dahinter sichtbar ist. Verwendet dies eine in iOS 7 integrierte API oder handelt es sich um benutzerdefinierten Code? Ich hatte gehofft, dass es das erstere sein würde, aber ich kann keine offensichtlichen Referenzen in der Dokumentation sehen. Offensichtliche Dinge wie (wie das Festlegen der Alpha-Eigenschaft in der Modalansicht) scheinen keine Auswirkungen zu haben.

Um ein Beispiel anzuzeigen, öffnen Sie die App Store-App und drücken Sie die Schaltfläche oben rechts.

Mit der Veröffentlichung von iOS 8.0 ist es nicht mehr erforderlich, ein Bild abzurufen und zu verwischen. Wie Andrew Plummer betonte, können Sie UIVisualEffectView mit UIBlurEffect verwenden .

UIViewController * contributeViewController = [[UIViewController alloc] init];
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *beView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
beView.frame = self.view.bounds;

contributeViewController.view.frame = self.view.bounds;
contributeViewController.view.backgroundColor = [UIColor clearColor];
[contributeViewController.view insertSubview:beView atIndex:0];
contributeViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:contributeViewController animated:YES completion:nil];

Lösung, die vor iOS 8 funktioniert

Ich möchte auf die Antwort von rckoenes eingehen:

Wie bereits erwähnt, können Sie diesen Effekt erzielen, indem Sie:

1. Konvertieren Sie die zugrunde liegende UIView in ein UIImage
2. Verwischen Sie das UIImage
3. Legen Sie das UIImage als Hintergrund Ihrer Ansicht fest.

Klingt nach viel Arbeit, ist aber eigentlich ziemlich unkompliziert erledigt:

1. Erstellen Sie eine Kategorie von UIView und fügen Sie die folgende Methode hinzu:

-(UIImage *)convertViewToImage
{
    UIGraphicsBeginImageContext(self.bounds.size);
    [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

2. Erstellen Sie ein Bild der aktuellen Ansicht und verwischen Sie es mithilfe der Bildeffektkategorie von Apple ( Download ).

UIImage* imageOfUnderlyingView = [self.view convertViewToImage];
imageOfUnderlyingView = [imageOfUnderlyingView applyBlurWithRadius:20
                             tintColor:[UIColor colorWithWhite:1.0 alpha:0.2]
                 saturationDeltaFactor:1.3
                             maskImage:nil];

3. Legen Sie es als Hintergrund für Ihre Überlagerung fest.

-(void)viewDidLoad
{
   self.view.backgroundColor = [UIColor clearColor];
   UIImageView* backView = [[UIImageView alloc] initWithFrame:self.view.frame];
   backView.image = imageOfUnderlyingView;
   backView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
   [self.view addSubview:backView];
}

Gerade die Lösung von Sebastian Hojas in Swift neu implementiert:

1. Erstellen Sie eine UIView-Erweiterung und fügen Sie die folgende Methode hinzu:

extension UIView {
    func convertViewToImage() -> UIImage{
        UIGraphicsBeginImageContext(self.bounds.size);
        self.drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        return image;
    }
}

2. Erstellen Sie ein Bild der aktuellen Ansicht und verwischen Sie es mit dem Bildeffekt von Apple (ich habe hier in Swift eine Neuimplementierung gefunden: SwiftUIImageEffects

var imageOfUnderlyingView = self.view.convertViewToImage()
imageOfUnderlyingView = imageOfUnderlyingView.applyBlurWithRadius(2, tintColor: UIColor(white: 0.0, alpha: 0.5), saturationDeltaFactor: 1.0, maskImage: nil)!

3. Legen Sie es als Hintergrund für Ihre Überlagerung fest.

let backView = UIImageView(frame: self.view.frame)
backView.image = imageOfUnderlyingView
backView.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.5)
view.addSubview(backView)

Ich denke, dies ist die einfachste Lösung für einen Modal View Controller, der alles mit einer schönen Unschärfe überlagert (iOS8).

    UIViewController * contributeViewController = [[UIViewController alloc] init];

    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *beView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    beView.frame = self.view.bounds;

    contributeViewController.view.frame = self.view.bounds;
    contributeViewController.view.backgroundColor = [UIColor clearColor];
    [contributeViewController.view insertSubview:beView atIndex:0];
    contributeViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

    [self presentViewController:contributeViewController animated:YES completion:nil];

Im iOS 7 SDK ist keine API verfügbar, mit der Sie den zugrunde liegenden Ansichts-Controller "einfrieren" können.

Was ich getan habe, ist, die darunter liegende Ansicht in ein Bild zu rendern, das ich dann gefrostet und als Hintergrund die Ansicht festgelegt habe, die präsentiert wird.

Apple bietet hierfür ein gutes Beispiel: https://developer.apple.com/downloads/index.action?name=WWDC%202013

Das gewünschte Projekt heißt: iOS_RunningWithASnap

Ein etwas einfacherer Weg, dies zu erreichen (basierend auf Andrew Plummers Antwort) mit Interface Builder (außerdem werden Nebenwirkungen entfernt, die in Andrews Antwort erscheinen):

• Fügen Sie in IB Visual View View zu Ihrem View Controller unter Ihren anderen Ansichten hinzu.
• Stellen Sie die oberen, unteren, linken und rechten Einschränkungen von der visuellen Effektansicht zur oberen (übergeordneten) Ansicht ein und setzen Sie alle auf 0.
• Unschärfestil einstellen;
• Fügen Sie den Code hinzu, in dem Sie Ihren neuen ausgefallenen View Controller präsentieren:

UIViewController *fancyViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"yourStoryboardIDFOrViewController"];

fancyViewController.view.backgroundColor = [UIColor clearColor];
fancyViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:fancyViewController
                   animated:YES
                 completion:nil];

Tatsächlich sind die zweite und dritte Zeile SEHR wichtig - andernfalls blinkt der Controller und wird dann schwarz.

Seit iOS 8 funktioniert dies:

        let vc = UIViewController()
        vc.view = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
        vc.modalPresentationStyle = .OverFullScreen

        let nc = UINavigationController(rootViewController: vc)
        nc.modalPresentationStyle = .OverFullScreen

        presentViewController(nc, animated: true, completion: nil)

Der Schlüssel ist das .OverFullScreenFlag und stellt sicher, dass die viewController eine unscharfe UIVisualEffectView haben, die die erste sichtbare Ansicht ist.

Wie @rckoenes sagte, gibt es kein von Apple bereitgestelltes Framework, um diesen Effekt zu erzielen. Aber einige Leute da draußen haben bereits gute Alternativen gebaut, wie zum Beispiel diese:

https://github.com/JagCesar/iOS-blur/

Einige alternative Ansätze, die auch unter iOS 5 und 6 funktionieren:

FXBlurView: https://github.com/nicklockwood/FXBlurView

iOS RealtimeBlur: https://github.com/alexdrone/ios-realtimeblur

Ich habe meine Aufnahme des Controllers für unscharfe Ansichten auf [GitHub] [1] hochgeladen. Es kommt auch mit einer Segue-Unterklasse, so dass Sie es in Ihren Storyboards verwenden können.

Repository: https://github.com/datinc/DATBlurSegue

Schnelle und einfache Lösung mit XIB-Unterstützung, die Sie für die alten Schuljungen verwenden können: https://github.com/cezarywojcik/CWPopup

Anstatt den viewController als modalView darzustellen, können Sie ihn als untergeordneten viewController hinzufügen und eine benutzerdefinierte Animation erstellen. Sie müssten dann nur die Standardansicht des viewController in eine UIToolBar in ändern viewDidLoad.

Auf diese Weise können Sie die unscharfe modale Ansicht des Appstores so genau wie möglich nachahmen.

Apple hat die Kategorie UIImageEffect für diese Effekte veröffentlicht. Diese Kategorien sollten manuell zum Projekt hinzugefügt werden und unterstützen iOS7.

Sie können UIToolbar als Hintergrund verwenden. Standardmäßig hat die UIToolbar eine Höhe von 50 Pixel. Fügen Sie der UIToolbar Einschränkungen für das automatische Layout hinzu. Wählen Sie dann die Höhenbeschränkung aus und ändern Sie sie.

Die Hierarchie sieht folgendermaßen aus:

UIView -> clear colour for background.
- UIToolbar
- Other contents.