Share
Cu iOS 10, Apple a deschis aplicația Mesaje către dezvoltatorii terță parte printr-o nouă funcție numită aplicații iMessage. Dezvoltatorii pot crea acum diferite tipuri de aplicații, de la pachete de autocolante până la interfețe integrate, care creează conținut inline iMessage.
În acest tutorial vă voi prezenta noul cadru de mesaje și vă vom arăta cum să vă creați propriile aplicații iMessage.
Acest tutorial necesită executarea Xcode 8 pe OS X El Capitan sau mai târziu și presupune că vă simțiți confortabil în crearea unei aplicații iOS bazate pe UIKit. Dacă începeți în continuare dezvoltarea iOS, consultați seria tutorial iOS From Scratch With Swift. În cursul acelei serii, veți învăța cum să începeți să vă dezvoltați pentru platforma iOS cu articole și tutoriale aprofundate.
1. Ecosistemul
Ecosistemul aplicației iMessage începe cu un App Store complet, accesibil utilizatorilor prin intermediul aplicației Mesaje. Acest magazin este complet separat de magazinul obișnuit de aplicații iOS și va afișa numai aplicațiile legate de iMessage.
Aplicațiile iMessage există ca extensii la aplicații obișnuite pentru iOS, asemănătoare cu alte lucruri precum extensiile pentru fotografii și tastaturile personalizate. Diferența esențială este că, deoarece iMessage App Store există pe cont propriu în aplicația Mesaje, puteți crea o aplicație iMessage fără a trebui să creați o aplicație pentru iOS care să meargă pe ecranul de pornire al utilizatorului; aplicația iMessage este creată ca o extensie a unei aplicații iOS efectiv goale și nevăzute. Este important de reținut însă că, desigur, dacă doriți să dezvoltați o aplicație iOS și iMessage, puteți crea o extensie iMessage la fel ca orice alt tip de extensie.
În fine, în timp ce aplicațiile iMessage vor fi disponibile numai în iOS, conținutul lor va fi în continuare vizibil pe dispozitivele macOS și watchOS. În plus, utilizatorii de watchOS 3 vor putea să vadă autocolantele utilizate recent și să le trimită la contactele lor direct de la Apple Watch.
Pentru persoanele care doresc doar să creeze un pachet de autocolante iMessage rapid și ușor, Xcode oferă un șablon pentru a face acest lucru fără a fi nevoie să scrieți deloc un cod! Acesta va fi un instrument excelent pentru a permite artiștilor grafici care nu dețin cunoștințe de programare pentru a crea un pachet de autocolante.
Folosind cadrul nou Mesaje pentru a crea un pachet de autocolante, puteți crea autocolante mici, medii sau mari. Cu toate acestea, această mărime se aplică tuturor autocolantelor din pachetul dvs. Trebuie doar să oferiți cea mai mare dimensiune a imaginii pentru fiecare autocolant din pachetul dvs., iar sistemul vă va scade imaginile atunci când este afișat pe alte dispozitive.
Deși nu sunt strict aplicate, iată dimensiunile fișierelor recomandate de Apple pentru pachetele de autocolante:
Cu toate acestea, există unele limitări la imaginile pe care le puteți utiliza în pachetele de autocolante:
Deschideți Xcode și creați un nou proiect. Sub iOS> aplicație secțiune, veți vedea că există acum opțiuni pentru aplicație iMessage și Aplicarea pachetului de aplicații proiecte. Pentru acest prim exemplu, selectați Aplicarea pachetului de aplicații șablon:
Dacă urmăriți de-a lungul timpului și doriți să utilizați în aplicația dvs. anumite elemente de autocolant, le puteți descărca de la iMessage Application Stickers dosarul GitHub repo tutorialului.
Veți vedea în bara laterală din stânga a Xcode că aveți acum o Stickers.xcstickers catalogul de active în proiectul dvs. Acest dosar va conține pictograma aplicației iMessage și toate autocolantele din pachetul dvs. Adăugarea de autocolante la aplicația dvs. este la fel de ușor ca și tragerea lor în Pachetul de autocolante din catalogul de materiale.
Rețineți că, dacă doriți să adăugați un autocolant animat utilizând o serie de imagini, puteți să faceți clic dreapta pe acesta Pachetul de autocolante și selectați Adăugați active> Noua secvență de autocolante opțiune. Cu aceasta în pachetul de autocolante, puteți trage apoi pentru a reordona cadrele individuale.
În cele din urmă, cu catalogul de active deschis, dacă mergi la Atribuții inspector în bara laterală dreaptă a Xcode, puteți schimba numele pachetului dvs. de autocolante și dimensiunea autocolantului pe care îl utilizați.
Pentru a testa pachetul de autocolante, apăsați butonul de redare în colțul din stânga sus al Xcode sau apăsați Command-R pe tastatură. Odată ce simulatorul a pornit, Xcode trebuie să vă prezinte următorul meniu.
Alege Mesaje apoi faceți clic pe Alerga buton. Odată ce simulatorul a lansat Mesaje app, apăsați pe butonul pentru magazinul de aplicații din partea de jos a ecranului pentru a accesa aplicațiile dvs. iMessage.
Pachetul dvs. de autocolant ar trebui să apară inițial, dar dacă nu se întâmplă, glisați-l până ajungeți la el. După ce ați încărcat aplicația, ar trebui să vedeți cele două etichete pe care le-am adăugat disponibile pentru utilizare și trimitere.
Atingerea fiecăreia dintre aceste autocolante va adăuga mesajul curent și de aici puteți apăsa tasta de expediere.
După cum puteți vedea, este foarte rapid și ușor să creați pachete de autocolante pentru iMessage în iOS 10 fără a fi nevoie să utilizați vreun cod la toate.
Pentru unele cazuri de utilizare, funcționalitatea foarte de bază furnizată de șablonul de aplicare a autocolantului de bază poate că nu este suficient. Din acest motiv, Apple oferă, de asemenea, o modalitate de a vă crea o aplicație pachet de autocolante mai personalizată. Dacă doriți să urmați, creați un nou proiect numit CustomStickerPack după cum se arată la începutul acestui tutorial, dar de această dată alegeți aplicație iMessage șablon.
După ce Xcode ți-a creat proiectul, vei vedea că acum ai foldere similare cu cele ale unei aplicații iOS cu o aplicație suplimentară MessagesExtension pliant. Topul CustomStickerPack folder conține pur și simplu un catalog de active și Info.plist fișier pentru aplicația dvs. "iOS" necompletată. Este important să furnizați toate pictogramele de aplicații de dimensiuni corecte din acest catalog de materiale, deoarece iOS-ul îl va utiliza în continuare pentru lucruri precum setările de utilizare a spațiului de stocare al utilizatorului.
Dosarul pe care ne vom concentra pe acesta este MessageExtension , care în prezent conține următoarele fișiere:
Pentru aplicația de tip sticker personalizat, vom crea doar interfața programată utilizând noua aplicație MSStickerBrowserViewController clasă.
Deschide-ți MessagesViewController.swift fișier, și veți vedea în primul rând că dvs. MessagesViewController clasa este o subclasă de MSMessagesAppViewController, care în sine este o subclasă de UIViewController. Aceasta înseamnă că toate UIKit sunt disponibile pentru a fi utilizate în aplicațiile dvs. iMessage.
MSMessagesAppViewController clasa oferă numeroase metode de apel invers, pe care le puteți suprascrie pentru a personaliza în continuare funcționalitatea aplicației dvs., dar nu trebuie să vă faceți griji cu privire la acestea în acest tutorial. Pentru moment, trebuie doar să editați definiția clasei astfel încât clasa să se conformeze MSStickerBrowserViewDataSource protocol:
class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource ...
Înainte de a putea afișa autocolantele noastre, trebuie să adăugăm fișierele în proiectul nostru și să le încărcăm. Glisați fișierele de imagine pe care le-am folosit mai devreme în acest tutorial în proiectul dvs. și asigurați-vă că acestea sunt adăugate la MessagesExtension ţintă. Fișierele trebuie să fie adăugate la destinație, mai degrabă decât la un catalog de materiale, pentru că astfel putem să le încărcăm dintr-o adresă URL, ceea ce este mult mai ușor atunci când lucrăm cu autocolante personalizate.
Odată ce ați adăugat aceste fișiere, adăugați codul următor MessagesViewController clasă:
Accentsconagua
var stickers = [MSSticker] () func loadStickers () pentru i în 1 ... 2 if let url = Bundle.main.urlForResource ("Autocolant \ (i)" cu Extensie: "png" încercați MSSticker (contentsOfFileURL: url, localizedDescription: "") stickers.append (autocolant) captura print (error)Cu acest cod creăm pur și simplu un MSSticker array pentru a stoca autocolante noastre și o funcție pentru a le încărca din depozitul local.
Apoi, adăugați următoarea metodă la clasa dvs.:
func createStickerBrowser () permite controler = MSStickerBrowserViewController (stickerSize: .large) addChildViewController (controler) view.addSubview (controller.view) controller.stickerBrowserView.backgroundColor = UIColor.blue () controller.stickerBrowserView.dataSource = auto view.topAnchor.constraint (egTo: controller.view.topAnchor) .isActive = true view.bottomAnchor.constraint (egTo: controller.view.bottomAnchor) .isActive = true view.leftAnchor.constraint (equalTo: controller.view.leftAnchor) .isActive = true view .rightAnchor.constraint (egTo: controller.view.rightAnchor) .isActive = true
Cu acest cod, creăm o instanță a MSStickerBrowserViewController clasă și adăugați acest lucru ca pe un copil al controlerului de vizualizare rădăcină, pe lângă faptul că îl constrângeți la înălțimea și lățimea disponibile.
Apoi, trebuie să implementăm cerințele necesare MSStickerBrowserViewDataSource metode pentru furnizarea informațiilor necesare privind autocolantul. Pentru a face acest lucru, adăugați următoarele metode la codul dvs.:
func numberOfStickers (în stickerBrowserView: MSStickerBrowserView) -> Int return stickers.count func stickerBrowserView (_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker return stickers [index]
În sfârșit, pentru ca tot codul nostru să fie executat, înlocuiți-vă viewDidLoad cu următoarele metode:
override func vizualizareDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Rulați aplicația exact așa cum am făcut-o mai devreme (amintindu-vă că este posibil să fiți nevoit să vă deplasați pentru a ajunge la aplicația potrivită) și, odată ce totul sa terminat de încărcat, ar trebui să vedeți un ecran identic cu cel anterior, cu excepția acum cu un fundal albastru:
În acest tutorial, am încărcat doar imagini autocolante locale în aplicația noastră personalizată pentru simplitate. Unul dintre principalele avantaje ale utilizării unei aplicații autocolante personalizate este totuși că puteți încărca imagini autocolante de pe un server la distanță și chiar și prin utilizarea altor controale de vizualizare înainte de a vă arăta MSStickerBrowserViewController, permiteți utilizatorilor să creeze propriile autocolante.
În ultima parte a acestui tutorial, vom crea o aplicație iMessage foarte de bază pentru a crea un mesaj unic.
Dacă doriți să urmați, deschideți Xcode și creați un altul aplicație iMessage denumit MessageApp. Deschide-ți MainInterface.storyboard fișierul și în controlerul de vizualizare afișat, eliminați eticheta implicită și adăugați un pas cu pas și un buton așa cum este prezentat:
Rețineți că pentru ca aplicația dvs. iMessage să apară corect pe toate dimensiunile dispozitivului, va trebui să implementați aspectul automat în interfețele dvs. În acest exemplu, am constrâns pas cu pas spre centrul controlerului de vizualizare și butonul către partea de jos.
Apoi, deschideți Atribuții inspector cu pasul selectat și modificați valorile sale minime și maxime 0 și 10 respectiv:
Apoi, deschideți Editor asistent cu tine MessagesViewController.swift fișier pentru a crea și conecta o priză pentru stepper și o atingere în interiorul acțiunii pentru butonul dvs.:
@ IBOutlet slab stepper var: UIStepper! Funcția @IBAction didPress (expeditorul butonului: AnyObject)
Acum este timpul să scriem niște cod. În primul rând, trebuie să vă prezint câteva clase care sunt esențiale atunci când creați o aplicație iMessage:
MSConversation: Reprezintă conversația deschisă în prezent. Puteți utiliza această clasă pentru a manipula conversia conversației, de exemplu prin introducerea mesajelor sau obținerea mesajului selectat în prezent.MSMessage: Reprezintă un singur mesaj, indiferent dacă a fost creat de dvs. pentru inserarea în conversație sau deja existent în conversație.MSMessageTemplateLayout: Creează un balon de mesaje pentru ca dvs. să vă afișați mesajul personalizat. După cum se arată în imaginea de mai jos, acest aspect de șablon are multe proprietăți și locuri pentru a vă pune propriul conținut pentru a vă personaliza mesajele.
Este important să rețineți că spațiul din partea stângă sus a acestui aspect va fi completat de pictograma aplicației dvs. iMessage. De asemenea, toate aceste proprietăți sunt opționale, iar furnizarea de șir de legende la toate nu va scăpa de partea inferioară a aspectului.
Încă în tine MessagesViewController.swift fișier, adăugați următoarea metodă la dvs. MessagesViewController clasă:
func createImageForMessage () -> UIImage? let background = UIView (cadru: CGRect (x: 0, y: 0, lățime: 300, înălțimea: 300)) background.backgroundColor = UIColor.white () label label = UILabel : 75, lățime: 150, înălțime: 150)) label.font = UIFont.systemFont (ofSize: 56.0) label.backgroundColor = UIColor.red () label.textColor = UIColor.white () label.text = (stepper.value)) "label.textAlignment = .center label.layer.cornerRadius = label.frame.size.width / 2.0 label.clipsToBounds = adevărat background.addSubview (label) background.frame.origin = CGPoint (x: vizualizare .frame.size.width, y: view.frame.size.height) view.addSubview (fundal) UIGraphicsBeginImageContextWithOptions (background.frame.size, false, UIScreen.main () scale) background.drawHierarchy (in: background.bounds , afterScreenUpdates: true) permite imaginea = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () background.removeFromSuperview () return image
Cu această metodă, luăm valoarea curentă a cursorului și puneți-o într-o etichetă circulară. Apoi, facem această etichetă (și conținutul ei parental) să fie a UIImage obiect pe care îl putem atașa la mesajul nostru.
Apoi, înlocuiți-vă didPress (buton :) cu următorul cod:
@IBAction func didPress (expeditorul butonului: AnyObject) dacă permiteți image = createImageForMessage (), permiteți conversației = activeConversation let layout = MSMessageTemplateLayout () layout.image = imagine layout.caption = "Stepper Value" .layout = layout message.url = URL (șir: "emptyURL") conversation.insert (mesaj, completareHandler: (eroare: NSError?) în imprimare (eroare))
Veți vedea că, cu acest cod, vom crea în primul rând aspectul mesajului și setați imagine și legendă proprietăți. Apoi, ne creăm MSMessage obiect de inserat în conversație.
Rețineți că pentru ca iMessage să vă proceseze corect mesajul personalizat, tu trebuie sa a seta a schemă și URL-ul pentru mesajul tău. Această adresă URL este destinată să se conecteze la o pagină web de un anumit fel în care utilizatorii MacOS pot vizualiza, de asemenea, conținutul personalizat de iMessage. Pentru acest exemplu simplu, totuși, am creat doar un url de bază dintr-un șir.
În cele din urmă, introducem mesajul în conversația activă curentă. Apelarea acestei metode nu trimite de fapt mesajul, deși - în schimb pune mesajul dvs. în câmpul de introducere al utilizatorului, astfel încât să poată apăsa pe el însuși.
Construiți și rulați din nou noua aplicație și veți vedea o interfață similară cu cea de mai jos:
Odată ce apăsați butonul Creați un mesaj , ar trebui să vedeți, de asemenea, balonul de aspect al mesajului afișat în câmpul de introducere și disponibil pentru a trimite:
În acest tutorial, v-am prezentat noul cadru de mesaje în iOS 10, care vă permite să creați pachete de autocolante și aplicații care să se integreze cu iMessage. Am acoperit clasele de bază de care trebuie să fii conștient, inclusiv MSStickerBrowserViewController, MSConversation, MSMessage, și MSTemplateMessageLayout.
Cadrul Mesaje oferă API-uri pentru a vă oferi o mare cantitate de control asupra aplicațiilor dvs. iMessage. Pentru citirea ulterioară, aș recomanda verificarea referințelor de mesaje ale Apple.
Ca întotdeauna, vă rugăm să aveți grijă să lăsați comentariile și feedback-ul dvs. în secțiunea de comentarii de mai jos.
