Come posso creare un layout complesso per le app di Apple Watch?

Poiché le dimensioni dello schermo di Apple Watch sono ridotte, oggetti come etichette, immagini o cursori all'interno di un'app sono posti uno di seguito all'altro. Mentre questa limitazione significa che non puoi posizionare oggetti nella posizione esatta che desideri, è ancora possibile creare un layout complesso per l'app Watch. Continua a leggere per scoprire come.

Prima di iniziare questo tutorial, assicurati di creare un nuovo progetto Xcode e aggiungi il target Apple Watch a esso. Puoi trovare le istruzioni per questa attività qui.

Per creare un layout complesso per un'app, utilizzeremo un oggetto di gruppo. Un oggetto di gruppo può contenere altri oggetti ed è possibile posizionarli verticalmente o orizzontalmente.

1. Apri il Interface.storyboard file all'interno della destinazione dell'app WatchKit. Nel Libreria di oggetti, Cercare Gruppoe trascina l'oggetto nello storyboard vuoto.

Inizialmente, il nuovo gruppo sarà vuoto. Prima di aggiungere altri elementi al gruppo, diamo un'occhiata agli attributi disponibili in Utilità pannello.

2. Un attributo notevole per il gruppo è suo disposizione. Per impostazione predefinita, è impostato su Orizzontale, il che significa che gli oggetti all'interno del gruppo saranno posizionati uno accanto all'altro. Puoi cambiarlo in Verticale se vuoi.

3. Ora è il momento di aggiungere alcuni oggetti al gruppo. In questo esempio, ho aggiunto due etichette al gruppo e le ho posizionate verticalmente. Puoi dire che i due elementi sono all'interno del gruppo guardando il Struttura del documento.

4. Un problema comune quando si utilizza il layout Orizzontale in un gruppo è che potrebbe esserci spazio vuoto in quel gruppo perché non c'è alcun oggetto che occupa lo spazio. La soluzione per questo è selezionare l'oggetto, trovare l'attributo Larghezza nella sezione Dimensione, cambiarlo in Relativo a Contenitore e impostare la dimensione desiderata.

Il la dimensione del contenitore (gruppo) è sempre 1, quindi un valore di 0.5 renderà la larghezza dell'oggetto selezionato la metà delle dimensioni del gruppo. In questo esempio, ho due etichette. Pertanto, una larghezza di 0,5 per ogni etichetta li farà coprire l'intero gruppo.

A seconda di quanti elementi hai all'interno di un gruppo, potresti voler impostare una dimensione diversa.

5. È possibile creare gruppi nidificati come nell'esempio qui sotto. Quando si desidera nidificare un gruppo, trascinarlo sotto il gruppo desiderato nella struttura del documento. Come puoi vedere, è possibile creare un layout complesso per l'app anche con la limitazione dell'SDK. Tuttavia, poiché lo schermo dell'orologio è piccolo, non è consigliabile creare un layout troppo complesso perché gli utenti potrebbero trovare difficile utilizzare l'app.