Accentsconagua
Share
Avec iOS 10, Apple permet désormais aux développeurs d'applications de créer des interfaces personnalisées pour les notifications envoyées à leurs utilisateurs. Les possibilités de ce cadre sont illustrées dans l'application Messages, où vous pouvez afficher l'interface de conversation comme si vous étiez dans l'application elle-même..
Le cadre qui rend toutes ces fonctionnalités possibles est le nouveau UserNotificationsUI cadre. En utilisant ce cadre, vous pouvez adapter n’importe quel UIViewController sous-classe pour présenter le contenu de votre notification.
Dans ce tutoriel, je vais vous montrer comment utiliser ce nouveau framework pour créer une interface personnalisée pour les notifications de votre propre application..
Ce tutoriel nécessite que vous exécutiez Xcode 8 avec le SDK iOS 10. Vous devrez également télécharger le projet de démarrage depuis GitHub..
Veuillez noter que le projet de démarrage utilise le nouveau framework UserNotification dans iOS 10 pour planifier les notifications locales à tester. Nous utiliserons ce cadre tout au long du didacticiel. Si vous ne le connaissez pas bien, consultez mon article le couvrant ici:
À l'instar de nombreux autres types d'applications supplémentaires telles que le partage et les claviers personnalisés, les interfaces de notification commencent par une extension..
Avec le projet de démarrage ouvert dans Xcode, accédez à Fichier> Nouveau> Cible… dans la barre de menu. Dans la boîte de dialogue qui apparaît, sélectionnez le iOS> Extension d'application> Contenu de la notification type d'extension:
Nommez votre extension comme vous voulez et cliquez sur terminer:
Si une fenêtre apparaît vous demandant d’activer votre nouveau schéma, cliquez sur le bouton Activer bouton pour le configurer pour le débogage:
Vous verrez maintenant un nouveau dossier avec le nom de votre extension dans le Xcode Navigateur de fichier pour votre projet. Ce dossier contient les fichiers suivants:
NotificationViewController Classe A UIViewController sous-classe) pour votre interface personnalisée. Par défaut, Xcode adapte automatiquement cette classe au protocole requis par la structure UserNotificationUI. Nous verrons ce protocole plus en détail plus tard dans le tutoriel..NotificationViewController classe de sorte que cela ne doit pas être fait manuellement.
Vous verrez que Xcode lie automatiquement votre extension de contenu de notification au bon point d'extension système., com.apple.usernotifications.content-extension, et fichier d'interface de storyboard, Interface principale. Dans le NSExtensionAttributes sous-dictionnaire, vous devez définir deux attributs:
En outre, vous pouvez également définir le UNNotificationExtensionDefaultContentHidden attribuer dans cette NSExtensionAttributes dictionnaire. Cet attribut nécessite une valeur booléenne qui indique au système s'il doit ou non afficher la vue de notification par défaut avec votre interface. La barre de titre en haut contenant l’icône et le nom de votre application, ainsi qu’un bouton de renvoi, toujours être montré. Pour toute action personnalisée que vous avez définie pour votre catégorie de notification, un bouton permettant à l'utilisateur d'effectuer cette action sera également toujours affiché. Définir une valeur de vrai pour cet attribut, le système affichera uniquement votre interface personnalisée et non la vue de notification par défaut. Si vous ne définissez pas cet attribut ou ne fournissez pas la valeur faux, alors la vue de notification par défaut sera affichée sous votre interface.
La création de l'interface pour le contenu de vos notifications personnalisées est identique à celle utilisée pour créer un interface pour tout contrôleur de vue iOS classique..
Il est toutefois important de garder à l'esprit lors de la conception de votre interface que votre contrôleur de vue ne recevra aucun événement tactile lorsqu'il sera affiché à l'utilisateur. Cela signifie que votre contrôleur de vue ne doit inclure aucun élément d'interface avec lequel l'utilisateur s'attendrait à pouvoir interagir, notamment des boutons, des commutateurs, des curseurs, etc. Veuillez noter que vous pouvez toujours inclure des éléments tels que UITableViewle sable UIScrollViews dans votre interface et faites-les défiler par programme si votre contenu ne rentre pas dans toute l'interface.
La seule exception à cette règle est que, si votre interface contient une sorte de média associé à la notification, vous pouvez demander au système d'afficher un bouton de lecture / pause de média..
Pour créer l'interface de ce tutoriel, ouvrez votre MainInterface.storyboard fichier. Tout d’abord, sélectionnez le contrôleur de vue et dans le menu Inspecteur d'attributs, changez sa hauteur pour qu'elle soit égale à sa largeur:
Ensuite, modifiez la couleur d'arrière-plan de la vue principale en blanc. Enfin, définissez la propriété de couleur du texte de l'étiquette existante sur noir et la taille du texte sur 96. Une fois terminé, votre interface devrait ressembler à ceci:
Bien que l'interface par défaut fournie par Xcode ait été légèrement modifiée, en fonction du contenu de votre application, vous pouvez facilement créer une interface basée sur UIKit à présenter avec vos notifications..
Maintenant, avec notre interface complète, ouvrez votre NotificationViewController.swift fichier pour commencer à implémenter la fonctionnalité dans le contrôleur de vue.
Qu'est-ce qui différencie votre contrôleur d'affichage du contenu des notifications de tous les autres UIViewController sous-classe est sa conformité à la UNNotificationContentExtension protocole. Ce protocole fait partie du cadre UserNotificationsUI et définit les méthodes suivantes:
didReceive (_ :) qui est appelé chaque fois que votre application reçoit une nouvelle notification. Il contient un seul UNNotification object en tant que paramètre que vous pouvez utiliser pour accéder à tout le contenu de la notification entrante. Il est important de noter que cette méthode peut être appelée plusieurs fois si votre application continue à recevoir des notifications lorsque votre interface est ouverte. Elle doit donc pouvoir gérer cette notification..didReceive (_: completionHandler :) qui est appelé lorsque l'utilisateur appuie sur l'un des boutons d'action personnalisés de votre notification. Cette méthode contient un UNNotificationResponse objet que vous pouvez utiliser pour déterminer l'action sélectionnée par l'utilisateur. Lorsque vous avez terminé de traiter l'action de notification, vous devez appeler le gestionnaire d'achèvement avec un UNNotificationContentExtensionResponseOption valeur.le UNNotificationContentExtensionResponseOption l'énumération définit les options suivantes:
doNotDismiss que vous devez utiliser lorsque votre contrôleur d'affichage des notifications gère toute la logique de cette action et que vous souhaitez que votre interface reste à l'écran.rejeter que vous devez utiliser lorsque votre contrôleur d'affichage de notification gère toute la logique de cette action et que vous souhaitez que votre interface soit fermée.licencier et agir que vous devez utiliser lorsque vous souhaitez fermer votre interface et laisser votre application déléguer (ou quelle que soit votre UNUserNotificationCenterDelegate objet est) gérer l'action personnalisée.Le protocole UNNotificationContentExtension fournit une autre fonctionnalité, à savoir la possibilité d'ajouter un bouton de lecture de média généré par le système à votre interface. C'est le seulement exception aux limitations de conception d'interface que j'ai mentionnées plus tôt. En remplaçant les méthodes et les propriétés suivantes, vous pouvez ajouter ce bouton à votre interface et détecter à quel moment l'utilisateur le clique:
mediaPlayPauseButtonType: une UNNotificationContentExtensionMediaPlayPauseButtonType valeurmediaPlayPauseButtonFrame: une CGRect valeurmediaPlayPauseButtonTintColor: une UIColor valeurmediaPlay: appelé quand votre interface doit jouer son médiamediaPause: appelé quand votre interface doit mettre en pause son médiaLa notification locale créée par le projet de démarrage inclut un numéro personnalisé dans la notification. informations utilisateur propriété, et c’est ce que nous allons afficher dans l’interface personnalisée. Pour ce faire, remplacez votre NotificationViewController la classe didReceive (_ :) méthode avec ce qui suit:
func didReceive (_ notification: UNNotification) if let number = notification.request.content.userInfo ["customNumber"] as? Int label? .Text = "\ (numéro)"
Il est maintenant temps de tester notre interface personnalisée. Tout d'abord, assurez-vous que votre cible d'application iOS est actuellement sélectionnée par Xcode dans le coin supérieur gauche:
Lorsque votre application a été sélectionnée, appuyez sur Commande-R ou le bouton de lecture dans le coin supérieur gauche pour exécuter votre application. Lors de la première exécution de votre application, l'alerte suivante s'affiche pour autoriser les notifications:
Cliquez sur Permettre puis appuyez sur le bouton d'accueil de votre appareil (ou Commande-Maj-H si vous utilisez le simulateur) pour fermer l'application. Attendez environ 30 secondes et la notification suivante apparaîtra sur votre appareil:
Pour afficher l'interface personnalisée, vous pouvez ensuite cliquer sur cette notification et la dérouler ou utiliser 3D Touch si vous utilisez un appareil ou un simulateur iPhone 6s ou 7. Si vous utilisez le simulateur, vous pouvez simuler des fonctions tactiles 3D en utilisant les options du Matériel> Pression tactile menu:
Une fois l’interface de notification chargée, la capture d’écran suivante devrait ressembler:
Vous verrez que le titre, le sous-titre et le corps de la notification sont affichés sous l'interface personnalisée, en raison du fait que nous n'avons pas spécifié de valeur. vrai pour le UNNotificationExtensionDefaultContentHidden clé.
Vous remarquerez également que l'interface de notification commence par un carré, en raison de la UNNotificationExtensionInitialContentSizeRatio valeur définie précédemment, puis animée pour correspondre à l'étiquette 100. Le redimensionnement de l'interface de notification est entièrement géré par le système de mise en page automatique iOS. Par exemple, si vous souhaitez que votre interface reste carrée, vous pouvez simplement contraindre une vue dans votre interface pour un rapport de format 1: 1.
Dans l’ensemble, la structure UserNotificationsUI vous permet de créer facilement des interfaces riches en fonctionnalités pour vos notifications, ce qui permet aux utilisateurs d’interagir avec votre application sans avoir à fermer les tâches sur lesquelles ils travaillent actuellement. Bien que nous n'ayons créé qu'un exemple très simple dans ce didacticiel, tout ce que vous pouvez insérer dans un contrôleur de vue d'application iOS classique que vous pouvez insérer dans votre interface de notification, y compris des éléments détaillés et complexes tels que les vues SceneKit et SpriteKit..
Comme toujours, assurez-vous de laisser vos commentaires dans la section commentaires ci-dessous. Et consultez certains de nos autres articles et tutoriels sur les nouvelles fonctionnalités d'iOS 10 et watchOS 3.!
