Share
Med iOS 10 har Apple åpnet meldingsprogrammet til tredjepartsutviklere gjennom en ny funksjon kalt iMessage-apper. Utviklere kan nå lage sine egne ulike typer apper, alt fra klistremerkepakker til fullt interaktive grensesnitt, som lager inline iMessage-innhold.
I denne opplæringen skal jeg introdusere deg til det nye meldingsrammen og vise deg hvordan du lager dine egne iMessage-apper.
Denne opplæringen krever at du kjører Xcode 8 på OS X El Capitan eller senere, og antar at du er komfortabel med å lage et UIKit-basert iOS-program. Hvis du fremdeles er i gang med iOS-utvikling, sjekk ut iOS-serien med hurtig opplæring. I løpet av denne serien lærer du hvordan du begynner å utvikle for iOS-plattformen med grundige artikler og opplæringsprogrammer.
1. Økosystem
IMessage app-økosystemet starter med en full App Store som er tilgjengelig for brukere gjennom Meldings-programmet. Denne butikken er helt skilt fra den vanlige iOS-appbutikken, og vil bare vise iMessage-relaterte apper.
iMessage-apper finnes som utvidelser til vanlige iOS-programmer, som ligner på ting som utvidelser av bilder og tilpassede tastaturer. Hovedforskjellen er at siden iMessage App Store eksisterer alene i appen Meldinger, kan du opprette en iMessage-app uten å måtte opprette en iOS-app som går på brukerens startskjerm. iMessage-appen er opprettet som en utvidelse av en effektivt tom og usynlig iOS-app. Det er imidlertid viktig å merke seg at selvfølgelig hvis du ønsker å utvikle både en iOS og iMessage-app, kan du opprette en iMessage-utvidelse, akkurat som enhver annen type utvidelse.
Til slutt, mens iMessage-apper bare vil være tilgjengelige på iOS, vil innholdet deres fortsatt være synlig på macOS og watchOS-enheter. I tillegg til dette vil brukere av watchOS 3 kunne se de nylig brukte klistremerkene og sende disse til sine kontakter direkte fra en Apple Watch.
For folk som bare vil lage en rask og enkel iMessage-klistremerkepakke, gir Xcode en mal for å gjøre det uten å måtte skrive noen kode i det hele tatt! Dette vil være et godt verktøy for å gjøre det mulig for grafikere uten programmeringskunnskap å lage en klistremerkepakke.
Ved hjelp av det nye Meldingsrammen for å lage en klistremerkepakke, kan du lage små, mellomstore eller store klistremerker. Denne størrelsen gjelder imidlertid for alle klistremerker i pakken. Du trenger bare å gi den største bildestørrelsen for hvert klistremerke i pakken din, og systemet vil nedskalere bildene dine når de vises på andre enheter.
Selv om det ikke er strengt håndhevet, her er filstørrelsene som Apple anbefaler for klistremerkepakker:
Det er imidlertid noen begrensninger på bildene du kan bruke i klistremerkepakker:
Åpne Xcode og opprett et nytt prosjekt. Under iOS> Søknad delen, vil du se at det er nå muligheter for iMessage-applikasjon og Sticker Pack Application prosjekter. For dette første eksempelet, velg Sticker Pack Application mal:
Hvis du følger med og ønsker at noen klistremerker skal brukes i søknaden din, kan du laste dem ned fra iMessage Application Stickers mappe av opplæringen GitHub repo.
Du vil se i venstre sidefelt av Xcode som du nå har Stickers.xcstickers aktiv katalog i prosjektet ditt. Denne mappen inneholder iMessage-applikasjonsikonet og alle klistremerkene i pakken. Å legge til klistremerker i søknaden din er like enkelt som å dra dem inn i Klistremerkepakke mappe av aktivkatalogen din.
Vær oppmerksom på at hvis du vil legge til et animert klistremerke ved hjelp av en serie bilder, kan du høyreklikke i din Klistremerkepakke mappe og velg Legg til eiendeler> Ny klistremerke alternativ. Med dette i klistremerkepakken kan du dra for å omordne individuelle rammer.
Til slutt, med aktivkatalogen din åpen, hvis du går til Attributter inspektør i høyre sidefelt av Xcode kan du endre navnet på klistremerkepakken din og også klistremerkeformatet du bruker.
For å teste klistremerkepakken, trykk bare på avspillingsknappen i det øverste venstre hjørnet av Xcode eller trykk Kommando-R på tastaturet ditt. Når simulatoren har startet opp, bør Xcode presentere deg med følgende meny.
Velge meldinger og klikk deretter på Løpe knapp. Når simulatoren har lansert meldinger app, trykk på app store knappen nederst på skjermen for å få tilgang til iMessage applikasjoner.
Klistremerkepakken din skulle først oppstå, men hvis den ikke gjør det, sveiper du over til du kommer til den. Når appen din er lastet, bør du se de to klistremerkene som vi la til tilgjengelig for bruk og send.
Hvis du trykker på en av disse klistremerkene, legger du den til den aktuelle meldingen, og herfra kan du trykke på send.
Som du ser, er det veldig raskt og enkelt å lage klistremerkepakker for iMessage i iOS 10 uten at du trenger å bruke noen kode i det hele tatt.
For noen brukstilfeller kan den grunnleggende funksjonaliteten som er gitt av grunnleggende klistremerke-applikasjonsmalen, ikke være nok. På grunn av dette gir Apple også en måte for deg å lage en mer tilpasset klistremerkepakke. Hvis du vil følge med, opprett et nytt prosjekt som heter CustomStickerPack som vist i begynnelsen av denne opplæringen, men denne gangen velger du iMessage-applikasjon mal.
Når Xcode har opprettet prosjektet ditt, ser du at du nå har mapper som ligner på en iOS-app med en ekstra MessagesExtension mappe. Toppen CustomStickerPack mappen inneholder bare en aktiv katalog og Info.plist fil for ditt "tomme" iOS-program. Det er viktig at du oppgir alle ikonene for riktig størrelse i denne aktivakatalogen fordi iOS vil fortsatt bruke den til ting som brukerens lagringsbruksinnstillinger.
Mappen vi skal fokusere på, er MessageExtension mappe, som for øyeblikket inneholder følgende filer:
For vårt eksempel tilpassede klistremerkerapplikasjon, skal vi bare lage vårt grensesnitt programmatisk ved hjelp av det nye MSStickerBrowserViewController klasse.
Åpne opp din MessagesViewController.swift fil, og du vil først se at din MessagesViewController klassen er en underklasse av MSMessagesAppViewController, som i seg selv er en underklasse av UIViewController. Dette betyr at alt UIKit er tilgjengelig for bruk i iMessage-applikasjonene.
De MSMessagesAppViewController klassen gir mange tilbakekallingsmetoder som du kan overstyre for å tilpasse funksjonaliteten til søknaden din, men vi trenger ikke å bekymre deg for disse i denne opplæringen. For øyeblikket, rediger du bare klassedeksten din slik at klassen din samsvarer med MSStickerBrowserViewDataSource protokoll:
klasse MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource ...
Før vi kan vise våre klistremerker, må vi legge til filene i prosjektet vårt og laste dem. Dra bildefilene vi brukte tidligere i denne opplæringen, til prosjektet ditt, og sørg for at de legges til MessagesExtension mål. Filene må legges til målet i stedet for en aktivkatalog fordi den måten vi kan laste dem fra en nettadresse, noe som er mye enklere når vi jobber med tilpassede klistremerker.
Når du har lagt til disse filene, legger du til følgende kode i din MessagesViewController klasse:
Accentsconagua
var klistremerker = [MSSticker] () func loadStickers () for jeg i 1 ... 2 hvis la url = Bundle.main.urlForResource ("Sticker \ (i)", medExtension: "png") do let sticker = prøv MSSticker (contentOfFileURL: url, localizedDescription: "") stickers.append (klistremerke) fangst print (error)Med denne koden oppretter vi bare en MSSticker array for å lagre våre klistremerker og en funksjon for å laste dem fra lokal lagring.
Deretter legger du til følgende metode i klassen din:
func createStickerBrowser () la controller = MSStickerBrowserViewController (stickerSize: .large) addChildViewController (controller) view.addSubview (controller.view) controller.stickerBrowserView.backgroundColor = UIColor.blue () controller.stickerBrowserView.dataSource = self view.topAnchor.constraint (likeTo: controller.view.topAnchor) .isActive = true view.bottomAnchor.constraint (likeTo: controller.view.bottomAnchor) .isActive = sant view.leftAnchor.constraint (likeTo: controller.view.leftAnchor) .isActive = sann visning .RightAnchor.constraint (likeTo: controller.view.rightAnchor) .isActive = true
Med denne koden oppretter vi en forekomst av MSStickerBrowserViewController klassen og legg til dette som et barn i roten visnings kontrolleren i tillegg til å begrense den til full tilgjengelig høyde og bredde.
Deretter må vi implementere det nødvendige MSStickerBrowserViewDataSource metoder for å gi nødvendig klistremerkeinformasjon. For å gjøre det, legg til følgende metoder i koden din:
func numberOfStickers (i stickerBrowserView: MSStickerBrowserView) -> Int return stickers.count func stickerBrowserView (_ stickerBrowserView: MSStickerBrowserView, stickerAt-indeks: Int) -> MSSticker retur klistremerker [indeks]
Til slutt, slik at hele vår kode faktisk blir utført, erstatt din viewDidLoad metode med følgende:
overstyr func viewDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Kjør appen din som vi gjorde tidligere (husk at du må sveipe over for å komme til den rette appen), og når alt er fullført, bør du se en identisk skjerm til tidligere bortsett fra nå med en blå bakgrunn:
I denne opplæringen har vi bare lastet inn lokale klistremerkebilder i vår egendefinerte applikasjon for enkelhet. En av de viktigste fordelene ved å bruke et tilpasset klistremerkerapplikasjon er imidlertid at du kan laste inn klistremerkebilder fra en ekstern server og til og med gjennom bruk av andre visningskontrollere før du viser din MSStickerBrowserViewController, la brukerne lage egne klistremerker.
I den siste delen av denne opplæringen skal vi lage et veldig grunnleggende iMessage-program for å skape en unik melding.
Hvis du vil følge med, åpner du Xcode og lager en annen iMessage-applikasjon kalt MessageApp. Åpne opp din MainInterface.storyboard fil og i visningskontrollen som vises, fjern standard etiketten og legg til en stepper og knapp som vist:
Vær oppmerksom på at for at iMessage-appen din skal vises riktig på alle enhetsstørrelser, må du implementere automatisk oppsett i grensesnittene dine. I dette eksemplet har jeg begrenset stepper til sentrum av visningsregulatoren og knappen til bunnen.
Deretter åpner du Attributter inspektør med din stepper valgt og endre minimums- og maksimumsverdiene til 0 og 10 henholdsvis:
Deretter åpner du Assistent redaktør med din MessagesViewController.swift fil for å opprette og koble til et stikkontakt for din stepper og et trykk på innsiden av handlingen for knappen din:
@IBOutlet svak var stepper: UIStepper! @IBAction func didPress (knapp sender: AnyObject)
Nå er det på tide for oss å skrive noen kode. For det første må jeg presentere deg for noen få klasser som er avgjørende når du oppretter en iMessage-app:
MSConversation: Representerer den nåværende åpne samtalen. Du kan bruke denne klassen for å manipulere samtalen transkripsjon, for eksempel ved å sette inn meldinger eller få den valgte meldingen.MSMessage: Representerer en enkelt melding, enten laget av deg for å sette inn i samtalen eller allerede finnes i samtalen.MSMessageTemplateLayout: Lag en meldingsboble for at du skal vise din egendefinerte melding. Som vist i bildet nedenfor har denne maloppsettet mange egenskaper og steder for deg å sette ditt eget innhold for å tilpasse meldingene dine.
Det er viktig å merke seg at plassen øverst til venstre i denne oppsettet blir fylt av iMessage-appens ikon. Også, alle disse egenskapene er valgfrie, og det vil ikke bli tatt med tekstingstrenger i det hele tatt, bli kvitt den nedre delen av oppsettet.
Fortsatt i din MessagesViewController.swift fil, legg til følgende metode for din MessagesViewController klasse:
func createImageForMessage () -> UIImage? la bakgrunn = UIView (ramme: CGRect (x: 0, y: 0, bredde: 300, høyde: 300)) background.backgroundColor = UIColor.white () la label = UILabel (ramme: CGRect (x: 75, y : 75, bredde: 150, høyde: 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 = sann bakgrunn.addSubview (etikett) background.frame.origin = CGPoint (x: view .frame.size.width, y: view.frame.size.height) view.addSubview (bakgrunn) UIGraphicsBeginImageContextWithOptions (background.frame.size, false, UIScreen.main () skala) background.drawHierarchy (i: background.bounds , afterScreenUpdates: true) la bildet = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () background.removeFromSuperview () returbilde
Med denne metoden tar vi gjeldende verdi av glidebryteren og legger denne inn i en sirkulær etikett. Vi gjør så denne etiketten (og dens inneholdende foreldrevisning) til en UIImage objekt som vi kan legge ved vår melding.
Neste, erstatt din didPress (knapp :) metode med følgende kode:
@IBAction func didPress (knapp sender: AnyObject) hvis la bildet = createImageForMessage (), la conversation = activeConversation la layout = MSMessageTemplateLayout () layout.image = image layout.caption = "Stepper Value" la melding = MSMessage () melding .layout = layout message.url = URL (streng: "emptyURL") conversation.insert (melding, fullføringHandler: (feil: NSError?) på utskriften (feil))
Du vil se at med denne koden, oppretter vi først meldingsoppsettet og setter bilde og bildetekst eiendommer. Deretter lager vi vår MSMessage motsette seg å sette inn i samtalen.
Vær oppmerksom på at for iMessage å behandle din egendefinerte melding riktig, gjør du det må sett a oppsett og url for meldingen din. Denne nettadressen er ment å lenke til en nettside av noe slag hvor MacOS-brukere også kan vise ditt egendefinerte iMessage-innhold. For dette enkle eksempelet har vi nettopp opprettet en grunnleggende URL fra en streng.
Til slutt legger vi inn meldingen i den aktive samtalen. Å ringe denne metoden sender ikke meldingen, men i stedet legger den meldingen din i brukerens inntastingsfelt slik at de kan trykke sende seg selv.
Bygg og kjør din nye app igjen, og du vil se et grensesnitt som ligner på følgende:
Når du trykker på Opprett melding knappen, bør du også se meldingslayoutboblen som vises i inntastingsfeltet og tilgjengelig for å sende:
I denne veiledningen introduserte jeg deg til det nye meldingsrammen i iOS 10, som lar deg lage klistremerkepakker og applikasjoner for å integrere med iMessage. Vi dekket de grunnleggende klassene du må være oppmerksom på, inkludert MSStickerBrowserViewController, MSConversation, MSMessage, og MSTemplateMessageLayout.
Meldingsrammen gir APIer for å gi deg stor kontroll over iMessage-appene dine. For videre lesing, vil jeg anbefale å sjekke Apples meldingsramme referanse.
Som alltid, vær så snill å legge igjen dine kommentarer og tilbakemeldinger i kommentarfeltet nedenfor.
