Share
Con iOS 10, Apple ha aperto l'applicazione Messaggi agli sviluppatori di terze parti attraverso una nuova funzionalità chiamata app iMessage. Gli sviluppatori possono ora creare i propri vari tipi di app, che vanno dai pacchetti di adesivi alle interfacce completamente interattive, che creano contenuti iMessage in linea.
In questo tutorial ti presenterò la nuova struttura di Messaggi e ti mostrerò come creare le tue app iMessage.
Questo tutorial richiede l'esecuzione di Xcode 8 su OS X El Capitan o versioni successive e presuppone che si abbia dimestichezza con la creazione di un'applicazione iOS basata su UIKit. Se hai ancora iniziato lo sviluppo di iOS, dai un'occhiata alla serie di tutorial di iOS From Scratch With Swift. Nel corso di questa serie, imparerai come iniziare a sviluppare per la piattaforma iOS con articoli e tutorial approfonditi.
1. Ecosistema
L'ecosistema di app iMessage inizia con un App Store completo accessibile agli utenti tramite l'applicazione Messaggi. Questo negozio è completamente separato dal normale app store iOS e mostrerà solo le app relative a iMessage.
Le app iMessage esistono come estensioni alle normali applicazioni iOS, simili a estensioni di foto e tastiere personalizzate. La differenza principale è che, dal momento che l'App Store di iMessage esiste da solo all'interno dell'app Messaggi, è possibile creare un'app iMessage senza dover creare un'app iOS che vada sulla schermata principale dell'utente; l'app iMessage viene creata come un'estensione di un'app per iOS effettivamente vuota e invisibile. È importante notare, tuttavia, che, naturalmente, se si desidera sviluppare un'app iOS e iMessage, è possibile creare un'estensione iMessage come qualsiasi altro tipo di estensione.
Infine, mentre le app di iMessage saranno disponibili solo su iOS, il loro contenuto sarà comunque visibile su dispositivi macOS e watchOS. Oltre a questo, gli utenti di watchOS 3 potranno visualizzare i loro adesivi usati di recente e inviarli ai loro contatti direttamente da un Apple Watch.
Per le persone che desiderano creare un pacchetto di adesivi iMessage semplice e veloce, Xcode fornisce un modello per farlo senza dover scrivere alcun codice! Questo sarà un ottimo strumento per consentire agli artisti grafici senza conoscenze di programmazione di creare un pacchetto di adesivi.
Utilizzando la nuova struttura Messaggi per creare un pacchetto di adesivi, è possibile creare adesivi piccoli, medi o grandi. Questa dimensione, tuttavia, si applica a tutti gli adesivi nel tuo zaino. Hai solo bisogno di fornire la massima dimensione di immagine per ogni adesivo nella confezione, e il sistema ridurrà le immagini quando vengono visualizzate su altri dispositivi.
Anche se non strettamente applicate, ecco le dimensioni dei file consigliate da Apple per i pacchetti di adesivi:
Vi sono, tuttavia, alcune limitazioni alle immagini che è possibile utilizzare nei pacchetti di adesivi:
Apri Xcode e crea un nuovo progetto. Sotto il iOS> Applicazione sezione, vedrai che ora ci sono opzioni per Applicazione iMessage e Applicazione del pacchetto di adesivi progetti. Per questo primo esempio, selezionare il Applicazione del pacchetto di adesivi modello:
Se stai seguendo e desideri utilizzare alcuni asset di adesivi nella tua applicazione, puoi scaricarli dal Adesivi applicazione iMessage cartella del tutorial repo GitHub.
Vedrai nella barra laterale sinistra di Xcode che ora hai un Stickers.xcstickers catalogo delle risorse nel tuo progetto. Questa cartella conterrà l'icona dell'applicazione iMessage e tutti gli adesivi nel pacchetto. Aggiungere adesivi alla tua applicazione è facile come trascinarli nel Pacchetto di adesivi cartella del tuo catalogo delle risorse.
Tieni presente che se desideri aggiungere un adesivo animato utilizzando una serie di immagini, puoi fare clic con il pulsante destro del mouse sul tuo Pacchetto di adesivi cartella e scegliere il Aggiungi risorse> Nuova sequenza di adesivi opzione. Con questo pacchetto di adesivi, puoi trascinare per riordinare i singoli fotogrammi.
Infine, con il tuo catalogo delle risorse aperto, se vai al Ispettore degli attributi nella barra laterale destra di Xcode, è possibile modificare il nome del pacchetto di adesivi e anche il formato dell'adesivo che si sta utilizzando.
Per testare il tuo pacchetto di adesivi, premi semplicemente il pulsante di riproduzione nell'angolo in alto a sinistra di Xcode o premi Comando-R sulla tua tastiera. Una volta avviato il simulatore, Xcode dovrebbe presentarti il seguente menu.
Scegliere messaggi e quindi fare clic su Correre pulsante. Una volta che il simulatore ha lanciato il messaggi app, premi sul pulsante dell'app store nella parte inferiore dello schermo per accedere alle tue applicazioni iMessage.
Il tuo pacchetto di adesivi dovrebbe apparire inizialmente, ma se non lo fa, scorri fino a quando non lo raggiungi. Una volta caricata la tua app dovresti vedere i due adesivi che abbiamo aggiunto disponibili da usare e inviare.
Toccando uno di questi adesivi lo si aggiunge al messaggio corrente e da qui è possibile premere Invia.
Come puoi vedere, è molto veloce e facile creare pacchetti di adesivi per iMessage in iOS 10 senza dover usare alcun codice.
Per alcuni casi d'uso, la funzionalità di base fornita dal modello di applicazione di sticker base potrebbe non essere abbastanza. Per questo motivo, Apple ti offre anche un modo per creare un'applicazione di pacchi di adesivi più personalizzati. Se vuoi seguire, crea un nuovo progetto chiamato CustomStickerPack come mostrato all'inizio di questo tutorial, ma questa volta scegli il Applicazione iMessage modello.
Una volta che Xcode ha creato il tuo progetto, vedrai che ora hai cartelle simili a quelle di un'app per iOS con un altro MessagesExtension cartella. La cima CustomStickerPack la cartella contiene semplicemente un catalogo delle risorse e Info.plist file per la tua applicazione iOS "vuota". È importante fornire tutte le icone delle app di dimensioni corrette in questo catalogo risorse perché iOS continuerà a utilizzarlo per cose come le impostazioni di utilizzo della memoria dell'utente.
La cartella su cui ci concentreremo è la MessageExtension cartella, che al momento contiene i seguenti file:
Per il nostro esempio di applicazione di adesivi personalizzati, creeremo la nostra interfaccia a livello di programmazione utilizzando il nuovo MSStickerBrowserViewController classe.
Apri il tuo MessagesViewController.swift file, e in primo luogo vedrai che il tuo MessagesViewController la classe è una sottoclasse di MSMessagesAppViewController, che di per sé è una sottoclasse di UIViewController. Ciò significa che tutto l'UIKit è disponibile per l'uso nelle tue applicazioni iMessage.
Il MSMessagesAppViewController class fornisce molti metodi di callback che puoi sovrascrivere per personalizzare ulteriormente la funzionalità della tua applicazione, ma non dobbiamo preoccuparci di questi in questo tutorial. Per ora, modifica la definizione della tua classe in modo che la tua classe sia conforme a MSStickerBrowserViewDataSource protocollo:
class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource ...
Prima di poter mostrare i nostri adesivi, dobbiamo aggiungere i file al nostro progetto e caricarli. Trascina i file immagine che abbiamo usato in precedenza in questo tutorial nel tuo progetto e assicurati che vengano aggiunti al MessagesExtension bersaglio. I file devono essere aggiunti alla destinazione piuttosto che a un catalogo di risorse perché in questo modo possiamo caricarli da un URL, che è molto più facile quando si lavora con adesivi personalizzati.
Dopo aver aggiunto questi file, aggiungi il seguente codice al tuo MessagesViewController classe:
Accentsconagua
var stickers = [MSSticker] () func loadStickers () per i in 1 ... 2 if let url = Bundle.main.urlForResource ("Sticker \ (i)", withExtension: "png") do let sticker = prova MSSticker (contentsOfFileURL: url, localizedDescription: "") stickers.append (sticker) catch print (errore)Con questo codice creiamo semplicemente un MSSticker array per memorizzare i nostri adesivi e una funzione per caricarli dalla memoria locale.
Quindi, aggiungi il seguente metodo alla tua classe:
func createStickerBrowser () let controller = MSStickerBrowserViewController (stickerSize: .large) addChildViewController (controller) view.addSubview (controller.view) controller.stickerBrowserView.backgroundColor = UIColor.blue () controller.stickerBrowserView.dataSource = self view.topAnchor.constraint (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 questo codice, creiamo un'istanza di MSStickerBrowserViewController classe e aggiungere questo come un figlio del controller di visualizzazione radice oltre a vincolare l'intera altezza e larghezza.
Successivamente, dobbiamo implementare il necessario MSStickerBrowserViewDataSource metodi per fornire le necessarie informazioni sugli adesivi. Per fare ciò, aggiungi i seguenti metodi al tuo codice:
func numberOfStickers (in stickerBrowserView: MSStickerBrowserView) -> Int return stickers.count func stickerBrowserView (_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker return stickers [indice]
Infine, in modo che tutto il nostro codice sia effettivamente eseguito, sostituisci il tuo viewDidLoad metodo con il seguente:
override func viewDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Esegui la tua app proprio come facevamo prima (ricordando che potrebbe essere necessario scorrere rapidamente per arrivare all'app giusta), e una volta che tutto ha finito di caricare dovresti vedere uno schermo identico a prima, eccetto che ora con uno sfondo blu:
In questo tutorial, abbiamo caricato solo immagini di adesivi locali nella nostra applicazione personalizzata per semplicità. Uno dei principali vantaggi nell'utilizzo di un'applicazione adesiva personalizzata, tuttavia, è che è possibile caricare le immagini degli adesivi da un server remoto e persino, tramite l'uso di altri controller di visualizzazione, prima di mostrare il proprio MSStickerBrowserViewController, lascia che i tuoi utenti creino i loro adesivi.
Nell'ultima parte di questo tutorial, creeremo un'applicazione iMessage di base per creare un messaggio unico.
Se vuoi seguire, apri Xcode e creane un altro Applicazione iMessage chiamato MessageApp. Apri il tuo MainInterface.storyboard file e nel controller della vista visualizzato, rimuovere l'etichetta predefinita e aggiungere uno stepper e un pulsante come mostrato:
Tieni presente che affinché l'app iMessage appaia correttamente su tutte le dimensioni del dispositivo, è necessario implementare il layout automatico nelle interfacce. In questo esempio, ho vincolato lo stepper al centro del controller della vista e il pulsante in basso.
Quindi, apri il Ispettore degli attributi con lo stepper selezionato e modifica i suoi valori minimi e massimi in 0 e 10 rispettivamente:
Quindi, apri il Assistente editore con il tuo MessagesViewController.swift file per creare e collegare una presa per il tuo stepper e un ritocco all'interno dell'azione per il tuo pulsante:
@IBOutlet weak var stepper: UIStepper! @IBAction func donePress (button mittente: AnyObject)
Ora è il momento per noi di scrivere un codice. In primo luogo, ho bisogno di presentarti alcune classi cruciali durante la creazione di un'app iMessage:
MSConversation: Rappresenta la conversazione attualmente aperta. Puoi utilizzare questa classe per manipolare la trascrizione della conversazione, ad esempio inserendo messaggi o ricevendo il messaggio attualmente selezionato.MSMessage: Rappresenta un singolo messaggio, sia creato dall'utente da inserire nella conversazione o già esistente nella conversazione.MSMessageTemplateLayout: Crea una nuvoletta di messaggi in cui puoi visualizzare il tuo messaggio personalizzato. Come mostrato nell'immagine sottostante, questo modello di layout ha molte proprietà e posti in cui inserire i tuoi contenuti per personalizzare i tuoi messaggi.
È importante notare che lo spazio in alto a sinistra di questo layout verrà riempito dall'icona dell'app iMessage. Inoltre, tutte queste proprietà sono facoltative e non fornire alcuna stringa di sottotitoli per eliminare la parte inferiore del layout.
Ancora nel tuo MessagesViewController.swift file, aggiungi il seguente metodo al tuo MessagesViewController classe:
func createImageForMessage () -> UIImage? let background = UIView (frame: CGRect (x: 0, y: 0, width: 300, height: 300)) background.backgroundColor = UIColor.white () let label = UILabel (frame: CGRect (x: 75, y : 75, width: 150, height: 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 () immagine di ritorno
Con questo metodo, prendiamo il valore corrente del cursore e lo inseriamo in un'etichetta circolare. Quindi eseguiamo il rendering di questa etichetta (e della relativa vista padre contenente) in a UIImage oggetto che possiamo allegare al nostro messaggio.
Quindi, sostituisci il tuo didPress (pulsante :) metodo con il seguente codice:
@IBAction func donePress (button mittente: AnyObject) se let image = createImageForMessage (), lascia conversazione = activeConversation let layout = MSMessageTemplateLayout () layout.image = image layout.caption = "Valore passo passo" lascia messaggio = messaggio MSMessage () .layout = layout message.url = URL (stringa: "emptyURL") conversation.insert (message, completionHandler: (errore: NSError?) in stampa (errore))
Vedrai che con questo codice, prima creiamo il layout del messaggio e impostiamo il Immagine e didascalia proprietà. Successivamente, creiamo il nostro MSMessage oggetto da inserire nella conversazione.
Tieni presente che per iMessage per elaborare correttamente il tuo messaggio personalizzato, tu dovere imposta a disposizione e url per il tuo messaggio. Questo URL è destinato al collegamento a una pagina Web di qualche tipo in cui gli utenti macOS possono anche visualizzare il contenuto iMessage personalizzato. Per questo semplice esempio, tuttavia, abbiamo appena creato un URL di base da una stringa.
Infine, inseriamo il messaggio nella conversazione attiva corrente. Chiamare questo metodo in realtà non invia il messaggio, ma inserisce il messaggio nel campo di immissione dell'utente in modo che possano premere se stessi.
Crea ed esegui nuovamente la tua nuova app e vedrai un'interfaccia simile alla seguente:
Una volta premuto il tasto Creare un messaggio pulsante, dovresti anche vedere la bolla di layout del messaggio mostrata nel campo di inserimento e disponibile per inviare:
In questo tutorial, ho introdotto il nuovo framework Messaggi in iOS 10, che consente di creare pacchetti adesivi e applicazioni da integrare con iMessage. Abbiamo coperto le classi base di cui devi essere consapevole, incluso MSStickerBrowserViewController, MSConversation, MSMessage, e MSTemplateMessageLayout.
Il framework Messages fornisce API per darti un grande controllo sulle tue app iMessage. Per ulteriori letture, ti consiglio di consultare il riferimento ai messaggi di Apple.
Come sempre, si prega di essere sicuri di lasciare i vostri commenti e feedback nella sezione commenti qui sotto.
