iOS 7 Translucent Modal View Controller


77

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.

App Store-Startseite Modale Ansicht im App Store


Ich mag Ihre Frage
Tà Truhoada

@ Ian - Sie sollten Sebastian Hojas Antwort akzeptieren
gblazex

Antworten:


132

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.

Geben Sie hier die Bildbeschreibung ein


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];
}


@OneManBand Link hinzugefügt. Vielen Dank!
Sebastian Hojas

3
Dies verhält sich nicht ganz wie der Modal View Controller des App Store, der die darunter liegenden Elemente - einschließlich der animierten Apps - dynamisch verwischt.
Vadoff

2
Seit iOS 8 gibt es endlich einen direkten Weg, um diesen Effekt über zu erreichen UIModalPresentationOverCurrentContext. Siehe Andrew Plummer, mxcl und Andrey Konstantinovs Antwort unten.
Renfei Song

Das bleibt nicht verschwommen? Bei Verwendung der iOS 8-Methode wird der Hintergrund beim Übergang unscharf und der erste Ansichts-Controller wird transparent angezeigt. Der modale Ansichts-Controller wird jedoch nach dem vollständigen Laden schwarz.
Crashalot

25

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)

15

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];

1
Die Überlagerung scheint auf der Draufsichtsebene hinzugefügt zu werden
c9s

1
Das bleibt nicht verschwommen? Bei Verwendung der iOS 8-Methode wird der Hintergrund beim Übergang unscharf und der erste Ansichts-Controller wird transparent angezeigt. Der modale Ansichts-Controller wird jedoch nach dem vollständigen Laden schwarz. - Crashalot gerade bearbeiten
Crashalot

@Crashalot Haben Sie Einstellungen wie das Ändern des UIModalPresentationOverCurrentContext in Vollbild geändert?
Andrew Plummer

1
Um @Crashalot hinzuzufügen, wenn Sie diesen modalen Präsentationsstil nicht verwenden, wird die darunter liegende VC nicht mehr "angezeigt", sobald die Modalität aktiviert ist. Daher wird sie "schwarz" (nichts darunter)
Andrew Plummer

12

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


und wie können Sie den hinteren ViewController behalten, während das Modal aktiv ist? in meinem Fall geht der hintere VC weg ..
João Nunes

Dies ist nicht der Fall, da der Back ViewController nur ein mattes Bild auf dem Modal Viewcontroller ist.
rckoenes

10

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.


Was ist mainButtonViewController?
Christijk

@christijk es sollte fantasievoller ViewController sein (es ist jetzt). Vielen Dank für den Hinweis.
Andrei Konstantinov

9

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.




5

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


Ist die Präsentation einer Ansicht mit Animation, die von einem App Store für die UIToolbar-Ansicht unterstützt wird, sicher?
Brad Goss

Funktioniert es, wenn der Presenting View Controller ein Uinavigationcontroller ist?
David Hernandez


5

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.


2

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


1

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.
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.