Questo tutorial è stato aggiornato per funzionare correttamente con Xcode 7 e Swift 2.0!

Apple Watch Simple Table View Apple Watch

In questo tutorial voglio farti vedere come creare un’app con TableView per watchOS con il linguaggio Swift 2.0. L’applicazione che creerai mostrerà gli elementi di una lista della spesa (sono fissato con le spese :D).

Le Table View sono importantissime e quasi ogni applicazione, che sia per iPhone, iPad o Apple Watch, ne possiede una. Le Table View sono letteralmente delle tabelle dove è possibile mostrare a schermo delle informazioni in maniera ordinata. Ogni Row (Riga) di una Table View contiene una Cell (Cella) e quest’ultima a sua volta è delegata a mostrare l’informazione.

 

Rispetto al tutorial precedente, dove hai visto come creare un semplice Hello World per Apple Watch con il linguaggio Swift, qui andremo leggermente oltre ed analizzerai un altro degli oggetti più in uno delle applicazioni watchOS, le  WKInterfaceTable.

Prima di proseguire, per poter creare applicazione per Apple Watch devi possedere la versione 7 di Xcode. In genere, chi passa alla creazione di applicazione per watchOS, conosce come creare le equivalenti applicazioni per iOS. Nel caso volessi interessarti allo sviluppo di applicazioni per iOS, ho scritto un corso ad hoc che ti guiderà dalle basi fino allo sviluppo completo.

Premesse fatte, sei pronto a cominciare quest’avventura nel fantastico mondo dello sviluppo applicazioni per watchOS 2 con Swift?

Apri Xcode 7. Seleziona Create a new Xcode Project (File\New\Project…), poi watchOS e successivamente iOS App with WatchKit App:

Creare un'app con TableView per WatchOS

Perché iOS se devo creare una applicazione per Apple Watch? L’unico modo per creare un’app per Apple Watch è quella di associarla ad una applicazione per iPhone.

Assegna un nome alla tua applicazione e assicurati di aver selezionato Swift come linguaggio di programmazione. Deseleziona “Include Notification Scene”, perché in questo tutorial non verrà utilizzato. Premi Next e poi Create.

Avendo selezionato iOS App with WatchKit App, Xcode ha già creato un sotto progetto che conterrà tutti i file per il Run & Build dell’applicazione per l’Apple Watch.

TableView per watchOS con linguaggio Swift

Aggiungere una Table View ad una applicazione Apple Watch è l’equivalente di quanto accade per gli altri dispositivi.

Spostati nella cartella dell’Apple Watchapri lo Storyboard (Interface.Storyboard), dall’Object Library seleziona una Table e trascinala all’interno della View dell’Apple Watch:

aggiungere una Table View ad una applicazione Apple Watch

Da notare che una Table View per Apple Watch è composta da 2 componenti:

  1. Table: Il contenitore delle Row, infatti è possibile modificare il numero di Row e il colore delle Row dall’Attributes Inspector.
  2. Il Table Row Controller: Il gestore del contenuto delle righe.

Il Table Row Controller non va confuso con la Custom Cell di una Table View per iOS. Una Custom Cell per una Table View Apple Watch si crea andando a modificare il campo Group contenuto all’interno del Table Row Controller.

Table Row Controller applicazione Watch App

Per creare una Custom Cell, seleziona il Group del Table Row Controller. Ti si illuminerà di azzurro il contorno della Row:

Group e Custom Cell Table View Apple Watch

Dall’Attributes Inspector è possibile modificare l’aspetto della Row. Fai delle prove cambiando il Colore di sfondo o il Radius (la curvatura dei bordi):

custom cell Apple Watch

Adesso trascina una Label all’interno del Group. Sicuramente la vedrai spostata verso sinistra e non tutta visibile.

Questo accade perché nell’Apple Watch non è abilitata la possibilità di spostare gli elementi grafici a tuo piacimento, e l’unico modo per farlo è quello di modificarne gli attributi di posizione. Per risolvere il problema, seleziona la Label, spostati nell’Attributes Inspector e modifica la Position Horizontal selezionando Center:

label in Table View iWATCH

Alla stessa maniera seleziona una Image e trascinala all’interno del Group. Come piccolo compito per casa ti do da modificarne gli attributi di posizione in modo da ottenere il seguente layout:

layout custom cell Table View Apple Watch

Ps. Se non ci sei riuscito, scrivi un commento o scarica il progetto che trovi a fine tutorial.

Custom TableRowController

Dato che hai creato una Custom Cell hai bisogno di una Classe apposita per la gestione degli elementi al suo interno. A discapito di quanto puoi pensare, la classe per la gestione della Custom Cell è figlia della NSObject.

Quindi, crea un nuovo File, seleziona la cartella WatchKit Extension, fai tasto destro e New File. Seleziona iOS, Swift File, chiamalo TableRowController e assicurati di crearlo all’interno della cartella Extension:

new swift file in Apple Watch

Adesso apri il nuovo File (TableRowController.swift), cancella quello che c’è dentro e aggiungi il seguente codice:

import WatchKit

class TableRowController : NSObject {
    
    
}

Ritorna nello storyboard dell’Apple Watch. Seleziona il Table Row Controller, spostati nell’Identity Inspector ed inserisci come Class la TableRowController:

table row controller interface storyboard

Poi assegna un Identifier in modo che dal codice ti potrai riferire al Table Row Controller in questione:

Identifier table row controller

L’ultimo passaggio da fare è collegare gli elementi grafici della custom cell al codice.

Per poter creare una Interface Builder Outlet (connessione interfaccia-codice), apri l’Assistant Editor, poi seleziona la Label e premendo CTRL+Click Sinistro trascina la freccia verso l’interno della classe TableRowController.

IBOutlet interfaccia Apple Watch

[mailmunch-form id=”101287″]

Il codice per riempire la tabella watchOS con Swift

Dato che non esiste l’equivalente del Table View Controller che hai su iOS, la visualizzazione e la gestione della Table nell’Apple Watch è delegata all’Interface Controller.

Seleziona la Table e crea una connessione con l’Interface Controller chiamata listaTable:

inserire una connessione Interface Controller

Dato che le immagini rappresenteranno gli alimenti della lista della spesa sono degli alimenti, ho creato una cartella contente 3 immagini che puoi scaricare e aggiungere al tuo progetto:

[wpdm_package id=’1733′]

Una volta scaricate le immagini, trascina l’intera cartella all’interno della Cartella WatchKit Extension dove si trova anche l’InterfaceController.swift.

Crea un array con nomi uguali a quelli delle immagini in modo da rendere più semplice la scrittura del codice:

var alimenti = ["pasta", "juice", "meat"]

Aggiungi la seguente funzione:

    private func loadTable() {
        listaTable.setNumberOfRows(alimenti.count, withRowType: "TableRowController")
        for (index, alimento) in alimenti.enumerate() {
            let row = listaTable.rowControllerAtIndex(index) as! TableRowController
        
            row.labelText.setText(alimento)
            row.image.setImage(UIImage(named: alimento))
            
        }
    }
  • con il setNumerOfRow ho impostato il numero di righe uguale a quello degli elementi presenti nell’array alimenti. In più la funzione imposta alla Row un Controller specifico, il TableRowController, che hai creato poco fa.
  • Un ciclo provvedere a scorrere gli elementi della lista e nel frattempo riempie sia l’immagine che il text della label con il nome dell’alimento e la relativa immagine.
  • Il rowControllerAtIndex(index) non fa altro che restituire il riferimento alla riga di indice Index (la variabile del ciclo).

Infine, modifica il metodo willActivate in questo modo, per far si che la Table View venga visualizzata all’apertura dell’app:

	override func willActivate() {
		super.willActivate()
		
		loadTable()
	}

Considerazioni e Download del progetto

Adesso avvia l’applicazione, seguendo lo stesso procedimento del precedente tutorial, dovresti vedere la tabella visualizzarsi. Se hai avuto problemi con la realizzazione del tuo progetto, scarica quello fatto da me:

[sociallocker][wpdm_package id=’1736′][/sociallocker]

Buona Programmazione!