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:
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
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.NotificationViewController
classe in modo che non debba essere fatto manualmente.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:
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.
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 UITableView
s e UIScrollView
s 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.
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
valoremediaPlayPauseButtonFrame
: a CGRect
valoremediaPlayPauseButtonTintColor
: a UIColor
valoremediaPlay
: chiamato quando l'interfaccia deve riprodurre i suoi mediamediaPause
: chiamato quando la tua interfaccia deve mettere in pausa i suoi mediaLa 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.
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!