it-swarm.com.de

Anzeige von UIViewController als Popup im iPhone

Da es keine vollständige, endgültige Antwort auf diese häufig wiederkehrende Frage gibt, werde ich sie hier fragen und beantworten.

Oft müssen wir eine UIViewController so präsentieren, dass sie nicht den gesamten Bildschirm abdeckt, wie in der Abbildung unten.

enter image description here

Apple bietet mehrere ähnliche UIViewController-Optionen an, wie etwa UIAlertView, Twitter oder Facebook Share View Controller usw.

Wie können wir diesen Effekt für einen benutzerdefinierten Controller erzielen?

68
CRDave

HINWEIS: Diese Lösung ist in iOS 8 defekt. Ich werde eine neue Lösung so bald wie möglich veröffentlichen.

Ich werde hier mit Storyboard antworten, aber es ist auch ohne Storyboard möglich.

  1. Init: Erstellen Sie zwei UIViewController im Storyboard.

    • sagen wir FirstViewController was normal ist und SecondViewController was das Popup ist .

  2. Modal Segue: Fügen Sie UIButton in FirstViewController ein und erstellen Sie ein Segment dieser UIButton in SecondViewController als modales Segment.

  3. Make Transparent: Wählen Sie nun UIView (UIView), die standardmäßig mit UIViewController erstellt wird, von SecondViewController und ändern Sie ihre Hintergrundfarbe in eine klare Farbe.

  4. Hintergrund verkleinern: Fügen Sie eine UIImageView in SecondViewController hinzu, die den gesamten Bildschirm abdeckt und das Bild auf ein abgeblendetes halbtransparentes Bild setzt. Hier können Sie ein Beispiel erhalten: UIAlertView Hintergrundbild

  5. Display Design: Fügen Sie nun eine UIView hinzu und erstellen Sie ein beliebiges Design, das Sie anzeigen möchten. Hier ist ein Screenshot meines Storyboards storyboard

    • Hier habe ich eine Schaltfläche zum Anmelden hinzugefügt, die SecondViewController als Popup öffnet, um Benutzernamen und Passwort zu fragen
  6. Wichtig: Nun der Hauptschritt. Wir möchten, dass SecondViewController FirstViewController nicht vollständig verbirgt. Wir haben klare Farben eingestellt, aber das reicht nicht aus. Standardmäßig wird Schwarz hinter der Modellpräsentation hinzugefügt. In viewDidLoad von FirstViewController müssen wir eine Codezeile hinzufügen. Sie können es auch an anderer Stelle hinzufügen, es sollte jedoch vor dem Segue ausgeführt werden.

    [self setModalPresentationStyle:UIModalPresentationCurrentContext];

  7. Dismiss: Der Zeitpunkt für die Abweisung hängt von Ihrem Anwendungsfall ab. Dies ist eine modale Präsentation, so dass wir ablassen, was wir für modale Präsentation tun:

    [self dismissViewControllerAnimated:YES completion:Nil];

Das ist alles.....

Anregungen und Kommentare sind jederzeit willkommen.

Demo: Sie können ein Demo-Quellprojekt von Here erhalten: Popup Demo

NEW: Jemand hat dieses Konzept sehr gut gemacht: MZFormSheetController
New: Ich habe einen weiteren Code für diese Art von Funktion gefunden: KLCPopup


iOS 8 Update: Ich habe diese Methode für iOS 7 und iOS 8

+ (void)setPresentationStyleForSelfController:(UIViewController *)selfController presentingController:(UIViewController *)presentingController
{
    if (iOSVersion >= 8.0)
    {
        presentingController.providesPresentationContextTransitionStyle = YES;
        presentingController.definesPresentationContext = YES;

        [presentingController setModalPresentationStyle:UIModalPresentationOverCurrentContext];
    }
    else
    {
        [selfController setModalPresentationStyle:UIModalPresentationCurrentContext];
        [selfController.navigationController setModalPresentationStyle:UIModalPresentationCurrentContext];
    }
}

Kann diese Methode innerhalb von prepareForSegue-Deligate wie folgt verwenden

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

    PopUpViewController *popup = segue.destinationViewController;
    [self setPresentationStyleForSelfController:self presentingController:popup]
}
93
CRDave

Modale Popups im Interface Builder (Storyboards)

Schritt 1

Machen Sie auf dem ViewController, den Sie als modales Popup-Fenster verwenden möchten, die Hintergrundfarbe des Root-UIView klar. . Set Clear Color on root view Tipp: Verwenden Sie nicht das Root-UIView als Popup. Fügen Sie eine neue UIView hinzu, die kleiner als Popup ist.

Schritt 2

Erstellen Sie ein Segment für den ViewController, der ein Popup enthält. Wählen Sie "Modally Presenting" . Segue

Zwei Methoden, um Popup von hier aus zu erstellen

Methode eins - Verwenden des Segue

Wählen Sie das Segue aus und ändern Sie die Präsentation in "Over Current Context": Over Current Context

Methode 2 - Verwenden des View Controllers

Wählen Sie die ViewController-Szene aus, die Ihr Popup ist. Legen Sie im Eigenschafteninspektor im Abschnitt "Ansichts-Controller" die Option "Über aktuellen Kontext" fest: ViewController

Beide Methoden funktionieren. Das sollte es tun!

Finished Product

41
Mark Moeykens

Sie können dies im Interface Builder tun.

  • Setzen Sie für die Ansicht, die Sie darstellen möchten, den Hintergrund der äußersten Ansicht auf transparent
  • Klicken Sie bei gedrückter Strg-Taste und ziehen Sie sie vom Host-View-Controller auf den Modal-View-Controller
  • Gegenwart modal auswählen
  • Klicken Sie auf das neu erstellte Segment und setzen Sie im Attribute-Inspector (rechts) "Presentation" auf "Over Current Context".
13
Sig

Fühlen Sie sich frei, meinen Formularblatt-Controller MZFormSheetController für iPhone zu verwenden. In einem Beispielprojekt gibt es viele Beispiele zur Darstellung des Modal-View-Controllers, der nicht das gesamte Fenster abdeckt und viele Darstellungs-/Übergangsstile aufweist.

Sie können auch die neueste Version von MZFormSheetController ( MZFormSheetPresentationController ) testen und über viele weitere Funktionen verfügen.

10
mientus

Sie können EzPopup ( https://github.com/huynguyencong/EzPopup ) verwenden, es ist ein Swift Pod und sehr einfach zu bedienen:

// init YourViewController
let contentVC = ...

// Init popup view controller with content is your content view controller
let popupVC = PopupViewController(contentController: contentVC, popupWidth: 100, popupHeight: 200)

// show it by call present(_ , animated:) method from a current UIViewController
present(popupVC, animated: true)
2
huync

Imao setzte UIImageView auf den Hintergrund und ist nicht die beste Idee. In meinem Fall habe ich auf Controller-Ansicht weitere 2 Ansichten hinzugefügt. Die erste Ansicht hat [UIColor clearColor] im Hintergrund, die zweite Farbe, die transparent sein soll (in meinem Fall grau). Beachten Sie, dass die Reihenfolge wichtig ist. Legen Sie dann für die zweite Ansicht Alpha 0,5 (Alpha> = 0 <= 1) fest in prepareForSegue

infoVC.providesPresentationContextTransitionStyle = YES;
infoVC.definesPresentationContext = YES;

Und das ist alles.

1
Bohdan Savych

Sie können dies tun, um dem View-Controller eine beliebige andere Unteransicht hinzuzufügen . Setzen Sie zunächst die Statusleiste auf Keine für den ViewController, den Sie als Unteransicht hinzufügen möchten, damit Sie die Größe beliebig ändern können. Erstellen Sie dann eine Schaltfläche im Present View-Controller und eine Methode zum Klicken auf die Schaltfläche. In der Methode:

- (IBAction)btnLogin:(id)sender {
    SubView *sub = [[SubView alloc] initWithNibName:@"SubView" bundle:nil];
    sub.view.frame = CGRectMake(20, 100, sub.view.frame.size.width, sub.view.frame.size.height);
    [self.view addSubview:sub.view];
}

Hoffen Sie, dass dies hilft, fühlen Sie sich frei, wenn Sie Fragen haben ...

1
User-1070892

Swift 4:

Um eine Überlagerung oder die Popup-Ansicht hinzuzufügen, können Sie auch die Container-Ansicht verwenden, mit der Sie einen kostenlosen View Controller erhalten (Sie erhalten die Container-Ansicht von der üblichen Objektpalette/Bibliothek)

 enter image description here

Schritte:

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

  2. Diese Ansicht ausblenden, wenn 1st VC geladen wird

  3. Einblenden, wenn Button angeklickt wird  enter image description here

  4. Um diese Ansicht zu dimmen, wenn der Inhalt der Containeransicht angezeigt wird, setzen Sie den Hintergrund für Ansichten auf Schwarz und die Deckkraft auf 30%.

 enter image description here

Sie erhalten diesen Effekt, wenn Sie auf den Button klicken  enter image description here

0
Naishta