Share
Il framework WatchKit di Apple per lo sviluppo di applicazioni Apple Watch offre diversi modi, come sviluppatore, per presentare diversi tipi di interfacce agli utenti della tua app. Ciò include le interfacce di pagina, gerarchal e modali, che possono utilizzare tutti i contesti per creare contenuti dinamici.
In questo tutorial, ti mostrerò come impostare e manipolare ciascun tipo di interfaccia e in quali casi d'uso sono progettati per.
Questo tutorial richiede che tu stia utilizzando Xcode 6.2+ e ti trovi bene con la creazione di un'app di Apple Watch di base. In caso contrario, leggi alcuni degli altri tutorial di WatchKit su Tuts + e poi torna a questo. Dovrai anche scaricare il progetto iniziale da GitHub.
Il primo tipo di interfaccia che verrà implementato nell'app Apple Watch sarà basato su una pagina. Questi tipi di interfacce funzionano in modo molto simile alla schermata iniziale standard su un dispositivo iOS per mostrare più pagine di informazioni in un ordine prestabilito. Le interfacce basate su pagina sono le più adatte quando è necessario visualizzare più schermate di informazioni correlate tra loro.
Apri il progetto di avvio in Xcode e vai a Interface.storyboard. Lo storyboard contiene già sei controller di interfaccia come puoi vedere qui sotto.
Per creare un'interfaccia basata su pagina, è necessario creare un pagina successivarelazione continua tra i controller di interfaccia che si desidera collegare. premi il Controllo pulsante sulla tastiera e fare clic e trascinare da un controller di interfaccia a un altro. Controlla e trascina dal primo controller dell'interfaccia al secondo e, se fatto correttamente, a Relazione Segue dovrebbe apparire il pop-up. Da questo menu a comparsa, scegli il pagina successiva opzione come mostrato di seguito.
Seguire le stesse fasi per collegare il secondo controller dell'interfaccia al terzo. Lo storyboard dovrebbe ora mostrare i segui tra i primi tre controller di interfaccia. Tieni presente che l'ordine in cui vengono creati questi passaggi determina l'ordine in cui le interfacce appariranno nell'app WatchKit.
Crea ed esegui la tua app e apri un Apple Watch come display esterno in iOS Simulator. Vedrai che l'app visualizza il Prima pagina controller di interfaccia e ha tre punti in basso, che rappresentano le tre pagine disponibili. Puoi scorrere le tre pagine scorrendo verso sinistra o verso destra, proprio come faresti su un dispositivo iOS.
Quando si utilizza un'interfaccia basata su pagina, è possibile specificare quale controller di interfaccia si desidera visualizzare all'avvio. Questo viene fatto usando il becomeCurrentPage metodo. Aperto SecondPageInterfaceController.swift e aggiungi la seguente riga al awakeWithContext (_ :) metodo:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) self.becomeCurrentPage ()
Crea ed esegui nuovamente la tua app e vedrai che la seconda pagina viene ora presentata al momento del lancio.
In fase di runtime, è anche possibile specificare un ordine esplicito in cui mostrare le pagine dell'interfaccia. Questo viene fatto usando il reloadRootControllersWithNames (_: contesti :) metodo di classe.
Il primo parametro di questo metodo è un array di stringhe che contiene gli identificatori dello storyboard dei controller di interfaccia che si desidera caricare. L'ordine degli identificatori in questo array determina l'ordine di visualizzazione delle pagine.
Il secondo parametro è facoltativo ANYOBJECT Digita array che contiene i contesti per ciascuna pagina. Imparerai a conoscere i contesti più avanti in questo tutorial. Per ora, lascerai questo parametro come zero. Sostituisci la linea che hai appena aggiunto al tuo awakeWithContext (_ :) metodo con il seguente:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) WKInterfaceController.reloadRootControllersWithNames (["Terza pagina", "Prima pagina"], contesti: nil)
Crea ed esegui la tua app e vedrai che, una volta completato il caricamento, la tua app mostrerà la terza pagina seguita dalla prima pagina.
Oltre alle interfacce basate su pagina, puoi anche implementare interfacce gerarchiche in un'app Apple Watch. Parliamo di interfacce gerarchiche durante la transizione tra i controller di interfaccia che utilizzano a Spingere transizione.
Il comportamento di un'interfaccia gerarchica è simile a quello di UINavigationController classe in un'app per iOS. Questo tipo di interfaccia Apple Watch è più adatto per presentare più interfacce una dopo l'altra in modo lineare.
Rivisitare Interface.storyboard e trascina il Punto di ingresso principale freccia al Transition controller di interfaccia come mostrato di seguito. Questo farà apparire il controller dell'interfaccia specificato per primo quando viene lanciata l'app.
Avanti, aperto TransitionInterfaceController.swift e aggiungi la seguente riga nel pushButtonPressed metodo:
Accentsconagua
@IBAction func pushButtonPressed () self.pushControllerWithName ("Interfaccia gerarchica", contesto: nil)Simile al reloadRootControllersWithNames (_: contesti :) metodo che hai usato in precedenza, il primo parametro di pushControllerWithName (_: contesto :) è l'identificatore dello storyboard del controller dell'interfaccia che vuoi spingere. Il secondo parametro è il contesto per questo nuovo controller di interfaccia.
Crea ed esegui la tua app. Dovresti vedere la seguente interfaccia al termine del lancio dell'app WatchKit.
Toccando il gerarchica pulsante dovrebbe spingere l'interfaccia successiva sullo schermo come mostrato di seguito.
Noterai che ora c'è una piccola freccia nell'angolo in alto a sinistra dello schermo. Toccando la freccia si ritorna all'interfaccia precedente. È anche possibile inserire il controller dell'interfaccia corrente nel codice. Nel HierarchalInterfaceController classe, aggiorna il popButtonPressed metodo come segue:
@IBAction func popButtonPressed () self.popController ()
Crea ed esegui di nuovo la tua app. Toccando il Pop pulsante dovrebbe ora avere lo stesso effetto di premere la freccia indietro in alto a sinistra.
In alternativa, se si desidera tornare alla prima interfaccia della gerarchia, si invoca il comando popToRootController metodo piuttosto che il popController metodo. Per la tua app attuale, questi metodi producono entrambi lo stesso risultato in quanto al momento ci sono solo due interfacce nella gerarchia.
Le interfacce modali funzionano in modo simile alle interfacce gerarchiche. La principale differenza tra i due è che le interfacce modali sono progettate per visualizzare interfacce l'una sull'altra piuttosto che la transizione tra loro in modo lineare.
Torna a TransitionInterfaceController.swift e aggiungere la seguente riga di codice al modalButtonPressed metodo:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", context: nil)Per chiudere l'interfaccia modale, aggiorna il file dismissButtonPressed metodo come segue nel ModalInterfaceController:
@IBAction func dismissButtonPressed () self.dismissController ()
Crea ed esegui la tua app. Clicca il Modale pulsante per presentare un'interfaccia modale.
Un vantaggio delle interfacce modali è che è possibile presentare in modo modale un'interfaccia basata su pagina. Questo viene fatto usando il presentControllersWithNames (_: contesti :) metodo. Il primo parametro è un array di identificatori dello storyboard e il secondo parametro è un array di oggetti di contesto. Nel TransitionInterfaceController.swift, aggiornare l'implementazione del modalButtonPressed metodo come segue:
@IBAction func modalButtonPressed () self.presentControllerWithNames (["Modal Interface", "Hierarchal Interface"], contesti: nil)
Esegui la tua app e tocca il Modale pulsante. Un'interfaccia basata su pagina dovrebbe essere presentata in modo modico con le seguenti due interfacce:
Come avete visto finora dai vari metodi usati in questo tutorial, quando si passa a una nuova interfaccia è possibile passare in un contesto per configurare l'interfaccia che sta per essere presentata. Il contesto che si passa alla nuova interfaccia è facoltativo e può essere qualsiasi tipo di dati (ANYOBJECT?).
Ciò significa che è possibile passare qualsiasi tipo di dati tra le interfacce, da semplici numeri a complesse strutture di dati. Il contesto è passato alla nuova interfaccia in awakeWithContext (_ :) metodo. Il vantaggio di passare un contesto a un controller di interfaccia è configurarne il contenuto in modo dinamico, ovvero in fase di runtime.
Aperto TransitionInterfaceController.swift e aggiornare l'implementazione del modalButtonPressed metodo come segue:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", contesto: "Testo personalizzato")Nel ModalInterfaceController.swift, aggiornare l'implementazione del awakeWithContext (_ :) come segue:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) se let text = context as? String button.setTitle (testo)
Utilizziamo l'associazione facoltativa per verificare se il contesto fornito può essere inserito in a Stringa. Se è possibile, impostiamo il pulsanteil titolo di quel valore.
Crea ed esegui la tua app e apri l'interfaccia modale. Il titolo del pulsante dovrebbe essere cambiato in Testo personalizzato.
Se sei interessato a portare la tua istruzione WatchKit al livello successivo, puoi dare un'occhiata al nostro corso completo sullo sviluppo di WatchKit.
In questo tutorial, hai imparato come configurare e utilizzare i tre principali tipi di interfaccia disponibili per le applicazioni WatchKit, basate su pagina, gerarchico e modale. Hai anche imparato a utilizzare i contesti dell'interfaccia per configurare i controller di interfaccia in fase di runtime. Ora sai anche quando è meglio usare ognuno di questi tipi di interfaccia nelle tue applicazioni WatchKit. Puoi leggere di più sulla navigazione dell'interfaccia nella documentazione di Apple.
