web-dev-qa-db-fra.com

Afficher UIViewController sous forme de popup dans l'iPhone

Comme il n’ya pas de réponse complète et définitive à cette question récurrente, je vais vous demander de répondre ici.

Nous avons souvent besoin de présenter un UIViewController tel qu’il ne couvre pas le plein écran, comme dans l’illustration ci-dessous.

enter image description here

Apple fournit plusieurs UIViewController similaires, tels que UIAlertView, le contrôleur de partage de partage Twitter ou Facebook, etc.

Comment pouvons-nous obtenir cet effet pour un contrôleur personnalisé?

iosiphoneuiviewcontrollerpopupuialertview
68
CRDave

NOTE: Cette solution est cassée dans iOS 8. Je vais publier une nouvelle solution dès que possible.

Je vais répondre ici en utilisant le storyboard, mais c'est également possible sans storyboard.

  1. Init: Créez deux UIViewController dans le storyboard.

    • disons FirstViewController qui est normal et SecondViewController qui sera le popup .

  2. Modal Segue: Mettez UIButton dans FirstViewController et créez une segue sur cette UIButton à SecondViewController en tant que transition modale.

  3. Rendre transparent: Sélectionnez maintenant UIView (UIView qui est créé par défaut avec UIViewController) de SecondViewController et changez sa couleur d'arrière-plan en couleur claire.

  4. Rendre l'arrière-plan Dim: Ajouter une UIImageView dans SecondViewController qui couvre tout l'écran et définit son image sur une image semi-transparente atténuée. Vous pouvez en obtenir un exemple ici: UIAlertView Background Image

  5. Conception d'affichage: Ajoutez maintenant une UIView et créez le type de conception que vous souhaitez afficher. Voici une capture d'écran de mon storyboard storyboard

    • Ici, j’ajoute le bouton Segue sur Login qui ouvre SecondViewController en popup pour demander le nom d’utilisateur

  6. Important: Maintenant cette étape principale. Nous voulons que SecondViewController ne cache pas FirstViewController complètement. Nous avons défini la couleur claire mais cela ne suffit pas. Par défaut, il ajoute du noir derrière la présentation du modèle. Nous devons donc ajouter une ligne de code dans viewDidLoad of FirstViewController. Vous pouvez aussi l'ajouter à un autre endroit, mais il devrait être exécuté avant le début du match.

    [self setModalPresentationStyle:UIModalPresentationCurrentContext];

  7. Rejeter: Quand rejeter dépend de votre cas d'utilisation. Ceci est une présentation modale, donc pour écarter nous faisons ce que nous faisons pour la présentation modale:

    [self dismissViewControllerAnimated:YES completion:Nil];

C'est tout.....

Toute suggestion ou commentaire est le bienvenu.

Démo: Vous pouvez obtenir un projet source de démonstration à partir d’ici: Démo Popup

NEW: Quelqu'un a fait du très beau travail sur ce concept: MZFormSheetController
Nouveau: J'ai trouvé un code supplémentaire pour obtenir ce genre de fonction: KLCPopup

Mise à jour iOS 8: cette méthode est compatible avec iOS 7 et 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];
    }
}

Peut utiliser cette méthode dans prepareForSegue deligate comme ceci

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

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

Fenêtres contextuelles modales dans Interface Builder (Storyboards)

Étape 1

Sur le ViewController que vous voulez comme fenêtre contextuelle modale, clarifiez la couleur d’arrière-plan de la racine UIView . Set Clear Color on root view Astuce: N'utilisez pas la racine UIView en tant que fenêtre contextuelle. Ajoutez une nouvelle UIView plus petite pour être votre popup.

Étape 2

Créez un lien vers le ViewController qui contient votre popup. Sélectionnez "Présenter Modalement" . Segue

Deux méthodes pour créer un pop-up à partir d'ici

Première méthode - Utiliser la Segue

Sélectionnez le Segue et changez Presentation en "Over Current Context": Over Current Context

Méthode deux - Utilisation du contrôleur de vue

Sélectionnez la scène ViewController qui est votre popup. Dans l'Inspecteur des attributs, sous la section Afficher le contrôleur, définissez Présentation sur "Contexte actuel": ViewController

L'une ou l'autre méthode fonctionnera. Ça devrait le faire!

Finished Product

41
Mark Moeykens

Vous pouvez le faire dans Interface Builder.

  • Pour la vue que vous souhaitez présenter, définissez de manière transparente l’arrière-plan de la vue la plus externe
  • Ctrl + clic et faites glisser du contrôleur de vue hôte vers le contrôleur de vue modale
  • Sélectionnez présent modalement
  • Cliquez sur la séquence nouvellement créée et dans l'inspecteur d'attributs (à droite), définissez "Présentation" sur "Contexte actuel".
13
Sig

N'hésitez pas à utiliser mon contrôleur de feuille/ MZFormSheetController pour iPhone, dans l'exemple de projet, il existe de nombreux exemples sur la manière de présenter le contrôleur de vue modale qui ne couvrira pas toute la fenêtre et comporte de nombreux styles de présentation/transition.

Vous pouvez également essayer la dernière version de MZFormSheetController appelée MZFormSheetPresentationController et bénéficier de nombreuses autres fonctionnalités.

10
mientus

Vous pouvez utiliser EzPopup ( https://github.com/huynguyencong/EzPopup ), c’est un pod Swift et très facile à utiliser:

// 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 a mis UIImageView en arrière-plan n’est pas la meilleure idée. Dans mon cas, j'ai ajouté sur le contrôleur voir 2 autres vues. La première vue a [UIColor clearColor] sur le fond, la deuxième couleur qui doit être transparente (gris dans mon cas). Notez que l’ordre est important. en prepareForSegue

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

Et c'est tout.

1
Bohdan Savych

Vous pouvez le faire pour ajouter une autre sous-vue au contrôleur de vue . Définissez d'abord la barre d'état sur Aucune pour ViewController que vous souhaitez ajouter en tant que sous-vue afin de pouvoir redimensionner à votre guise. Créez ensuite un bouton dans le contrôleur de la vue actuelle et une méthode de clic. Dans la méthode:

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

J'espère que cela vous aidera, n'hésitez pas à demander si vous avez des questions ...

1
User-1070892

Swift 4:

Pour ajouter une superposition ou la vue contextuelleVous pouvez également utiliser la vue vue conteneur avec laquelle vous obtenez un contrôleur de vue gratuit (vous obtenez la vue conteneur de la palette/bibliothèque d'objets habituelle)

 enter image description here

Pas:

  1. Avoir une vue (ViewForContainer dans l'image) contenant cette vue Conteneur, pour l'assombrir lorsque le contenu de la vue Conteneur est affiché. Connectez la prise à l'intérieur du premier View Controller

  2. Masquer cette vue lorsque le premier VC est chargé

  3. Afficher lorsque vous cliquez sur le bouton  enter image description here

  4. Pour assombrir cette vue lorsque le contenu de la vue conteneur est affiché, définissez l'arrière-plan de la vue sur noir et l'opacité sur 30%.

 enter image description here

Vous obtiendrez cet effet lorsque vous cliquerez sur le bouton  enter image description here

0
Naishta