iOS 10 aangepaste meldingsinterfaces maken

Invoering

Met iOS 10 kunnen ontwikkelaars van apps nu aangepaste interfaces maken voor meldingen die aan hun gebruikers worden bezorgd. De mogelijkheden van dit framework worden getoond in de Berichten-app, waar u de gespreksinterface kunt bekijken alsof u in de app zelf was.

Het framework dat al deze functionaliteit mogelijk maakt, is het nieuwe UserNotificationsUI kader. Door dit kader te gebruiken, kunt u elk aanpassen UIViewController subklasse om uw melding inhoud te presenteren.

In deze zelfstudie laat ik je zien hoe je dit nieuwe framework kunt gebruiken om een ​​aangepaste interface te maken voor de meldingen van je eigen apps.

Deze tutorial vereist dat je Xcode 8 gebruikt met de iOS 10 SDK. Je zult ook het startersproject van GitHub moeten downloaden. 

Let op: het startersproject gebruikt het nieuwe UserNotification-framework in iOS 10 om de lokale meldingen voor testen in te plannen. We zullen dat framework gedurende de hele tutorial gebruiken, dus als je er niet bekend mee bent, kijk dan eens naar mijn bericht hier:

  • Een inleiding tot het UserNotifications Framework

    In deze tutorial leer je over het nieuwe UserNotifications-framework in iOS 10, tvOS 10 en watchOS 3. Dit nieuwe framework biedt een moderne set van ...
    Davis Allie
    iOS

1. Uitbreiding van de kennisgevingsinhoud

Net als veel andere soorten extra iOS-app-functionaliteit zoals het delen en aangepaste toetsenborden, beginnen meldingsinterfaces met een extensie. 

Open het startproject in Xcode en navigeer naar Bestand> Nieuw> Doel ... in de menubalk. Selecteer in het dialoogvenster dat verschijnt iOS> Toepassings-extensie> Meldingsinhoud uitbreidingstype:

Geef uw extensie een naam die u wilt en klik op Af hebben:

Als er een pop-up verschijnt waarin u wordt gevraagd om uw nieuwe schema te activeren, klikt u op Activeren knop om het in te stellen voor foutopsporing:

U ziet nu een nieuwe map met de naam van uw extensie in de Xcode Bestandsnavigator voor jouw project. Deze map bevat de volgende bestanden:

  • NotificationViewController.swift welke het bevat NotificationViewController klasse A, eerste klasse UIViewController subklasse) voor uw aangepaste interface. Standaard maakt Xcode deze klasse ook automatisch conform het vereiste protocol uit het UserNotificationUI-framework. We zullen dit protocol later in de tutorial in meer detail bekijken.
  • MainInterface.storyboard Dit is een storyboard-bestand met een enkele view-controller. Dit is de interface die wordt weergegeven wanneer een gebruiker communiceert met uw melding. Xcode koppelt deze interface automatisch aan de NotificationViewController klasse dus dat hoeft niet handmatig te gebeuren.
  • Info.plist die veel belangrijke details over uw extensie bevat. Als u dit bestand opent, ziet u dat het veel items bevat. De enige waar je je zorgen over moet maken, is echter de NSExtension woordenboek dat het volgende bevat:

U zult zien dat Xcode uw extensie van de kennisgevingsinhoud automatisch koppelt aan het juiste systeemextensiepunt, com.apple.usernotifications.content-extensie, en storyboard-interfacebestand, MainInterface. Binnen de NSExtensionAttributes subwoordenboek, er zijn twee attributen die u moet definiëren:

  • UNNotificationExtensionCategory Dit is een tekenreekswaarde die identiek is aan de meldingscategorie waarvoor u de aangepaste interface wilt weergeven. In uw Info.plist bestand, verander deze waarde in com.tutplus.Custom-Notification-Interface.notification zodat het overeenkomt met de categorie die wordt gebruikt door het startersproject.
  • UNNotificationExtensionInitialContentSizeRatio wat een getal tussen is 0 en 1 de beeldverhouding van uw eigen interface definiëren. De standaardwaarde van 1 vertelt het systeem dat uw interface een totale hoogte heeft die gelijk is aan de breedte. Een waarde van 0.5, bijvoorbeeld, zou resulteren in een interface met een hoogte gelijk aan de helft van de totale breedte. Het is belangrijk op te merken dat de hoogte van uw interface dynamisch kan worden gewijzigd wanneer deze wordt geladen. De waarde in de Info.plist is slechts een schatting, zodat het systeem een ​​mooiere animatie kan weergeven.

Bovendien kunt u ook de UNNotificationExtensionDefaultContentHidden attribuut hierin NSExtensionAttributes woordenboek. Voor dit attribuut is een Booleaanse waarde vereist die het systeem laat weten of het de standaardmeldingsweergave samen met uw interface moet weergeven. De titelbalk bovenaan bevat het pictogram en de naam van uw app en een knop om te verwijderen altijd getoond worden. Voor elke aangepaste actie die u hebt gedefinieerd voor uw meldingscategorie, wordt ook altijd een knop weergegeven voor de gebruiker om deze actie uit te voeren. Een waarde definiëren van waar voor dit attribuut zal het systeem alleen uw aangepaste interface laten zien en niet de standaard notificatie. Als u dit kenmerk niet definieert of een waarde opgeeft van vals, dan wordt de standaard notificatie weergegeven onder uw interface.

2. De interface maken

Het creëren van de interface voor uw aangepaste notificatie-inhoud is identiek aan wanneer u een interface maakt voor elke normale iOS-viewcontroller. 

Een heel belangrijk ding om in gedachten te houden bij het ontwerpen van uw interface, is echter dat uw view controller geen aanraakgebeurtenissen zal ontvangen wanneer deze aan de gebruiker worden getoond. Dit betekent dat uw view-controller geen interface-elementen mag bevatten waarvan de gebruiker zou verwachten dat deze ermee kan communiceren, inclusief knoppen, schakelaars, schuifregelaars, etc. Houd er rekening mee dat u nog steeds items zoals UITableViews en UIScrollViews in uw interface en schuif ze programmatisch door als uw inhoud niet in de hele interface past. 

De enige uitzondering hierop is dat als uw interface een of ander medium bevat dat aan de melding is gekoppeld, u aan het systeem kunt vragen om een ​​afspeel- / pauzeknop voor media weer te geven. 

Als u de interface voor deze zelfstudie wilt maken, opent u uw MainInterface.storyboard het dossier. Selecteer eerst de view controller en in de Attributen-inspecteur, verander de hoogte om gelijk te zijn aan de breedte:

Wijzig vervolgens de achtergrondkleur van het hoofdvenster in wit. Wijzig ten slotte de tekstkleureigenschap van het bestaande label in zwart en de tekstgrootte in 96. Als u klaar bent, ziet uw interface er ongeveer als volgt uit:

Hoewel we de standaardinterface van Xcode slechts in geringe mate hebben gewijzigd, afhankelijk van wat voor soort inhoud uw app bevat, kunt u eenvoudig een op UIKit gebaseerde interface maken die u bij uw meldingen kunt presenteren.

3. Programmeren van de View Controller

Nu met onze interface voltooid, opent u uw NotificationViewController.swift bestand om te beginnen met het implementeren van functionaliteit binnen de view-controller.

Wat maakt uw weergave-viewcontroller apart van andere reguliere UIViewController subklasse is de conformiteit met de UNNotificationContentExtension protocol. Dit protocol maakt deel uit van het UserNotificationsUI-framework en definieert de volgende methoden:

  • didReceive (_ :) die wordt aangeroepen wanneer uw app een nieuwe melding ontvangt. Het bevat een single UNNotification object als een parameter die u kunt gebruiken om toegang te krijgen tot alle inhoud van de binnenkomende melding. Het is belangrijk om te weten dat deze methode meerdere keren kan worden aangeroepen als uw app meldingen blijft ontvangen wanneer uw interface open is, zodat uw app hiermee kan omgaan..
  • didReceive (_: completionHandler :) die wordt aangeroepen wanneer de gebruiker op een van de aangepaste actieknoppen van uw melding tikt. Deze methode bevat een UNNotificationResponse object dat u kunt gebruiken om te bepalen welke actie de gebruiker heeft geselecteerd. Wanneer u klaar bent met het verwerken van de meldingsactie, moet u de voltooiingshandler bellen met een UNNotificationContentExtensionResponseOption waarde.

De UNNotificationContentExtensionResponseOption opsomming definieert de volgende opties:

  • doNotDismiss die u moet gebruiken wanneer uw meldingscontroller alle logica voor die actie verwerkt en u wilt dat uw interface op het scherm blijft.
  • ontslaan die u moet gebruiken wanneer uw meldingscontrolemechanisme alle logica voor die actie verwerkt en u wilt dat uw interface wordt gesloten.
  • dismissAndForwardAction die je zou moeten gebruiken wanneer je je interface wilt sluiten en je app wilt laten delegeren (of wat dan ook) UNUserNotificationCenterDelegate object is) de aangepaste actie afhandelen.

Een ander stuk functionaliteit dat het UNNotificationContentExtension-protocol biedt, is de mogelijkheid om een ​​door het systeem gegenereerde media-afspeelknop aan uw interface toe te voegen. Dit is de enkel en alleen uitzondering op de beperkingen van het interfaceontwerp die ik eerder noemde. Door de volgende eigenschappen en methoden te negeren, kunt u deze knop toevoegen aan uw interface en detecteren wanneer de gebruiker de knop indrukt:

  • mediaPlayPauseButtonType: een UNNotificationContentExtensionMediaPlayPauseButtonType waarde
  • mediaPlayPauseButtonFrame: een CGRect waarde
  • mediaPlayPauseButtonTintColor: een UIColor waarde
  • mediaPlay: called wanneer uw interface de media moet afspelen
  • mediaPause: called wanneer uw interface de media moet pauzeren

De lokale melding die het startproject maakt, bevat een aangepast nummer in de meldingen gebruikers informatie property, en dit is wat we gaan weergeven in de aangepaste interface. Om dit te doen, vervangt u uw NotificationViewController klasse didReceive (_ :) methode met de volgende:

func didReceive (_ notification: UNNotification) if let number = notification.request.content.userInfo ["customNumber"] as? Int label? .Text = "\ (number)"

Nu is het tijd voor ons om onze aangepaste interface te testen. Controleer eerst of het doel van uw iOS-toepassing momenteel is geselecteerd door Xcode in de linkerbovenhoek:

Wanneer uw app is geselecteerd, drukt u op Command-R of de afspeelknop in de linkerbovenhoek om uw app uit te voeren. Bij de eerste keer dat uw app wordt uitgevoerd, ziet u de volgende waarschuwing om meldingen toe te staan:

Klik Toestaan en druk vervolgens op de startknop op uw apparaat (of Command-Shift-H bij gebruik van de simulator) om de app te sluiten. Wacht ongeveer 30 seconden en de volgende melding verschijnt op uw apparaat:

Om de aangepaste interface te bekijken, kunt u klikken en naar beneden tikken in deze melding of 3D Touch gebruiken als u een iPhone 6s of 7 apparaat of simulator gebruikt. Als u de simulator gebruikt, kunt u 3D-aanraakfuncties simuleren met behulp van de opties in de Hardware> Druk aanraken menu:

Zodra uw meldingsinterface is geladen, moet deze op de volgende schermafbeelding lijken:

U ziet dat de meldtitel, ondertitel en hoofdtekst worden weergegeven onder de aangepaste interface. Dit komt omdat we geen waarde hebben opgegeven van waar voor de UNNotificationExtensionDefaultContentHidden sleutel.

U zult ook opmerken dat de notificatie-interface begint als een vierkant, vanwege de UNNotificationExtensionInitialContentSizeRatio waarde die we eerder hebben ingesteld, en vervolgens worden geanimeerd om in het label 100 te passen. De grootte van de meldingsinterface wordt allemaal afgehandeld door het iOS Auto-lay-outsysteem, dus als u bijvoorbeeld wilt dat uw interface recht blijft, kunt u een weergave in uw interface om een ​​beeldverhouding van 1: 1 te hebben.

Conclusie

Over het algemeen stelt het UserNotificationsUI-framework u in staat eenvoudig feature-rijke interfaces te maken voor uw meldingen die gebruikers in staat stellen om met uw app te communiceren zonder te sluiten waar zij op dit moment aan werken. Hoewel we in deze zelfstudie slechts een heel eenvoudig voorbeeld hebben gemaakt, kunt u alles wat u in een gewone iOS-appweergavecontroller kunt zetten in uw meldingsinterface plaatsen, inclusief gedetailleerde en complexe elementen zoals SceneKit en SpriteKit-weergaven..

Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder. En bekijk enkele van onze andere artikelen en tutorials over nieuwe functies in iOS 10 en watchOS 3!

  • WWDC 2016 Nasleep

    De keynote van de WWDC van dit jaar was vol met aankondigingen en verrast. De focus lag op software en diensten. Apple besprak hun platforms, macOS, iOS, tvOS, ...
    Davis Allie
    iOS
  • Maak een iMessage-app in iOS 10

    In deze zelfstudie leer je de basisprincipes van het maken van iMessage-stickerpakketten en -toepassingen voor iOS 10-apparaten. Dit zal u voorzien van de nodige ...
    Davis Allie
    iOS SDK
  • Wat is er nieuw in watchOS 3: Achtergrondtaken

    In deze tutorial leert u meer over de nieuwe WatchKit-API's in watchOS 3, waarmee uw Apple Watch-apps hun inhoud eenvoudig kunnen verversen in de ...
    Davis Allie
    watchos
  • Een inleiding tot het UserNotifications Framework

    In deze tutorial leer je over het nieuwe UserNotifications-framework in iOS 10, tvOS 10 en watchOS 3. Dit nieuwe framework biedt een moderne set van ...
    Davis Allie
    iOS