iOS 10 creazione di interfacce di notifica personalizzate

introduzione

Con iOS 10, Apple ora consente agli sviluppatori di app di creare interfacce personalizzate per le notifiche inviate ai propri utenti. Le possibilità di questo framework sono mostrate nell'app Messaggi, dove puoi visualizzare l'interfaccia di conversazione come se fossi nell'app stessa.

Il framework che rende possibile questa funzionalità è il nuovo UserNotificationsUI struttura. Usando questa struttura, puoi adattarne qualsiasi UIViewController sottoclasse per presentare il contenuto della notifica.

In questo tutorial, ti mostrerò come utilizzare questo nuovo framework per creare un'interfaccia personalizzata per le notifiche della tua app.

Questo tutorial richiede che tu stia utilizzando Xcode 8 con iOS 10 SDK. Dovrai anche scaricare il progetto iniziale da GitHub. 

Si noti che il progetto starter utilizza il nuovo framework UserNotification in iOS 10 per pianificare le notifiche locali per il test. Utilizzeremo tale framework durante il tutorial, quindi se non lo conosci, dai un'occhiata al mio post qui:

  • Introduzione al framework UserNotifications

    In questo tutorial, imparerai a conoscere il nuovo framework UserNotifications in iOS 10, tvOS 10 e watchOS 3. Questo nuovo framework fornisce un set moderno di ...
    Davis Allie
    iOS

1. Estensione del contenuto delle notifiche

Come molti altri tipi di funzionalità aggiuntive per le applicazioni iOS come la condivisione e le tastiere personalizzate, le interfacce di notifica iniziano con un'estensione. 

Con il progetto di avvio aperto in Xcode, vai a File> Nuovo> Target ... nella barra dei menu. Nella finestra di dialogo che appare, seleziona il iOS> Estensione applicazione> Contenuto notifica tipo di estensione:

Assegna alla tua estensione il nome che vuoi e fai clic finire:

Se viene visualizzato un popup che chiede di attivare il nuovo schema, fare clic su Attivare pulsante per configurarlo per il debug:

Ora vedrai una nuova cartella con il nome della tua estensione in Xcode File Navigator per il tuo progetto. Questa cartella contiene i seguenti file:

  • NotificationViewController.swift che contiene il NotificationViewController classe A UIViewController sottoclasse) per la tua interfaccia personalizzata. Per impostazione predefinita, Xcode rende automaticamente questa classe conforme al protocollo richiesto dal framework UserNotificationUI. Esamineremo questo protocollo in modo più dettagliato più avanti nel tutorial.
  • MainInterface.storyboard che è un file storyboard contenente un singolo controller di visualizzazione. Questa è l'interfaccia che verrà mostrata quando un utente interagisce con la tua notifica. Xcode collega automaticamente questa interfaccia fino al NotificationViewController classe in modo che non debba essere fatto manualmente.
  • Info.plist che contiene molti dettagli importanti sulla tua estensione. Se apri questo file, vedrai che contiene molti oggetti. L'unico di cui devi preoccuparti, tuttavia, è il NSExtension dizionario che contiene quanto segue:

Vedrai che Xcode collega automaticamente l'estensione del contenuto della notifica al punto di estensione del sistema corretto, com.apple.usernotifications.content-estensione, e il file dell'interfaccia storyboard, MainInterface. All'interno del NSExtensionAttributes sottotitolo, ci sono due attributi che è necessario definire:

  • UNNotificationExtensionCategory che è un valore stringa identico alla categoria di notifica per cui vuoi visualizzare l'interfaccia personalizzata. Nel tuo Info.plist file, cambia questo valore in com.tutplus.Custom-Notification-Interface.notification in modo che corrisponda alla categoria utilizzata dal progetto iniziale.
  • UNNotificationExtensionInitialContentSizeRatio che è un numero tra 0 e 1 definendo le proporzioni dell'interfaccia personalizzata. Il valore predefinito di 1 dice al sistema che l'interfaccia ha un'altezza totale pari alla sua larghezza. Un valore di 0.5, per esempio, risulterebbe un'interfaccia con un'altezza pari alla metà della sua larghezza totale. È importante notare che l'altezza dell'interfaccia può essere modificata dinamicamente quando viene caricata. Il valore nel Info.plist è solo un numero di stima in modo che il sistema possa visualizzare un'animazione più bella.

Inoltre, puoi anche definire il UNNotificationExtensionDefaultContentHidden attributo in questo NSExtensionAttributes dizionario. Questo attributo richiede un valore booleano che indica al sistema se deve o meno visualizzare la vista di notifica predefinita insieme all'interfaccia. La barra del titolo in alto contenente l'icona e il nome della tua app e un pulsante di annullamento funzionerà sempre essere mostrato. Per ogni azione personalizzata definita per la categoria di notifica, verrà sempre visualizzato anche un pulsante per l'esecuzione di questa azione da parte dell'utente. Definire un valore di vero per questo attributo, il sistema mostrerà solo la tua interfaccia personalizzata e non la vista di notifica predefinita. Se non definisci questo attributo o fornisci un valore di falso, quindi la vista di notifica predefinita verrà mostrata sotto l'interfaccia.

2. Creazione dell'interfaccia

La creazione dell'interfaccia per il tuo contenuto di notifica personalizzato è identica a quando stai creando un'interfaccia per qualsiasi normale controller di visualizzazione iOS. 

Una cosa molto importante da tenere a mente quando si progetta la tua interfaccia, tuttavia, è che il tuo controller di visualizzazione non riceverà alcun evento di tocco quando viene visualizzato all'utente. Ciò significa che il tuo controller di visualizzazione non dovrebbe includere elementi di interfaccia che l'utente si aspetterebbe di poter interagire con pulsanti, interruttori, cursori, ecc. Si noti che è ancora possibile includere elementi come UITableViews e UIScrollViews nella tua interfaccia e scorrili a livello di codice se il tuo contenuto non si adatta all'intera interfaccia. 

L'unica eccezione è che, se l'interfaccia contiene un tipo di supporto associato alla notifica, è possibile chiedere al sistema di visualizzare un pulsante di riproduzione / pausa multimediale. 

Per creare l'interfaccia per questo tutorial, apri il tuo MainInterface.storyboard file. In primo luogo, selezionare il controller della vista e in Ispettore degli attributi, cambia la sua altezza per essere uguale alla sua larghezza:

Quindi, cambia il colore di sfondo della vista principale in bianco. Infine, modifica la proprietà del colore del testo dell'etichetta esistente in nero e la dimensione del testo in 96. Al termine, l'interfaccia dovrebbe essere simile alla seguente:

Anche se abbiamo modificato solo leggermente l'interfaccia predefinita fornita da Xcode, a seconda del tipo di contenuto della tua app, puoi facilmente creare qualsiasi interfaccia basata su UIKit da presentare con le tue notifiche.

3. Programmazione del View Controller

Ora con la nostra interfaccia completa, apri la tua NotificationViewController.swift file per iniziare ad implementare funzionalità all'interno del controller di visualizzazione.

Ciò che distingue il controller di visualizzazione del contenuto della notifica da qualsiasi altro normale UIViewController sottoclasse è la sua conformità al UNNotificationContentExtension protocollo. Questo protocollo fa parte del framework UserNotificationsUI e definisce i seguenti metodi:

  • didReceive (_ :) che viene chiamato ogni volta che la tua app riceve una nuova notifica. Contiene un singolo UNNotification oggetto come parametro che è possibile utilizzare per accedere a tutti i contenuti della notifica in arrivo. È importante notare che questo metodo può essere chiamato più volte se la tua app continua a ricevere notifiche quando la tua interfaccia è aperta, quindi la tua app dovrebbe essere in grado di gestirlo.
  • didReceive (_: completionHandler :) che viene chiamato quando l'utente tocca uno dei pulsanti di azione personalizzati della notifica. Questo metodo contiene a UNNotificationResponse oggetto che è possibile utilizzare per determinare quale azione l'utente ha selezionato. Al termine dell'elaborazione dell'azione di notifica, è necessario chiamare il gestore di completamento con a UNNotificationContentExtensionResponseOption valore.

Il UNNotificationContentExtensionResponseOption l'enumerazione definisce le seguenti opzioni:

  • doNotDismiss che dovresti usare quando il tuo controller di visualizzazione delle notifiche gestisce tutta la logica per quell'azione e vuoi che la tua interfaccia rimanga sullo schermo.
  • respingere che dovresti usare quando il tuo controller di visualizzazione delle notifiche gestisce tutta la logica per quell'azione e vuoi che la tua interfaccia sia chiusa.
  • dismissAndForwardAction che dovresti usare quando vuoi chiudere la tua interfaccia e lasciare che il tuo app delegato (o qualunque sia il tuo UNUserNotificationCenterDelegate oggetto è) gestire l'azione personalizzata.

Un'altra funzionalità fornita dal protocollo UNNotificationContentExtension è la possibilità di aggiungere un pulsante di riproduzione multimediale generato dal sistema all'interfaccia. Questo è il solo eccezione alle limitazioni progettuali dell'interfaccia che ho menzionato in precedenza. Sovrascrivendo le seguenti proprietà e metodi, è possibile aggiungere questo pulsante all'interfaccia e rilevare quando viene premuto dall'utente:

  • mediaPlayPauseButtonType: a UNNotificationContentExtensionMediaPlayPauseButtonType valore
  • mediaPlayPauseButtonFrame: a CGRect valore
  • mediaPlayPauseButtonTintColor: a UIColor valore
  • mediaPlay: chiamato quando l'interfaccia deve riprodurre i suoi media
  • mediaPause: chiamato quando la tua interfaccia deve mettere in pausa i suoi media

La notifica locale creata dal progetto di avviamento include un numero personalizzato nella notifica userInfo proprietà, e questo è ciò che mostreremo nell'interfaccia personalizzata. Per fare ciò, sostituisci il tuo NotificationViewController La classe di didReceive (_ :) metodo con il seguente:

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

Ora è il momento per noi di testare la nostra interfaccia personalizzata. Innanzitutto, assicurati che la destinazione dell'applicazione iOS sia attualmente selezionata da Xcode nell'angolo in alto a sinistra:

Quando la tua app è stata selezionata, premi Comando-R o il pulsante di riproduzione nell'angolo in alto a sinistra per eseguire la tua app. Alla prima esecuzione della tua app, visualizzerai il seguente avviso per consentire le notifiche:

Clic permettere e quindi premere il tasto home sul dispositivo (o Comando-Maiuscole-H se si utilizza il simulatore) per chiudere l'app. Attendere circa 30 secondi e sul dispositivo verrà visualizzata la seguente notifica:

Per visualizzare l'interfaccia personalizzata, è possibile fare clic e tirare su questa notifica o utilizzare 3D Touch su di esso se si utilizza un dispositivo o un simulatore iPhone 6s o 7. Se si utilizza il simulatore, è possibile simulare le funzionalità di tocco 3D utilizzando le opzioni in Hardware> Tocca pressione menu:

Una volta caricata l'interfaccia di notifica, dovrebbe apparire come il seguente screenshot:

Vedrai che il titolo della notifica, il sottotitolo e il corpo sono mostrati sotto l'interfaccia personalizzata, e questo perché non abbiamo specificato un valore di vero per il UNNotificationExtensionDefaultContentHidden chiave.

Noterai inoltre che l'interfaccia di notifica inizia come un quadrato, a causa del UNNotificationExtensionInitialContentSizeRatio valore impostato in precedenza e quindi si anima per adattarsi all'etichetta che mostra 100. Il ridimensionamento dell'interfaccia di notifica è gestito dal sistema di layout automatico iOS, quindi, ad esempio, se si desidera mantenere l'interfaccia quadrata, è possibile limitare una visualizzazione nell'interfaccia per avere un rapporto 1: 1.

Conclusione

Nel complesso, il framework UserNotificationsUI consente di creare facilmente interfacce ricche di funzionalità per le notifiche che consentono agli utenti di interagire con l'app senza chiudere ciò su cui stanno attualmente lavorando. Mentre in questo tutorial abbiamo solo creato un esempio molto semplice, tutto ciò che è possibile inserire in un normale controller iOS può essere inserito nell'interfaccia di notifica, inclusi elementi dettagliati e complessi come le viste SceneKit e SpriteKit.

Come sempre, si prega di essere sicuri di lasciare i vostri commenti e feedback nella sezione commenti qui sotto. E dai un'occhiata ad alcuni dei nostri altri articoli e tutorial sulle nuove funzionalità di iOS 10 e watchOS 3!

  • WWDC 2016 Aftermath

    Il keynote del WWDC di quest'anno era pieno di annunci e sorpresi. L'attenzione era rivolta a software e servizi. Apple ha discusso le loro piattaforme, macOS, iOS, tvOS, ...
    Davis Allie
    iOS
  • Crea un'app iMessage in iOS 10

    In questo tutorial imparerai le basi della creazione di pacchetti di adesivi e applicazioni iMessage per dispositivi iOS 10. Questo ti fornirà il necessario ...
    Davis Allie
    SDK iOS
  • Novità di watchOS 3: Attività in background

    In questo tutorial imparerai le nuove API WatchKit in watchOS 3, che consentono alle tue app di Apple Watch di aggiornare facilmente i loro contenuti nel ...
    Davis Allie
    watchos
  • Introduzione al framework UserNotifications

    In questo tutorial, imparerai a conoscere il nuovo framework UserNotifications in iOS 10, tvOS 10 e watchOS 3. Questo nuovo framework fornisce un set moderno di ...
    Davis Allie
    iOS