Share
In questo tutorial, imparerai come sfruttare le nuove API e funzionalità di watchOS 2 per creare un'applicazione Apple Watch nativa. Ciò include elementi dell'interfaccia di selezione, animazioni native e controller di avviso.
Al WWDC 2015, Apple ha annunciato il primo importante aggiornamento della sua piattaforma Apple Watch, watchOS 2. Oltre a molte nuove funzionalità e miglioramenti, l'aspetto più importante di questo aggiornamento per gli sviluppatori è la possibilità di creare app native di Apple Watch. Queste app native offrono prestazioni migliori e offrono agli sviluppatori l'accesso a nuove funzionalità, tra cui la corona digitale, il microfono e i sensori di integrità.
In questo tutorial, ti mostrerò come creare un'applicazione WatchKit nativa e brevemente delineare alcune delle nuove API disponibili in watchOS 2. Ti mostrerò anche come aggiornare un'app watchOS 1 non nativa esistente a un'applicazione watchOS 2 nativa.
Questo tutorial richiede che tu stia utilizzando Xcode 7 su un Mac con OS X Yosemite (10.10) o successivo. Questo tutorial si basa sui concetti e sulle API WatchKit disponibili in watchOS 1. Se non sei ancora a tuo agio con il framework WatchKit, inizia con uno dei nostri tutorial introduttivi su WatchKit.
Apri Xcode e crea un nuovo progetto. In Xcode 7, la nuova procedura guidata del progetto include a watchos sezione a sinistra. Scegli il App iOS con l'app WatchKit modello dal watchOS> Applicazione sezione. Clic Il prossimo continuare.
Compila le informazioni come mostrato nello screenshot qui sotto. Deseleziona le caselle di controllo in fondo, perché non avremo bisogno di quelle per questo tutorial.
Completa la configurazione del progetto e dai un'occhiata alle cartelle che Xcode ha creato per noi. Dovresti vedere tre gruppi o cartelle nel Project Navigator sulla sinistra:
Prima di poter aggiungere qualcosa, dobbiamo configurare Xcode per creare ed eseguire il target corretto. Nella parte in alto a sinistra della finestra Xcode, accanto al pulsante di interruzione in grigio, fai clic sullo schema attivo, dimostrazione, e scegli la seguente opzione:
Fai clic sul pulsante di riproduzione per creare ed eseguire la tua app. Nel dock, dovresti vedere apparire due icone del simulatore. Uno di questi è il normale iOS Simulator mentre l'altro è l'Apple Watch Simulator.
Se la schermata vuota della tua app Apple Watch non viene visualizzata automaticamente su Apple Watch Simulator, quindi completare i seguenti passaggi:
1. Passare a orologio Apple app su iOS Simulator. Puoi trovare l'app Apple Watch nella seconda schermata della schermata principale.
2. Fai clic sulla democella di visualizzazione tabella come mostrato di seguito.
3. Abilitare il Mostra app su Apple Watch cambia come mostrato di seguito.
4. In Apple Watch Simulator, accedere alla schermata principale premendo Command + Shift + H o scegliendo Casa dal Hardware menu di Apple Watch Simulator.
Se questo non funziona immediatamente, attiva e disattiva lo switch su iOS Simulator. Potrebbe anche aiutare a uscire da Xcode ed eseguire nuovamente l'app WatchKit.
Se tutto funziona correttamente, fai clic sull'icona dell'app Apple Watch in Apple Watch Simulator. Dovresti vedere uno schermo nero con l'ora visualizzata in alto a destra.
È ora di iniziare ad utilizzare alcune delle nuove API introdotte in watchOS 2. In Xcode, apri Interface.storyboard nel App Demo WatchKit cartella e aggiungere i seguenti componenti al Scena del controller di interfaccia:
Seleziona il cursore e impostane Massimo e passi proprietà a 5 nel Ispettore degli attributi.
Fai doppio clic sul pulsante e cambia il suo titolo in "Mostra avviso". Apri il Assistente editore in modo da avere lo storyboard sulla sinistra e il contenuto di InterfaceController.swift sulla destra. Crea una presa per il cursore controllando il trascinamento dal cursore nello storyboard al InterfaceController classe. Dai un nome alla presa cursore. Fai lo stesso per il raccoglitore e dai il nome alla presa picker.
Controllo-trascinamento dal pulsante a InterfaceController sulla destra per creare un'azione. Dai un nome all'azione showAlertPressed. Questa azione verrà eseguita quando l'utente tocca il pulsante.
Chiudi il Assistente editore a destra e aperto InterfaceController.swift nell'editor di codice di Xcode.
Il cursore e il pulsante che hai aggiunto al InterfaceController la classe dovrebbe essere familiare se hai lavorato con il framework WatchKit. Il selettore, tuttavia, è uno dei nuovi elementi dell'interfaccia disponibili in watchOS 2.
Un raccoglitore per Apple Watch è rappresentato dal WKInterfacePicker classe. Funziona in modo simile alla sua controparte iOS, UIPickerView. Gli utenti interagiscono con a WKInterfacePicker istanza toccandolo, scorrendo WKPickerItem oggetti con la corona digitale, quindi toccando di nuovo per selezionare un oggetto. UN WKInterfacePicker può mostrare elementi in uno dei tre diversi stili:
Accentsconagua
WKInterfacePicker stile che supporta elementi basati su testo e può mostrare più elementi contemporaneamente.Per questo tutorial, creerai un semplice selettore di stili di elenco con elementi basati su testo. Aggiungere il seguente codice a awakeWithContext (_ :) metodo del InterfaceController classe:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) var pickerItems: [WKPickerItem] = [] per i in 1 ... 10 let item = WKPickerItem () item.title = "Oggetto picker \ (i)" pickerItems.append (item) self.picker.setItems (pickerItems)
Crea ed esegui la tua app. Vedrai che i primi tre oggetti di selezione sono visibili.
Per interagire con l'elemento dell'interfaccia di selezione, fai clic una volta e quindi scorri il mouse o il trackpad del Mac come faresti normalmente. Questo simulerà la corona digitale dell'orologio. Sarai quindi in grado di scorrere gli oggetti del raccoglitore.
Insieme ai nuovi elementi dell'interfaccia e ai nuovi modi in cui gli utenti interagiscono con le app di Apple Watch, watchOS 2 supporta le animazioni native per gli oggetti di interfaccia WatchKit. I seguenti attributi degli elementi dell'interfaccia sono animabili nelle app watchOS 2:
L'animazione è fatta attraverso un singolo WKInterfaceController metodo di istanza, animateWithDuration (_: animazioni :). Come semplice esempio, si animerà il cursore facendolo svanire e ridursi verso la parte superiore dello schermo. Aggiungi il seguente codice al willActivate metodo del InterfaceController classe:
override func willActivate () super.willActivate () self.animateWithDuration (5) () -> Void in self.slider.setHeight (0) self.slider.setAlpha (0)
Crea ed esegui la tua app e, una volta che la tua app ha terminato il lancio, dovresti vedere il cursore che si riduce lentamente e si dissolve.
Nella chiusura dell'animazione, puoi animare qualsiasi proprietà elencata sopra. Questo vale per qualsiasi elemento dell'interfaccia nella tua app. Ciò consente un ulteriore livello di personalizzazione nell'interfaccia della tua app e offre anche un modo molto più semplice di nascondere e mostrare elementi.
watchOS 2 consente inoltre alle app di presentare un'interfaccia di avviso molto simile a quella di a UIAlertView o UIAlertController su iOS. Questi avvisi vengono visualizzati chiamando il presentAlertControllerWithTitle (_: messaggio: preferredStyle: azioni :) metodo su a WKInterfaceController esempio.
I parametri del titolo e del messaggio di questo metodo sono stringhe da visualizzare nell'interfaccia dell'avviso. Il terzo parametro è a WKAlertControllerStyle enum:
Mettere in guardia visualizza un foglio di avviso con pulsanti impilati e un valore predefinito Annulla pulsante in basso.SideBySideButtonsAlert visualizza due pulsanti affiancati.ActionSheet visualizza uno o due pulsanti personalizzati con a Annulla pulsante nell'angolo in alto a sinistra.Il quarto parametro è un array di WKAlertAction oggetti, che forniscono dettagli per i pulsanti di avviso. Questo array deve contenere almeno un oggetto e per SideBySideButtonsAlert deve contenere due.
UN WKAlertAction l'oggetto è creato con un titolo, uno stile (WKAlertActionStyle.Default, WKAlertActionStyle.Cancel, o WKAlertActionStyle.Destructive) e un blocco da eseguire quando viene selezionata quell'azione. Aggiungi il seguente codice ai pulsanti showAlertPressed azione:
@IBAction func showAlertPressed () let cancel = WKAlertAction (titolo: "Annulla", stile: WKAlertActionStyle.Cancel, handler: () -> Void in) let action = WKAlertAction (titolo: "Action", stile: WKAlertActionStyle. Default, gestore: () -> Void in) self.presentAlertControllerWithTitle ("Alert", messaggio: "Esempio di interfaccia di avviso watchOS 2", preferredStyle: WKAlertControllerStyle.SideBySideButtonsAlert, azioni: [cancel, action])Crea ed esegui la tua app. Quando si preme il Mostra avviso pulsante, vedrai un'interfaccia di avviso animare e visualizzare le due azioni che hai creato.
Quando apri un progetto Xcode esistente con un'app WatchKit in Xcode 7, verrà visualizzato il seguente avviso Issue navigator sulla sinistra:
Facendo clic sull'avviso verrà visualizzato un elenco delle impostazioni che devono essere modificate nella tua applicazione per passare da un'app WatchKit esistente a quella di watchOS 2. In basso, vedrai il seguente elemento:
Se clicchi Esegui le modifiche, Xcode aggiornerà la tua app WatchKit esistente per te. Una volta completato l'aggiornamento, sei pronto per creare, testare e spedire un'app nativa per watchOS 2.
Le nuove API e funzionalità che hai imparato in questo tutorial sono solo la punta dell'iceberg. Elementi dell'interfaccia di selezione, controller di avviso e animazioni native sono solo alcune delle nuove funzionalità che puoi sfruttare nelle tue app di Apple Watch su watchOS 2.
Nei prossimi mesi pubblicheremo molti altri tutorial su Tuts +, che coprirà le nuove funzionalità e le API disponibili su watchOS 2. Assicurati di cercarle e sentiti libero di lasciare commenti o domande nei commenti qui sotto.
