Share
Met iOS 10 heeft Apple de toepassing Berichten geopend voor externe ontwikkelaars via een nieuwe functie genaamd iMessage-apps. Ontwikkelaars kunnen nu hun eigen verschillende soorten apps maken, variërend van stickerpakketten tot volledig interactieve interfaces, die inline iMessage-inhoud creëren.
In deze tutorial ga ik je voorstellen aan het nieuwe Messages-framework en laat je zien hoe je je eigen iMessage-apps kunt maken.
Deze tutorial vereist dat je Xcode 8 gebruikt op OS X El Capitan of hoger en gaat ervan uit dat je vertrouwd bent met het maken van een UIKit-gebaseerde iOS-applicatie. Als je nog steeds aan de slag gaat met de ontwikkeling van iOS, lees dan de iOS From Scratch With Swift-zelfstudieserie. In de loop van die reeks leer je hoe je kunt beginnen met ontwikkelen voor het iOS-platform met diepgaande artikelen en zelfstudies.
1. Ecosysteem
Het ecosysteem van de iMessage-app begint met een volledige App Store die toegankelijk is voor gebruikers via de toepassing Berichten. Deze winkel staat volledig los van de normale iOS-app store en toont alleen de iMessage-gerelateerde apps.
iMessage-apps bestaan als extensies voor normale iOS-applicaties, vergelijkbaar met dingen als Foto's-extensies en aangepaste toetsenborden. Het belangrijkste verschil is dat, aangezien de iMessage App Store alleen in de Berichten-app bestaat, u een iMessage-app kunt maken zonder een iOS-app te hoeven maken die op het startscherm van de gebruiker wordt weergegeven; de iMessage-app is gemaakt als een uitbreiding van een in feite lege en onzichtbare iOS-app. Het is echter belangrijk om op te merken dat, als u zowel een iOS- als een iMessage-app wilt ontwikkelen, u een iMessage-extensie kunt maken, net als elk ander type extensie..
Ten slotte, terwijl iMessage-apps alleen beschikbaar zijn op iOS, is hun inhoud nog steeds zichtbaar op macOS- en watchOS-apparaten. Bovendien kunnen gebruikers van watchOS 3 hun onlangs gebruikte stickers bekijken en rechtstreeks vanuit een Apple Watch naar hun contactpersonen verzenden..
Voor mensen die gewoon een snel en gemakkelijk iMessage-stickerpakket willen maken, biedt Xcode een sjabloon om dit te doen zonder enige code te hoeven schrijven! Dit is een geweldig hulpmiddel om grafische artiesten zonder enige programmeerkennis in staat te stellen een stickerpakket te maken.
Met behulp van het nieuwe berichtenkader om een stickerpakket te maken, kunt u kleine, middelgrote of grote stickers maken. Deze maat is echter van toepassing op alle stickers in uw pakket. U hoeft alleen de grootste afbeeldingsgrootte op te geven voor elke sticker in uw pakket, en het systeem zal uw afbeeldingen downscalen wanneer deze op andere apparaten worden weergegeven.
Hoewel niet strikt gehandhaafd, zijn hier de bestandsgroottes die Apple aanbeveelt voor uw stickerpakketten:
Er zijn echter enkele beperkingen aan de afbeeldingen die u in uw stickerpakketten kunt gebruiken:
Open Xcode en maak een nieuw project. Onder de iOS> Applicatie sectie, zult u zien dat er nu opties voor zijn iMessage-toepassing en Toepassing stickerpakket projecten. Selecteer voor dit eerste voorbeeld de Toepassing stickerpakket sjabloon:
Als u meegaat en wilt dat een aantal sticker-items in uw toepassing worden gebruikt, kunt u deze downloaden van de Stickers voor iMessage-toepassingen map van de tutorial GitHub repo.
Je ziet in de linkerzijbalk van Xcode dat je nu een hebt Stickers.xcstickers activacatalogus in uw project. Deze map bevat uw iMessage-toepassingspictogram en alle stickers in uw pakket. Het toevoegen van stickers aan uw applicatie is net zo eenvoudig als het slepen naar de Stickerpakket map van uw activacatalogus.
Let op: als u een geanimeerde sticker wilt toevoegen met behulp van een reeks afbeeldingen, kunt u met de rechtermuisknop klikken in uw Stickerpakket map en kies de Activa toevoegen> Nieuwe stickerreeks keuze. Hiermee kun je in je stickerpakket slepen om individuele frames opnieuw in te delen.
Ten slotte, als uw activacatalogus open is, als u naar de Attributen-inspecteur in de rechterzijbalk van Xcode kunt u de naam van uw stickerpakket en ook de stickerformaten die u gebruikt wijzigen.
Om uw stickerpakket te testen, drukt u eenvoudig op de afspeelknop in de linkerbovenhoek van Xcode of drukt u op Command-R op je toetsenbord. Zodra de simulator is opgestart, zou Xcode je het volgende menu moeten aanbieden.
Kiezen berichten en klik vervolgens op de Rennen knop. Zodra de simulator de berichten app, druk op de app store-knop onderaan het scherm om toegang te krijgen tot uw iMessage-applicaties.
Je stickerpakket moet in eerste instantie worden weergegeven, maar als dit niet het geval is, veeg je naar de tegenovergestelde richting totdat je het hebt bereikt. Zodra uw app is geladen, ziet u de twee stickers die we hebben toegevoegd beschikbaar voor gebruik en verzending.
Als u op een van deze stickers tikt, wordt deze aan het huidige bericht toegevoegd en vanaf hier kunt u op Verzenden drukken.
Zoals je ziet is het heel gemakkelijk en snel om stickerpakketten te maken voor iMessage in iOS 10 zonder dat je helemaal geen code hoeft te gebruiken.
Voor sommige gebruikssituaties is de basisfunctionaliteit van de basissticker-applicatiesjabloon misschien niet voldoende. Daarom biedt Apple ook een manier om een meer aangepaste stickerpakkettoepassing te maken. Als je mee wilt, maak je een nieuw project met de naam CustomStickerPack zoals getoond aan het begin van deze tutorial, maar deze keer kies je voor iMessage-toepassing sjabloon.
Zodra Xcode uw project heeft gemaakt, ziet u dat u nu mappen hebt die lijken op die van een iOS-app met een extra MessagesExtension map. De top CustomStickerPack map bevat eenvoudig een activacatalogus en Info.plist bestand voor uw "lege" iOS-applicatie. Het is belangrijk dat u alle app-pictogrammen van de juiste grootte in deze activacatalogus opgeeft, omdat iOS deze nog steeds zal gebruiken voor zaken als de instellingen voor opslaggebruik van de gebruiker.
De map waar we ons op gaan focussen is de MessageExtension map, die op dit moment de volgende bestanden bevat:
Voor onze voorbeeldtoepassing voor sticker op maat, gaan we onze interface programmatisch maken met behulp van het nieuwe MSStickerBrowserViewController klasse.
Open je MessagesViewController.swift bestand, en u zult eerst zien dat uw MessagesViewController class is een subklasse van MSMessagesAppViewController, die zelf een subklasse is van UIViewController. Dit betekent dat alle UIKit beschikbaar is voor u om te gebruiken in uw iMessage-applicaties.
De MSMessagesAppViewController class biedt veel callback-methoden die u kunt overschrijven om de functionaliteit van uw toepassing verder aan te passen, maar daarover hoeven we ons in deze zelfstudie geen zorgen te maken. Bewerk voortaan alleen je klassendefinitie zodat je klas voldoet aan de MSStickerBrowserViewDataSource protocol:
class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource ...
Voordat we onze stickers kunnen tonen, moeten we de bestanden aan ons project toevoegen en ze laden. Sleep de afbeeldingsbestanden die we eerder in deze zelfstudie gebruikten naar uw project en zorg ervoor dat ze zijn toegevoegd aan de MessagesExtension doelwit. De bestanden moeten aan het doel worden toegevoegd in plaats van aan een activacatalogus, omdat we ze op die manier vanuit een URL kunnen laden, wat veel gemakkelijker is wanneer met aangepaste stickers wordt gewerkt..
Nadat u deze bestanden hebt toegevoegd, voegt u de volgende code toe aan uw MessagesViewController klasse:
Accentsconagua
var stickers = [MSSticker] () func loadStickers () for i in 1 ... 2 if url = Bundle.main.urlForResource ("Sticker \ (i)", met Uitbreiding: "png") do let sticker = probeer MSSticker (contentsOfFileURL: url, localizedDescription: "") stickers.append (sticker) catch print (error)Met deze code maken we eenvoudig een MSSticker array om onze stickers op te slaan en een functie om ze vanuit de lokale opslag te laden.
Voeg vervolgens de volgende methode toe aan uw klas:
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
Met deze code maken we een instantie van de MSStickerBrowserViewController class en voeg dit toe als een kind van de root view-controller naast het beperken van de volledige beschikbare hoogte en breedte.
Vervolgens moeten we de vereiste implementeren MSStickerBrowserViewDataSource methoden om de nodige stickerinformatie te verstrekken. Voeg de volgende methoden toe aan uw code om dit te doen:
func numberOfStickers (in stickerBrowserView: MSStickerBrowserView) -> Int return stickers.count func stickerBrowserView (_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker retourstickers [index]
Als laatste, zodat al onze code daadwerkelijk wordt uitgevoerd, vervangt u uw viewDidLoad methode met de volgende:
override func viewDidLoad () super.viewDidLoad () loadStickers () createStickerBrowser ()
Voer uw app uit op dezelfde manier als we eerder deden (onthoud dat u mogelijk over moet vegen om bij de juiste app te komen) en zodra alles is geladen, ziet u een identiek scherm als eerder, behalve nu met een blauwe achtergrond:
In deze zelfstudie hebben we alleen lokale stickerafbeeldingen in onze aangepaste toepassing geladen voor de eenvoud. Een van de belangrijkste voordelen van het gebruik van een aangepaste stickerapplicatie is echter dat u stickerafbeeldingen van een externe server kunt laden en zelfs door het gebruik van andere beeldcontrollers voordat u uw MSStickerBrowserViewController, laat uw gebruikers hun eigen stickers maken.
In het laatste deel van deze tutorial gaan we een zeer eenvoudige iMessage-toepassing maken om een uniek bericht te maken.
Als je verder wilt gaan, open je Xcode en maak je een nieuwe iMessage-toepassing riep MessageApp. Open je MainInterface.storyboard bestand en verwijder in de weergegeven weergavecontroller het standaardlabel en voeg een stepper en knop toe zoals weergegeven:
Houd er rekening mee dat uw iMessage-app correct moet worden weergegeven op alle apparaatgroottes, zodat u automatische lay-out in uw interfaces kunt implementeren. In dit voorbeeld heb ik de stepper beperkt tot het midden van de view controller en de knop tot onderaan.
Open vervolgens de Attributen-inspecteur met uw stepper geselecteerd en verander de minimum en maximum waarden in 0 en 10 respectievelijk:
Open vervolgens de Assistent redacteur met uw MessagesViewController.swift bestand om een stopcontact voor je stepper aan te maken en aan te sluiten en een touch-up in actie voor je knop:
@IBOutlet weak var stepper: UIStepper! @IBAction func didPress (knopverzender: AnyObject)
Nu is het tijd voor ons om wat code te schrijven. Ten eerste moet ik u kennis laten maken met enkele klassen die cruciaal zijn bij het maken van een iMessage-app:
MSConversation: Vertegenwoordigt het momenteel geopende gesprek. U kunt deze klasse gebruiken om het gesprekscript te manipuleren, bijvoorbeeld door berichten in te voegen of het momenteel geselecteerde bericht te ontvangen.MSMessage: Vertegenwoordigt een enkel bericht, door u gemaakt om in het gesprek in te voegen of al in het gesprek aanwezig.MSMessageTemplateLayout: Hiermee maakt u een berichtballon waarin u uw aangepast bericht kunt weergeven. Zoals u in de onderstaande afbeelding kunt zien, heeft deze sjabloonnay-out veel eigenschappen en plaatsen waar u uw eigen inhoud kunt plaatsen om uw berichten aan te passen.
Het is belangrijk op te merken dat de ruimte linksboven in deze lay-out wordt ingevuld door het pictogram van uw iMessage-app. Bovendien zijn al deze eigenschappen optioneel en leveren ze helemaal geen bijschriftstrings weg van het onderste gedeelte van de lay-out.
Nog steeds in jouw MessagesViewController.swift bestand, voeg de volgende methode toe aan uw MessagesViewController klasse:
func createImageForMessage () -> UIImage? let background = UIView (frame: CGRect (x: 0, y: 0, width: 300, height: 300)) background.backgroundColor = UIColor.white () laat 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 (achtergrond) UIGraphicsBeginImageContextWithOptions (background.frame.size, false, UIScreen.main (). scale) background.drawHierarchy (in: background.bounds , afterScreenUpdates: true) let image = UIGraphicsGetImageFromCurrentImageContext () UIGraphicsEndImageContext () background.removeFromSuperview () retourafbeelding
Met deze methode nemen we de huidige waarde van de schuifregelaar en plaatsen deze in een cirkelvormig label. Vervolgens geven we dit label (en de bijbehorende bovenliggende weergave) weer in een UIImage object dat we kunnen toevoegen aan ons bericht.
Vervang vervolgens uw didPress (button :) methode met de volgende code:
@IBAction func didPress (knopverzender: AnyObject) if let image = createImageForMessage (), laat conversation = activeConversation let layout = MSMessageTemplateLayout () layout.image = image layout.caption = "Stepper Value" laat bericht = MSMessage () bericht .layout = layout message.url = URL (string: "emptyURL") conversation.insert (message, completionHandler: (error: NSError?) in print (error))
U zult zien dat we met deze code eerst de berichtlay-out maken en het bericht instellen beeld en onderschrift eigenschappen. Vervolgens maken we onze MSMessage object om in te voegen in het gesprek.
Houd er rekening mee dat iMessage uw aangepaste bericht correct verwerkt, u moet stel een lay-out en url voor je bericht. Deze url is bedoeld om te linken naar een webpagina van een soort waar macOS-gebruikers ook uw aangepaste iMessage-inhoud kunnen bekijken. Voor dit eenvoudige voorbeeld hebben we echter zojuist een basis-URL gemaakt van een tekenreeks.
Ten slotte voegen we het bericht in het huidige actieve gesprek in. Als u deze methode aanroept, wordt het bericht echter niet daadwerkelijk verzonden. In plaats daarvan wordt uw bericht in het invoerveld van de gebruiker geplaatst, zodat deze zelf kan verzenden.
Bouw en voer uw nieuwe app opnieuw uit en u zult een interface zien die lijkt op het volgende:
Zodra u op de Creeër bericht knop, dan zou je ook de message layout bubble in het invoerveld moeten zien en beschikbaar zijn om te verzenden:
In deze tutorial heb ik je voorgesteld aan het nieuwe Messages-framework in iOS 10, waarmee je stickerpakketten en applicaties kunt maken om te integreren met iMessage. We hebben de basislessen behandeld waarvan je op de hoogte moet zijn, inclusief MSStickerBrowserViewController, MSConversation, MSMessage, en MSTemplateMessageLayout.
Het Messages-framework biedt API's om u een grote hoeveelheid controle over uw iMessage-apps te geven. Voor meer informatie, raad ik aan Apple's Messages Framework Reference te raadplegen.
Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder.
