La tua prima applicazione WatchKit interfaccia utente

La scorsa settimana, Apple ha annunciato la data di rilascio per Apple Watch. La società ha anche rilasciato Xcode 6.2, che include il supporto per Apple Watch. Con Xcode 6.2, hai tutto il necessario per creare la tua prima applicazione per Apple Watch.

Con la data di uscita di Apple Watch fissata per aprile, è tempo di imparare le corde dello sviluppo di Apple Watch. In questo tutorial, creerai la tua prima applicazione WatchKit. Lungo la strada, acquisirai familiarità con il funzionamento interno di un'applicazione WatchKit e scoprirai che ci sono molte somiglianze con lo sviluppo di iOS.

Prerequisiti

Poiché questo tutorial si concentra sullo sviluppo di Apple Watch, presumo che tu abbia già familiarità con le basi dello sviluppo di iOS. Se non sai quali azioni e punti vendita sono, ad esempio, ti consiglio di seguire il nostro corso introduttivo sullo sviluppo di iOS.

Per continuare, è necessario che Xcode 6.2 o versione successiva sia installato sul computer di sviluppo. Puoi scaricare Xcode da iOS Dev Center o Mac App Store. Come ho detto prima, Xcode 6.2 include il supporto per Apple Watch. Senza Xcode 6.2, non sarai in grado di seguire.

In questo tutorial userò Swift come linguaggio di programmazione. Se non hai familiarità con Swift, hai due opzioni. La tua prima opzione è attenersi a Objective-C. Puoi creare applicazioni Apple Watch sia con Swift che Objective-C, o una combinazione dei due. La tua seconda opzione è di fermarti qui e leggere le mie serie su Swift o guardare il corso di Derek Jensen sullo sviluppo di Swift.

1. Introduzione

Forse ti starai chiedendo quale sia la differenza tra un'applicazione Apple Watch e un'applicazione WatchKit. L'anno scorso, Apple ha annunciato che ci saranno due generazioni di applicazioni Apple Watch, applicazioni WatchKit e applicazioni native Apple Watch. Il termine nativo è un po 'fuorviante dal momento che le applicazioni WatchKit sono anche applicazioni native. La principale differenza è l'architettura dell'applicazione. Diamo prima un'occhiata alle applicazioni native.

Applicazioni native

Apple non ci ha ancora detto molto sulle applicazioni native. L'azienda ha annunciato solo che le applicazioni native arriveranno su Apple Watch nell'autunno di quest'anno. Non è chiaro come sarà l'SDK e quali saranno gli sviluppatori in grado di eseguire con un'applicazione nativa Apple Watch. In altre parole, non abbiamo altra scelta che concentrarci sulle applicazioni WatchKit per il momento.

Detto questo, sulla base delle informazioni di Apple, la differenza principale sarà che le applicazioni native potranno essere eseguite senza un'estensione in esecuzione su un iPhone associato. Da un punto di vista architettonico, l'applicazione nativa sarà simile alle applicazioni iOS native su iPhone e iPad.

Applicazioni WatchKit

Come suggerisce il nome, un'applicazione WatchKit si basa completamente sul framework WatchKit per fare il suo lavoro. Il framework WatchKit è una soluzione ingegnosa che colma il divario tra Apple Watch e un iPhone associato.

Mentre l'idea è semplice, l'implementazione è meno così. L'applicazione WatchKit funziona su Apple Watch ed è responsabile di due cose:

  • presentando l'interfaccia utente
  • rispondere all'interazione dell'utente

La logica di business e il sollevamento pesante sono curati da un'estensione Apple Watch in esecuzione su un iPhone associato. Il seguente diagramma visualizza il ruolo del framework WatchKit.

Tutti gli eventi attivati ​​dall'utente che interagisce con l'applicazione WatchKit vengono inoltrati all'estensione che viene eseguita sull'iPhone associato. Ciò implica che l'applicazione WatchKit è inutile senza un iPhone associato. Semplicemente non può fare il suo lavoro senza l'estensione in esecuzione su un iPhone.

2. Impostazione del progetto

Con questo in mente, è il momento di creare la tua prima applicazione WatchKit. L'applicazione che stiamo per creare mostrerà all'utente le condizioni meteorologiche di vari luoghi del pianeta. È l'equivalente dell'applicazione meteo su iOS.

Passaggio 1: Crea progetto

Avvia Xcode e seleziona Nuovo> Progetto ... dal File menu. Seleziona il Applicazione vista singola modello dalla lista di iOS> Applicazione modelli. Ci si potrebbe chiedere perché non stiamo creando un'applicazione WatchKit. Un'applicazione WatchKit fa sempre parte di un'applicazione iOS. Questo diventerà più chiaro una volta aggiunta l'applicazione WatchKit al progetto.

Dai un nome alla tua domanda Goccia di pioggia, impostato linguaggio veloce, e dispositivii phone. Assicurarsi Utilizza i dati principali è deselezionato.

Dillo a Xcode dove desideri salvare i file di progetto e premere Creare. Nota che abbiamo creato un progetto Xcode plain vanilla per un'applicazione iOS a vista singola. Se costruisci ed esegui il Goccia di pioggia target in iOS Simulator, vedrai una vista bianca. Questo è ciò che ci aspettiamo da un'applicazione iOS basata su Applicazione vista singola modello.

Prima di continuare, dai un'occhiata alla struttura del progetto nel Project Navigator e la lista degli obiettivi. Al momento abbiamo due obiettivi, Goccia di pioggia, per l'applicazione iOS e RainDropTests, per le prove del Goccia di pioggia bersaglio. Aggiungiamo un'applicazione di WatchKit al mix.

Passaggio 2: creazione di target WatchKit

Selezionare Nuovo> Target ... da Xcode's File menu e scegliere App WatchKit dal iOS> Apple Watch sezione a sinistra.

Ai fini di questo tutorial, deselezionare Includi la scena di notificaInclude Glance Scene. Non tratteremo le notifiche e gli sguardi in questo tutorial. Colpire finire in basso a destra per aggiungere l'applicazione WatchKit al tuo progetto Xcode.

Quando si fa clic finire, Xcode creerà un numero di file, gruppi e destinazioni. Xcode creerà anche uno schema per eseguire l'applicazione WatchKit in iOS Simulator e ti chiederà se dovrebbe attivare tale schema. Clic Attivare per attivarlo.

3. Anatomia del progetto

Aggiungendo un'applicazione WatchKit al nostro progetto, Xcode ha creato per noi due obiettivi, uno per l'estensione WatchKit, Estensione RainDrop WatchKit, e uno per l'applicazione WatchKit, RainDrop WatchKit App.

L'estensione WatchKit verrà eseguita su iPhone abbinato a Apple Watch. È responsabile della logica di business dell'applicazione WatchKit. L'applicazione WatchKit verrà eseguita su Apple Watch e sarà responsabile della presentazione dell'interfaccia utente e della gestione degli eventi.

Per mantenere tutto bello e ordinato, Xcode ha creato due gruppi per noi nel Project Navigator. Il primo gruppo, Estensione RainDrop WatchKit, contiene i file e le risorse di origine per l'estensione WatchKit. Il secondo gruppo, Goccia di pioggia App WatchKit, contiene le risorse per l'applicazione WatchKit.

L'architettura sottostante di un'applicazione WatchKit è evidente in base al contenuto di questi gruppi. Il Goccia di pioggia App WatchKit il gruppo, per esempio, non contiene alcun file sorgente. Include solo uno storyboard e risorse per l'interfaccia utente dell'applicazione WatchKit. Il Goccia di pioggia Estensione di WatchKit contiene un file sorgente, InterfaceController.swift, ma non include uno storyboard. Questo ha senso se si ricorda che l'estensione è responsabile della logica di business dell'applicazione WatchKit mentre l'applicazione WatchKit è responsabile dell'interfaccia utente.

Apple usa il termine applicazione per diversi concetti. È importante capire che un'applicazione WatchKit è costituita da due parti, un'estensione WatchKit in esecuzione su un iPhone associato e un'applicazione WatchKit in esecuzione su Apple Watch. Un'applicazione WatchKit non può fare il suo lavoro senza la sua estensione. Questa è la chiave per comprendere l'architettura di un'applicazione WatchKit.

4. Costruisci ed esegui

Prima di creare ed eseguire l'applicazione WatchKit, è utile capire cosa succederà quando colpisci Comando-R. Quando Xcode ha completato la creazione dell'applicazione iOS, l'estensione WatchKit e l'applicazione WatchKit, installerà l'applicazione iOS, l'estensione WatchKit e l'applicazione WatchKit su iOS Simulator. Quindi eseguirà l'estensione WatchKit e l'applicazione WatchKit in iOS Simulator.

Se non hai familiarità con le estensioni, potresti chiederti perché installa l'applicazione iOS su iOS Simulator. Un'estensione è sempre associata a un'applicazione iOS, quindi è necessaria l'applicazione iOS per l'esecuzione dell'estensione WatchKit. Sulla stessa falsariga, un'applicazione WatchKit può essere eseguita su un Apple Watch solo se la sua controparte, l'estensione WatchKit, è in esecuzione su un iPhone associato a Apple Watch. È un'architettura abbastanza complessa se sei abituato a sviluppare applicazioni iOS standalone.

Quando si preme Comando-R sulla tastiera o fai clic su Correre in alto a sinistra, Xcode creerà ed eseguirà la tua applicazione WatchKit in iOS Simulator. Se l'applicazione WatchKit non viene avviata, ricontrollare che si sta utilizzando lo schema corretto.

L'esecuzione dell'applicazione WatchKit non è molto spettacolare poiché si vede solo una schermata nera con l'ora corrente in alto a destra. Facciamo un po 'più interessante l'interfaccia utente della nostra applicazione WatchKit.

5. Creare l'interfaccia utente

Dal momento che stai leggendo questo tutorial, presumo che tu abbia familiarità con lo sviluppo di iOS. Come sapete, il moderno sviluppo di iOS coinvolge il layout automatico e gli storyboard. Questo è solo parzialmente vero per lo sviluppo di WatchKit. Abbiamo già scoperto che un'applicazione WatchKit utilizza uno storyboard per la sua interfaccia utente. Il layout automatico, tuttavia, è assente.

Aperto Interface.storyboard nel RainDrop WatchKit App gruppo per scoprire come creare un'interfaccia utente per la nostra applicazione WatchKit.

Lo storyboard contiene una singola scena, il Scena del controller di interfaccia. Nel Scene Navigator, a destra del Project Navigator, puoi vedere che il Scena del controller di interfaccia include un Controller di interfaccia e un'indicazione che questa scena è il principale punto di ingresso della nostra applicazione WatchKit.

Cos'è un controller di interfaccia?

Le due domande che probabilmente ti stai chiedendo sono "Che cos'è un controller di interfaccia?" e "In che cosa differisce da un controller di visualizzazione?" Un controller di interfaccia è un'istanza di WKInterfaceController classe o una sua sottoclasse. Il WKInterfaceController la classe è definita nel framework WatchKit.

Il nome di questa classe suggerisce le differenze con UIViewController. Come sapete, un controller di visualizzazione controlla una vista o una gerarchia di viste. Un controller di interfaccia, tuttavia, non controlla una vista, ma controlla un'interfaccia, cioè una schermata di contenuto. Ciò significa che diventerà più chiaro una volta che avremo implementato il controller dell'interfaccia.

Un controller di interfaccia è ancora un vero controller in quanto controlla il comportamento dell'interfaccia utente. Con un controller di interfaccia, è possibile configurare l'interfaccia utente dell'applicazione WatchKit e rispondere agli eventi che l'applicazione WatchKit inoltra all'estensione WatchKit. Come funziona, questo diventerà più chiaro più avanti in questo tutorial.

Creare un layout

Il sistema di layout che WatchKit ci offre è primitivo rispetto alla potenza e alla flessibilità di Auto Layout. Il sistema di layout ricorda il modo in cui le pagine Web sono strutturate con HTML e CSS.

Uno degli elementi costitutivi del sistema di layout WatchKit è il WKInterfaceGroup classe. Un'istanza di questa classe non è altro che un contenitore che può contenere altri elementi dell'interfaccia, come etichette, tabelle, ecc. È possibile confrontarlo con un

elemento su una pagina web. Fornisce struttura e determina il layout insieme ad altri gruppi del layout.

Dal Libreria di oggetti a destra, aggiungere due gruppi al controller dell'interfaccia, come mostrato di seguito.

Hai notato che i gruppi scattano automaticamente in posizione? Il sistema di layout si comporta in modo molto diverso dal layout automatico. Un altro dettaglio importante è che il contenitore del controller di interfaccia è anche un gruppo, non una vista. Ciò significa che hai aggiunto i gruppi a un altro gruppo. Questo va bene poiché i gruppi possono essere annidati, consentendo agli sviluppatori di creare layout abbastanza complessi per le loro applicazioni WatchKit.

Aggiunta di elementi di interfaccia

Aggiungi un'etichetta dal Libreria di oggetti al gruppo in alto e vedere cosa succede. La dimensione del gruppo diminuisce per adattarsi alla dimensione dell'etichetta. Lo schema di un gruppo vuoto non è altro che un segnaposto. Un gruppo aggiusterà sempre le sue dimensioni a quelle dei suoi contenuti.

Seleziona l'etichetta e apri il Identity Inspector sulla destra. Nota che l'etichetta che hai aggiunto è di tipo WKInterfaceLabel, non UILabel. Anche se le applicazioni WatchKit possono avere molti elementi dell'interfaccia utente simili a quelli trovati nelle applicazioni iOS, sono diversi. Il WKInterfaceLabel la classe, ad esempio, eredita da WKInterfaceObject invece di UIView e UIResponder.

Con l'etichetta selezionata, apri il Ispettore degli attributi sulla destra. Sotto Taglia, imposta la larghezza a Relativo al contenitore per renderlo largo quanto lo schermo dell'Apple Watch. Cambia il carattere in Titolo per farla risaltare un po 'di più e cambiare il testo dell'etichetta in Cupertino. Si noti che non è possibile modificare la famiglia di caratteri né è possibile regolare manualmente la dimensione del carattere.

Poiché la nostra applicazione WatchKit mostrerà le condizioni meteorologiche di vari luoghi del pianeta, abbiamo anche bisogno di aggiungere un'etichetta per la temperatura. Sarebbe anche bello sapere la data e l'ora locali del luogo.

Aggiungi una seconda etichetta al gruppo in alto trascinando un'etichetta nel Scene Navigator. Aspettare. Non è giusto. Hai aggiunto un'etichetta al gruppo corretto, ma non viene visualizzata nell'interfaccia.

Per impostazione predefinita, un gruppo ha un orizzontale disposizione. Puoi verificarlo aprendo il Ispettore degli attributi e ispezionando il suo disposizione proprietà. Ciò significa che gli elementi dell'interfaccia che contiene sono disposti orizzontalmente. L'etichetta della temperatura è presente nel gruppo, ma al momento non è visibile. Cambia il gruppo disposizione proprietà a Verticale per risolvere il problema.

Aggiungere un Data elemento di interfaccia per il secondo gruppo. Gli elementi dell'interfaccia della data sono istanze di WKInterfaceDate classe. Questo elemento di interfaccia contiene un'etichetta ed è perfetto per la visualizzazione e la formattazione delle date. Inizia cambiando la larghezza dell'elemento in Relativo al contenitore e l'allineamento del testo dell'etichetta a destra allineato.

Non c'è bisogno di usare il NSDateFormatter classe per formattare le date. Il WKInterfaceDate la classe gestisce la formattazione delle date per noi. Cambiare il Formato del WKInterfaceDate istanza a costume e impostare il formato su M / g, h: mm a. L'interfaccia utente dovrebbe ora apparire come questa.

Crea ed esegui l'applicazione WatchKit in iOS Simulator per vedere cosa abbiamo ottenuto finora. L'applicazione non è molto utile al momento poiché stiamo lavorando con contenuti statici. Lo risolveremo nel prossimo tutorial.

Conclusione

In questo tutorial abbiamo trattato le basi dello sviluppo di applicazioni WatchKit. Sono sicuro che sei d'accordo sul fatto che lo sviluppo di applicazioni WatchKit sia familiare ed estraneo. Siamo in grado di utilizzare gli strumenti a cui siamo abituati, ma ci sono alcune differenze chiave che richiedono tempo per adattarsi. Nella seconda parte di questo tutorial, ci concentreremo sull'estensione WatchKit per recuperare i dati meteo e visualizzare tali dati nell'applicazione WatchKit.