Share
Avec iOS 10, Apple a ouvert l'application Messages aux développeurs tiers grâce à une nouvelle fonctionnalité appelée applications iMessage. Les développeurs peuvent désormais créer leurs propres types d'applications, des packs d'autocollants aux interfaces entièrement interactives, qui créent du contenu inline iMessage..
Dans ce tutoriel, je vais vous présenter le nouveau cadre de messagerie et vous montrer comment créer vos propres applications iMessage..
Ce tutoriel nécessite que vous exécutiez Xcode 8 sur OS X El Capitan ou une version ultérieure, et suppose que vous êtes à l'aise avec la création d'une application iOS basée sur UIKit. Si vous débutez toujours avec le développement iOS, consultez la série de tutoriels iOS From Scratch With Swift. Au cours de cette série, vous apprendrez à commencer à développer pour la plate-forme iOS avec des articles détaillés et des tutoriels..
1. écosystème
L'écosystème d'applications iMessage commence par un App Store complet accessible aux utilisateurs via l'application Messages. Ce magasin est complètement distinct de l'app store iOS habituel et affiche uniquement les applications liées à iMessage..
Les applications iMessage existent en tant qu’extensions d’applications iOS classiques, similaires aux extensions telles que les extensions Photos et les claviers personnalisés. La principale différence est que, étant donné que l'iMessage App Store existe de manière autonome dans l'application Messages, vous pouvez créer une application iMessage sans avoir à créer une application iOS qui s'affiche sur l'écran d'accueil de l'utilisateur. L'application iMessage est créée en tant qu'extension d'une application iOS réellement vierge et invisible. Cependant, il est important de noter que bien sûr, si vous souhaitez développer une application iOS et iMessage, vous pouvez créer une extension iMessage comme tout autre type d'extension..
Enfin, bien que les applications iMessage ne soient disponibles que sur iOS, leur contenu sera toujours visible sur les appareils macOS et watchOS. De plus, les utilisateurs de watchOS 3 pourront voir leurs autocollants récemment utilisés et les envoyer à leurs contacts directement depuis une Apple Watch..
Pour les personnes qui veulent juste créer un pack d'autocollants iMessage rapide et facile, Xcode fournit un modèle pour le faire sans avoir à écrire du code! Ce sera un excellent outil pour permettre aux graphistes sans aucune connaissance en programmation de créer un pack d’autocollants..
En utilisant le nouveau framework Messages pour créer un pack d’autocollants, vous pouvez créer des autocollants petits, moyens ou grands. Cette taille s’applique toutefois à tous les autocollants de votre paquet. Il vous suffit de fournir la taille d'image la plus grande pour chaque autocollant de votre pack. Le système réduira la taille de vos images lors de leur affichage sur d'autres périphériques..
Bien que cela ne soit pas strictement appliqué, voici les tailles de fichier recommandées par Apple pour vos packs d'autocollants:
Il existe cependant certaines limites aux images que vous pouvez utiliser dans vos packs d'autocollants:
Ouvrez Xcode et créez un nouveau projet. Sous le iOS> Application section, vous verrez qu’il existe maintenant des options pour Application iMessage et Application du pack d'autocollants projets. Pour ce premier exemple, sélectionnez le Application du pack d'autocollants modèle:
Si vous suivez et souhaitez utiliser des ressources d'autocollants dans votre application, vous pouvez les télécharger à partir du Autocollants d'application iMessage dossier du tutoriel GitHub repo.
Vous verrez dans la barre latérale gauche de Xcode que vous avez maintenant un Stickers.xcstickers catalogue d'actifs dans votre projet. Ce dossier contiendra l'icône de votre application iMessage et tous les autocollants de votre pack. Ajouter des autocollants à votre application est aussi simple que de les faire glisser dans le Pack d'autocollants dossier de votre catalogue d'actifs.
Veuillez noter que si vous souhaitez ajouter un autocollant animé à l'aide d'une série d'images, vous pouvez cliquer avec le bouton droit de la souris sur votre Pack d'autocollants dossier et choisissez le Ajouter des actifs> Nouvelle séquence d'autocollants option. Avec cela dans votre pack d'autocollants, vous pouvez ensuite faire glisser pour réorganiser des cadres individuels.
Enfin, avec votre catalogue d’actifs ouvert, si vous allez à la Inspecteur d'attributs dans la barre latérale droite de Xcode, vous pouvez modifier le nom de votre pack d’autocollants ainsi que la taille de l’autocollant que vous utilisez..
Pour tester votre pack d’autocollants, appuyez simplement sur le bouton de lecture dans le coin supérieur gauche de Xcode ou appuyez sur Commande-R sur votre clavier. Une fois le simulateur démarré, Xcode devrait vous présenter le menu suivant..
Choisir messages puis cliquez sur le Courir bouton. Une fois que le simulateur a lancé le messages app, appuyez sur le bouton app store en bas de l'écran pour accéder à vos applications iMessage.
Votre pack d’autocollants devrait apparaître au début, mais si ce n’est pas le cas, faites-le glisser jusqu’à ce que vous l’ayez atteint. Une fois votre application chargée, vous devriez voir les deux autocollants que nous avons ajoutés disponibles pour utilisation et envoi..
En tapant sur l'un de ces autocollants, vous l'ajouterez au message en cours. À partir de là, vous pourrez appuyer sur envoyer..
Comme vous pouvez le constater, il est très rapide et facile de créer des packs d'autocollants pour iMessage dans iOS 10 sans avoir à utiliser de code..
Dans certains cas d'utilisation, les fonctionnalités très basiques fournies par le modèle d'application d'autocollant de base risquent de ne pas suffire. De ce fait, Apple vous permet également de créer une application de pack d'autocollants plus personnalisée. Si vous souhaitez suivre, créez un nouveau projet appelé CustomStickerPack comme indiqué au début de ce didacticiel, mais cette fois-ci choisissez le Application iMessage modèle.
Une fois que Xcode a créé votre projet, vous verrez que vous avez maintenant des dossiers similaires à ceux d’une application iOS avec une MessagesExtension dossier. Haut CustomStickerPack dossier contient simplement un catalogue d'actifs et Info.plist fichier pour votre application iOS "vierge". Il est important que vous fournissiez toutes les icônes d'application de taille correcte dans ce catalogue d'actifs, car iOS l'utilisera toujours pour des tâches telles que les paramètres d'utilisation du stockage de l'utilisateur..
Le dossier sur lequel nous allons nous concentrer est le MessageExtension dossier qui contient pour le moment les fichiers suivants:
Pour notre exemple d’application d’autocollant personnalisé, nous allons simplement créer notre interface par programmation à l’aide du nouveau MSStickerBrowserViewController classe.
Ouvrez votre MessagesViewController.swift fichier, et vous verrez d’abord que votre MessagesViewController classe est une sous-classe de MSMessagesAppViewController, qui lui-même est une sous-classe de UIViewController. Cela signifie que vous pouvez utiliser UIKit dans vos applications iMessage..
le MSMessagesAppViewController class fournit de nombreuses méthodes de rappel que vous pouvez remplacer pour personnaliser davantage les fonctionnalités de votre application, mais nous n’avons pas à nous en préoccuper dans ce didacticiel. Pour le moment, modifiez simplement la définition de votre classe afin que celle-ci soit conforme à la MSStickerBrowserViewDataSource protocole:
classe MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource …
Avant de pouvoir afficher nos autocollants, nous devons ajouter les fichiers à notre projet et les charger. Faites glisser les fichiers d’image que nous avons utilisés précédemment dans ce didacticiel dans votre projet et assurez-vous qu’ils sont ajoutés à la liste. MessagesExtension cible. Les fichiers doivent être ajoutés à la cible plutôt qu'à un catalogue d'actifs, car nous pouvons ainsi les charger à partir d'une URL, ce qui est beaucoup plus facile lorsque vous utilisez des autocollants personnalisés..
Une fois que vous avez ajouté ces fichiers, ajoutez le code suivant à votre MessagesViewController classe:
Accentsconagua
var stickers = [MSSticker] () func loadStickers () for i in 1… 2 if let url = Bundle.main.urlForResource ("Sticker \ (i)", avec Extension: "png") do let autocollant = essayez MSSticker (contentsOfFileURL: url, localizedDescription: "") stickers.append (autocollant) catch print (error)Avec ce code, nous créons simplement un MSSticker tableau pour stocker nos autocollants et une fonction pour les charger à partir du stockage local.
Ensuite, ajoutez la méthode suivante à votre classe:
func createStickerBrowser () let controller = MSStickerBrowserViewController (stickerSize: .large) addChildViewController (contrôleur) view.addSubview (controller.view) controller.stickerBrowserView.backgroundColor = UIColor.blue () controller.stickerBrowserViewSource (en anglais). (equalTo: controller.view.topAnchor) .isActive = true view.bottomAnchor.constraint (equalTo: controller.view.bottomAnchor) .isActive = true view.leftAnchor.constraint (equalTo: controller.view.leftAnchor) .isActive = true view .rightAnchor.constraint (equalTo: controller.view.rightAnchor) .isActive = true
Avec ce code, nous créons une instance du MSStickerBrowserViewController classe et l'ajouter en tant qu'enfant du contrôleur de vue racine, en plus de le contraindre à la hauteur et à la largeur disponibles.
Ensuite, nous devons implémenter les MSStickerBrowserViewDataSource méthodes pour fournir les informations nécessaires sur les autocollants. Pour ce faire, ajoutez les méthodes suivantes à votre code:
func numberOfStickers (dans stickerBrowserView: MSStickerBrowserView) -> Int return autocollants.count func stickerBrowserView (_ autocollantBrowserView: MSStickerBrowserView, index autocollants: Int) -> MSStickerView retour autocollants [index]
Enfin, pour que tout notre code soit réellement exécuté, remplacez votre viewDidLoad méthode avec ce qui suit:
remplacer func viewDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Exécutez votre application comme nous l'avons fait précédemment (en vous rappelant que vous devrez peut-être faire glisser votre doigt pour accéder à la bonne application) et une fois le chargement terminé, vous devriez voir un écran identique à celui de l'écran précédent, sauf que vous avez maintenant un arrière-plan bleu:
Dans ce didacticiel, nous avons uniquement chargé les images d'autocollants locales dans notre application personnalisée pour des raisons de simplicité. L’un des principaux avantages de l’utilisation d’une application d’autocollants personnalisée est qu’il est possible de charger des images d’autocollants à partir d’un serveur distant et même, par le biais d’autres contrôleurs de vue, avant d’afficher votre écran MSStickerBrowserViewController, laissez vos utilisateurs créer leurs propres autocollants.
Dans la dernière partie de ce didacticiel, nous allons créer une application iMessage très basique afin de créer un message unique..
Si vous voulez suivre, ouvrez Xcode et créez un autre Application iMessage appelé MessageApp. Ouvrez votre MainInterface.storyboard Dans le contrôleur de vue affiché, supprimez l’étiquette par défaut et ajoutez un stepper et un bouton comme indiqué:
Notez que pour que votre application iMessage apparaisse correctement sur toutes les tailles de périphérique, vous devez implémenter la présentation automatique dans vos interfaces. Dans cet exemple, j'ai contraint le stepper au centre du contrôleur de vue et le bouton au bas.
Ensuite, ouvrez le Inspecteur d'attributs avec votre stepper sélectionné et changez ses valeurs minimum et maximum en 0 et dix respectivement:
Ensuite, ouvrez le Assistant rédacteur avec votre MessagesViewController.swift fichier pour créer et connecter une sortie pour votre stepper et une action de retouche à l'intérieur pour votre bouton:
@IBOutlet faible stepper var: UIStepper! @IBAction func didPress (expéditeur du bouton: AnyObject)
Il est maintenant temps pour nous d'écrire du code. Tout d'abord, je dois vous présenter quelques cours qui sont essentiels lors de la création d'une application iMessage:
MSConversation: Représente la conversation en cours. Vous pouvez utiliser cette classe pour manipuler la transcription de la conversation, par exemple en insérant des messages ou en récupérant le message actuellement sélectionné..MSMessage: Représente un seul message, qu'il soit créé par vous pour l'insérer dans la conversation ou déjà existant dans la conversation.MSMessageTemplateLayout: Crée une bulle de message dans laquelle vous pouvez afficher votre message personnalisé. Comme indiqué dans l'image ci-dessous, cette présentation de modèle comporte de nombreuses propriétés et emplacements pour vous permettre de mettre votre propre contenu afin de personnaliser vos messages..
Il est important de noter que l'espace en haut à gauche de cette disposition sera rempli par l'icône de votre application iMessage. En outre, toutes ces propriétés sont facultatives et ne fournir aucune chaîne de légende supprimera la partie inférieure de la présentation..
Toujours dans ton MessagesViewController.swift fichier, ajoutez la méthode suivante à votre MessagesViewController classe:
func createImageForMessage () -> UIImage? let background = UIView (cadre: CGRect (x: 0, y: 0, largeur: 300, hauteur: 300)) background.backgroundColor = UIColor.white () let label = UILabel (cadre: CGRect (x: 75, y : 75, largeur: 150, hauteur: 150)) label.font = UIFont.systemFont (ofSize: 56.0) label.backgroundColor = UIColor.red () label.textColor = UIColor.white () label.text = "\ (Int (stepper.value)) "label.textAlignment = .center label.layer.cornerRadius = label.frame.size.width / 2.0 label.clipsToBounds = true background.addSubview (label) background.frame.origin = CGPoint (x: vue .frame.size.width, y: view.frame.size.height) view.addSubview (arrière-plan) UIGraphicsBeginImageContextWithOptions (background.frame.size, false, UIScreen.main (). scale) background.drawHierarchy (in: background.bounds , afterScreenUpdates: true) let image = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () background.removeFromSuperview () retour image
Avec cette méthode, nous prenons la valeur actuelle du curseur et la plaçons dans une étiquette circulaire. Nous rendons ensuite cette étiquette (et la vue parente qui la contient) en UIImage objet que nous pouvons joindre à notre message.
Ensuite, remplacez votre didPress (bouton :) méthode avec le code suivant:
@IBAction func didPress (expéditeur du bouton: AnyObject) si let image = createImageForMessage (), laissez conversation = activeConversation let layout = MSMessageTemplateLayout () layout.image = image layout.caption = "Valeur de pas à pas" let message = MSMessage () .layout = layout message.url = URL (chaîne: "emptyURL") conversation.insert (message, completionHandler: (erreur: NSError?) dans print (erreur))
Vous verrez qu'avec ce code, nous créons d'abord la structure du message et définissons la image et légende Propriétés. Ensuite, nous créons notre MSMessage objet à insérer dans la conversation.
Notez que pour qu'iMessage traite correctement votre message personnalisé, vous devez doit mettre un disposition et url pour votre message. Cette URL est destinée à créer un lien vers une page Web de quelque sorte que ce soit, où les utilisateurs de MacOS peuvent également afficher votre contenu personnalisé iMessage. Pour cet exemple simple, cependant, nous venons de créer une URL de base à partir d'une chaîne.
Enfin, nous insérons le message dans la conversation en cours. L'appel de cette méthode n'envoie pas le message, mais place votre message dans le champ de saisie de l'utilisateur afin qu'il puisse appuyer sur envoyer lui-même..
Générez et exécutez votre nouvelle application une fois de plus, et vous verrez une interface similaire à celle-ci:
Une fois que vous appuyez sur le Créer un message bouton, vous devriez également voir la bulle de mise en page du message affichée dans le champ de saisie et disponible pour envoyer:
Dans ce tutoriel, je vous ai présenté le nouveau framework de messagerie dans iOS 10, qui vous permet de créer des packs d'autocollants et des applications à intégrer à iMessage. Nous avons couvert les cours de base que vous devez connaître, y compris MSStickerBrowserViewController, MSConversation, MSMessage, et MSTemplateMessageLayout.
La structure Messages fournit des API qui vous permettent de contrôler largement vos applications iMessage. Pour en savoir plus, je vous recommande de consulter la base de données Messages Framework de Apple.
Comme toujours, assurez-vous de laisser vos commentaires dans la section commentaires ci-dessous..
