Share
Con iOS 10, Apple ha abierto la aplicación de Mensajes a desarrolladores externos a través de una nueva función llamada aplicaciones de iMessage. Los desarrolladores ahora pueden crear sus propios tipos de aplicaciones, desde paquetes de adhesivos hasta interfaces totalmente interactivas, que crean contenido en línea de iMessage..
En este tutorial, te presentaré el nuevo marco de Messages y te mostraré cómo crear tus propias aplicaciones iMessage..
Este tutorial requiere que esté ejecutando Xcode 8 en OS X El Capitan o posterior y asume que se siente cómodo al crear una aplicación iOS basada en UIKit. Si aún está comenzando con el desarrollo de iOS, consulte la serie de tutoriales iOS From Scratch With Swift. A lo largo de esa serie, aprenderá cómo comenzar a desarrollar para la plataforma iOS con artículos y tutoriales detallados..
1. Ecosistema
El ecosistema de la aplicación iMessage comienza con una App Store completa a la que los usuarios pueden acceder a través de la aplicación Mensajes. Esta tienda está completamente separada de la tienda de aplicaciones regular de iOS y mostrará solo las aplicaciones relacionadas con iMessage.
Las aplicaciones de iMessage existen como extensiones de las aplicaciones regulares de iOS, similares a las extensiones de fotos y los teclados personalizados. La diferencia clave es que, dado que la tienda de aplicaciones iMessage existe por sí misma dentro de la aplicación Messages, puede crear una aplicación iMessage sin tener que crear una aplicación iOS que se muestre en la pantalla de inicio del usuario; La aplicación iMessage se crea como una extensión de una aplicación de iOS efectivamente en blanco e invisible. Sin embargo, es importante tener en cuenta que, por supuesto, si desea desarrollar una aplicación iOS o iMessage, puede crear una extensión iMessage como cualquier otro tipo de extensión..
Por último, aunque las aplicaciones de iMessage solo estarán disponibles en iOS, su contenido seguirá siendo visible en dispositivos macOS y watchOS. Además, los usuarios de watchOS 3 podrán ver sus pegatinas recientemente usadas y enviarlas a sus contactos directamente desde un Apple Watch..
Para las personas que solo desean crear un paquete de adhesivos de iMessage rápido y fácil, Xcode proporciona una plantilla para hacerlo sin tener que escribir ningún código. Esta será una gran herramienta para permitir que los artistas gráficos sin conocimientos de programación puedan crear un paquete de pegatinas..
Al utilizar el nuevo marco de Mensajes para crear un paquete de pegatinas, puede crear pegatinas pequeñas, medianas o grandes. Este tamaño, sin embargo, se aplica a todos los adhesivos en su paquete. Solo necesita proporcionar el tamaño de imagen más grande para cada etiqueta en su paquete, y el sistema reducirá la escala de sus imágenes cuando se muestren en otros dispositivos.
Si bien no se aplica estrictamente, estos son los tamaños de archivo que Apple recomienda para sus paquetes de pegatinas:
Sin embargo, existen algunas limitaciones para las imágenes que puede utilizar en sus paquetes de pegatinas:
Abre Xcode y crea un nuevo proyecto. Bajo la iOS> Aplicación En la sección, verás que ahora hay opciones para Aplicación iMessage y Aplicación de Paquete de Pegatinas proyectos Para este primer ejemplo, seleccione la Aplicación de Paquete de Pegatinas modelo:
Si está siguiendo la pauta y desea que se usen algunos elementos adhesivos en su aplicación, puede descargarlos de la Etiquetas engomadas de la aplicación iMessage Carpeta del tutorial GitHub repo..
Verá en la barra lateral izquierda de Xcode que ahora tiene un Pegatinas.xcstickers Catálogo de activos en su proyecto. Esta carpeta contendrá el ícono de la aplicación iMessage y todos los adhesivos en su paquete. Agregar etiquetas adhesivas a su aplicación es tan fácil como arrastrarlas a la Paquete de Pegatinas carpeta de su catálogo de activos.
Tenga en cuenta que si desea agregar una pegatina animada utilizando una serie de imágenes, puede hacer clic derecho en su Paquete de Pegatinas carpeta y elige la Añadir activos> Nueva secuencia de adhesivos opción. Con esto en su paquete de pegatinas, puede arrastrar para reordenar marcos individuales.
Por último, con su catálogo de activos abierto, si va a la Inspector de atributos en la barra lateral derecha de Xcode, puede cambiar el nombre de su paquete de pegatinas y también el tamaño de la etiqueta que está usando.
Para probar el paquete de pegatinas, simplemente presione el botón de reproducción en la esquina superior izquierda de Xcode o presione Comando-R en tu teclado Una vez que el simulador se haya iniciado, Xcode debería presentarle el siguiente menú.
Escoger Mensajes y luego haga clic en el correr botón. Una vez que el simulador ha lanzado el Mensajes aplicación, presione el botón de la tienda de aplicaciones en la parte inferior de la pantalla para acceder a sus aplicaciones de iMessage.
Tu paquete de pegatinas debería aparecer inicialmente, pero si no lo hace, deslízalo hasta que lo alcances. Una vez que la aplicación se haya cargado, debería ver los dos adhesivos que agregamos disponibles para usar y enviar.
Al tocar en cualquiera de estos adhesivos se agregará al mensaje actual, y desde aquí puede presionar enviar..
Como puede ver, es muy rápido y fácil crear paquetes de pegatinas para iMessage en iOS 10 sin necesidad de utilizar ningún código..
Para algunos casos de uso, la funcionalidad muy básica proporcionada por la plantilla de aplicación de etiqueta básica puede no ser suficiente. Debido a esto, Apple también proporciona una forma de crear una aplicación de paquete de pegatinas más personalizada. Si quieres seguir adelante, crea un nuevo proyecto llamado CustomStickerPack como se muestra al comienzo de este tutorial, pero esta vez elija el Aplicación iMessage modelo.
Una vez que Xcode haya creado tu proyecto, verás que ahora tienes carpetas similares a las de una aplicación de iOS con un complemento adicional. MensajesExtensión carpeta. La parte superior CustomStickerPack carpeta simplemente contiene un catálogo de activos y Info.plist archivo para su aplicación de iOS "en blanco". Es importante que proporcione todos los íconos de aplicaciones del tamaño correcto en este catálogo de activos porque iOS aún lo usará para cosas como la configuración de uso de almacenamiento del usuario.
La carpeta que vamos a enfocar es la Extensión de mensaje Carpeta, que por el momento contiene los siguientes archivos:
Para nuestra aplicación de etiqueta personalizada de ejemplo, solo vamos a crear nuestra interfaz mediante programación utilizando el nuevo MSStickerBrowserViewController clase.
Abre tu MensajesViewController.swift archivo, y en primer lugar verá que su MensajesViewController clase es una subclase de MSMessagesAppViewController, que en sí es una subclase de UIViewController. Esto significa que todo UIKit está disponible para que lo use en sus aplicaciones iMessage.
los MSMessagesAppViewController class proporciona muchos métodos de devolución de llamada que puede anular para personalizar aún más la funcionalidad de su aplicación, pero no tenemos que preocuparnos por esto en este tutorial. Por ahora, simplemente edite su definición de clase para que su clase se ajuste a la MSStickerBrowserViewDataSource protocolo:
clase MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource …
Antes de que podamos mostrar nuestros adhesivos, debemos agregar los archivos a nuestro proyecto y cargarlos. Arrastre los archivos de imagen que usamos anteriormente en este tutorial a su proyecto y asegúrese de que se agreguen a la MensajesExtensión objetivo. Los archivos deben agregarse al destino en lugar de a un catálogo de activos porque de esa manera podemos cargarlos desde una URL, que es mucho más fácil cuando se trabaja con etiquetas personalizadas..
Una vez que haya agregado estos archivos, agregue el siguiente código a su MensajesViewController clase:
Accentsconagua
var stickers = [MSSticker] () func loadStickers () para i en 1 ... 2 if let url = Bundle.main.urlForResource ("Sticker \ (i)", withExtension: "png") do let sticker = intente MSSticker (contentsOfFileURL: url, localizedDescription: "") stickers.append (sticker) catch print (error)Con este código simplemente creamos un MSSticker matriz para almacenar nuestros adhesivos y una función para cargarlos desde el almacenamiento local.
A continuación, agregue el siguiente método a su clase:
func createStickerBrowser () let controller = MSStickerBrowserViewController (stickerSize: size: .large) addChildViewController (controller) view.addSubview (controller.view) controller.stickerBrowservasupas.as. (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
Con este código, creamos una instancia del MSStickerBrowserViewController Clase y agregue esto como un elemento secundario del controlador de vista raíz además de restringirlo a la altura y el ancho disponibles.
A continuación, necesitamos implementar los requisitos MSStickerBrowserViewDataSource Métodos para proporcionar la información necesaria de la etiqueta. Para hacerlo, agregue los siguientes métodos a su código:
func numberOfStickers (en stickerBrowserView: MSStickerBrowserView) -> Int return stickers.count func stickerBrowserView (_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker return stickers [index]
Por último, para que todo nuestro código se ejecute realmente, reemplace su viewDidLoad Método con lo siguiente:
anular func viewDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Ejecute su aplicación tal como lo hicimos anteriormente (recordando que es posible que tenga que desplazarse para llegar a la aplicación correcta), y una vez que todo haya terminado de cargar, debería ver una pantalla idéntica a la anterior, excepto ahora con un fondo azul:
En este tutorial, solo cargamos imágenes de calcomanías locales en nuestra aplicación personalizada para simplificar. Sin embargo, una de las principales ventajas de usar una aplicación de etiqueta personalizada es que puede cargar imágenes de etiqueta desde un servidor remoto e incluso, mediante el uso de otros controladores de vista antes de mostrar su MSStickerBrowserViewController, Deja que tus usuarios creen sus propias pegatinas.
En la última parte de este tutorial, vamos a crear una aplicación iMessage muy básica para crear un mensaje único..
Si quieres seguirlo, abre Xcode y crea otro. Aplicación iMessage llamado MessageApp. Abre tu MainInterface.storyboard y en el controlador de vista que se muestra, elimine la etiqueta predeterminada y agregue un paso a paso y un botón como se muestra:
Tenga en cuenta que para que su aplicación iMessage aparezca correctamente en todos los tamaños de dispositivos, deberá implementar el diseño automático en sus interfaces. En este ejemplo, he restringido el paso a paso al centro del controlador de vista y el botón a la parte inferior.
A continuación, abre la Inspector de atributos con su paso a paso seleccionado y cambie sus valores mínimo y máximo a 0 y 10 respectivamente:
A continuación, abre la Editor asistente con tu MensajesViewController.swift archivo para crear y conectar una salida para su paso a paso y un retoque dentro de la acción para su botón:
@IBOutlet débil var paso a paso: ¡UIStepper! @IBAction func didPress (remitente del botón: AnyObject)
Ahora es el momento de que escribamos un código. En primer lugar, debo presentarle algunas clases que son cruciales al crear una aplicación iMessage:
MSConversación: Representa la conversación actualmente abierta. Puede usar esta clase para manipular la transcripción de la conversación, por ejemplo, insertando mensajes u obteniendo el mensaje seleccionado actualmente.MSMessage: Representa un solo mensaje, ya sea creado por usted para insertarlo en la conversación o ya existente en la conversación.MSMessageTemplateLayout: Crea una burbuja de mensaje para que muestres tu mensaje personalizado. Como se muestra en la imagen de abajo, este diseño de plantilla tiene muchas propiedades y lugares para que pongas tu propio contenido para personalizar tus mensajes..
Es importante tener en cuenta que el ícono de su aplicación iMessage llenará el espacio en la parte superior izquierda de este diseño. Además, todas estas propiedades son opcionales, y al no proporcionar cadenas de subtítulos se eliminará la parte inferior del diseño.
Aun en tu MensajesViewController.swift archivo, agregue el siguiente método a su MensajesViewController clase:
func createImageForMessage () -> UIImage? let background = UIView (marco: CGRect (x: 0, y: 0, ancho: 300, altura: 300)) background.backgroundColor = UIColor.white () let label = UILabel (marco: CGRect (x: 75, y : 75, ancho: 150, altura: 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: view .frame.size.width, y: view.frame.size.height) view.addSubview (background) UIGraphicsBeginImageContextWithOptions (background.frame.size, false, UIScreen.main (). scale) background.drawHierarchy (in: background.bounds , afterScreenUpdates: true) let image = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () background.removeFromSuperview () devolver imagen
Con este método, tomamos el valor actual del control deslizante y lo colocamos en una etiqueta circular. Luego renderizamos esta etiqueta (y su vista principal que contiene) en una UIImage Objeto que podemos adjuntar a nuestro mensaje..
A continuación, reemplace su didPress (botón :) Método con el siguiente código:
@IBAction func didPress (remitente del botón: AnyObject) if let image = createImageForMessage (), let conversation = activeConversation let layout = MSMessageTemplateLayout () layout.image = image layout.caption = "Stepper Value" let message = MSMessage () message .layout = layout message.url = URL (string: "emptyURL") conversation.insert (message, completedHandler: (error: NSError?) en la impresión (error))
Verá que con este código, primero creamos el diseño del mensaje y configuramos el imagen y subtítulo propiedades A continuación, creamos nuestro MSMessage Objeto para insertar en la conversación..
Tenga en cuenta que para que iMessage procese su mensaje personalizado correctamente, debe establecer un diseño y url por tu mensaje Este URL está destinado a enlazar a una página web de algún tipo donde los usuarios de macOS también pueden ver su contenido personalizado de iMessage. Para este ejemplo simple, sin embargo, acabamos de crear una url básica a partir de una cadena.
Por último, insertamos el mensaje en la conversación activa actual. Sin embargo, llamar a este método en realidad no envía el mensaje, sino que coloca el mensaje en el campo de entrada del usuario para que puedan presionar el envío..
Cree y ejecute su nueva aplicación una vez más, y verá una interfaz similar a la siguiente:
Una vez que presionas el Crear un mensaje botón, también debería ver la burbuja de diseño del mensaje que se muestra en el campo de entrada y está disponible para enviar:
En este tutorial, te presenté el nuevo marco de Messages en iOS 10, que te permite crear paquetes de pegatinas y aplicaciones para integrar con iMessage. Cubrimos las clases básicas que necesita conocer, incluyendo MSStickerBrowserViewController, MSConversación, MSMessage, y MSTemplateMessageLayout.
El marco de Mensajes proporciona API para brindarle una gran cantidad de control sobre sus aplicaciones de iMessage. Para más información, recomendaría revisar la Referencia del marco de mensajes de Apple..
Como siempre, asegúrese de dejar sus comentarios y opiniones en la sección de comentarios a continuación.
