web-dev-qa-db-fra.com

Alerte personnalisée (UIAlertView) avec swift

Comment créer une alerte personnalisée avec Swift? J'essaie de traduire un guide depuis Objective C mais charge une mise en page plein écran

pour le faire facilement je peux charger une nouvelle mise en page avec l'arrière-plan transparent j'essaye ceci:

    listaalertviewcontroller.view.backgroundColor = UIColor.clearColor()
    let purple = UIColor.purpleColor() // 1.0 alpha
    let semi = purple.colorWithAlphaComponent(0.5)

    listaalertviewcontroller.view.backgroundColor = semi


    presentingViewController.modalPresentationStyle = UIModalPresentationStyle.CurrentContext

    self.presentViewController(listaalertviewcontroller, animated: true, completion: nil)

dans l'animation, elle est transparente mais à la fin de l'animation, elle est opaque ... et je désactive l'option opaque dans la vue ... qu'est-ce que je fais mal?

iosswiftuialertview
12
Pedro Manfredi

Code testé dans Swift 4 et Xcode 9

Comment faire votre propre alerte personnalisée

Je voulais faire quelque chose de similaire. Tout d'abord, UIAlertView est déconseillé au profit de UIAlertController. Voir cette réponse pour connaître le moyen standard d’afficher une alerte:

Et UIAlertView et UIAlertController ne permettent pas vraiment beaucoup de personnalisation. Une option consiste à utiliser un code tiers. Cependant, j'ai découvert qu'il n'était pas si difficile de créer votre propre alerte en affichant un autre contrôleur de vue de façon modale.

L'exemple ici est juste une preuve de concept. Vous pouvez concevoir votre alerte comme bon vous semble.

 enter image description here

Storyboard

Vous devriez avoir deux contrôleurs de vue. Votre deuxième contrôleur de vue sera votre alerte. Définissez le nom de la classe sur AlertViewContoller et l'ID de Storyboard sur alert. (Ces deux noms sont des noms que nous avons définis nous-mêmes dans le code ci-dessous, rien de spécial à leur sujet. Vous pouvez ajouter le code en premier si vous le souhaitez. Cela pourrait en fait être plus facile si vous ajoutez le code en premier.)

 enter image description here

Définissez la couleur d'arrière-plan de la vue racine (dans votre contrôleur d'alerte) à effacer. Ajoutez une autre variable UIView et centrez-la avec des contraintes. Utilisez cela comme fond d'alerte et mettez ce que vous voulez à l'intérieur. Pour mon exemple, j'ai ajouté un UIButton.

 enter image description here

Code

ViewController.Swift

import UIKit
class ViewController: UIViewController {

    @IBAction func showAlertButtonTapped(_ sender: UIButton) {

        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let myAlert = storyboard.instantiateViewController(withIdentifier: "alert")
        myAlert.modalPresentationStyle = UIModalPresentationStyle.overCurrentContext
        myAlert.modalTransitionStyle = UIModalTransitionStyle.crossDissolve
        self.present(myAlert, animated: true, completion: nil)
    }
}

AlertViewController.Swift

import UIKit
class AlertViewController: UIViewController {

    @IBAction func dismissButtonTapped(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }
}

N'oubliez pas de brancher les points de vente.

C'est tout. Vous devriez être capable de faire n'importe quelle alerte que vous pouvez imaginer maintenant. Pas besoin de code tiers.

Autres options

Parfois, cependant, il n'est pas nécessaire de réinventer la roue. Je suis impressionné par le projet tiers SDCAlertView (licence MIT). Il est écrit en Swift mais vous pouvez également l'utiliser avec des projets Objective-C. Il offre une large gamme de personnalisation.

25
Suragch

Voici le code Swift 3. Merci beaucoup à @Suragch pour cette approche géniale permettant de créer un AlertView personnalisé.

ViewController.Swift 

import UIKit
class ViewController: UIViewController {

@IBAction func showAlertButtonTapped(sender: UIButton) {

        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let myAlert = storyboard.instantiateViewController(withIdentifier: "storyboardID")
        myAlert.modalPresentationStyle = UIModalPresentationStyle.overCurrentContext
        myAlert.modalTransitionStyle = UIModalTransitionStyle.crossDissolve
        self.present(myAlert, animated: true, completion: nil)

}

AlertViewController.Swift

import UIKit
class AlertViewController: UIViewController {

    @IBAction func dismissButtonTapped(sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }
}

Pour le rendre un peu plus intéressant ou pour rendre l'effet par défaut dans iOS, vous pouvez ajouter un VisualEffectView ou modifier la couleur de la vue principale UIView en une couleur sombre et définir son alpha à 70%. Je préfère la deuxième approche car l’effet de flou n’est pas aussi lisse que celui de la vue avec 70 alpha.

Effet avec VisualEffectView:

 enter image description here

Effet utilisant un UIView avec 70 Alpha:

 enter image description here

14
fs_tigre

Utilisez https://github.com/shantaramk/Custom-Alert-View

Il est facile de mettre en œuvre cela. Il suffit de suivre les étapes ci-dessous: 

  1. Faites glisser le dossier AlertView dans le répertoire du projet

  2. Afficher le pop-up AlertView

    func showUpdateProfilePopup(_ message: String) {
let alertView = AlertView(title: AlertMessage.success, message: message, okButtonText: LocalizedStrings.okay, cancelButtonText: "") { (_, button) in
    if button == .other {
        self.navigationController?.popViewController(animated: true)
    }
}
alertView.show(animated: true)

    }

0
Shantaram Kokate