Comprensione del sistema di layout WatchKit

etichetta. Puoi pensare a un gruppo come contenitore per altri elementi dell'interfaccia. Un gruppo ha molte proprietà che è possibile personalizzare direttamente in Interface Builder.

Passaggio 1: definire il layout della tua app

È importante pianificare il layout in dettaglio prima di iniziare lo sviluppo. Ciò ti farà risparmiare ore e ore di mal di testa se, ad un certo punto, ti rendi conto che la funzione davvero interessante che volevi costruire non è possibile o non è buona su un dispositivo fisico. Assicurati di aver letto le linee guida per l'interfaccia umana di Apple Watch.

Per questo esempio, insegnerò come creare un layout per un'app dell'hotel in cui è possibile trovare hotel vicino alla posizione corrente. Disegno lo schermo che mostrerà i dettagli per un particolare hotel. Come ho detto nell'introduzione, non scriverò alcun codice. Invece mi concentrerò sulla comprensione del meccanismo del nuovo sistema di layout.

Tralasciando le mie capacità di disegno, questo è quello che ho in mente per il mio layout. Il nome dell'hotel sarà nella parte superiore dello schermo e sotto sarà alcuni icone stelle mostrando la valutazione dell'hotel. Quindi voglio aggiungere un Immagine insieme al suo indirizzo e due pulsanti.

Passaggio 2: aggiunta di un gruppo

Il nostro controller di interfaccia è vuoto al momento e non esiste un gruppo base. Per aggiungere nuovi elementi, trascinali e rilasciali dal Libreria di oggetti a destra nel Controller di interfaccia. Il Scene Navigator a sinistra è utile per verificare se gli elementi sono posizionati correttamente. La prima cosa da fare è aggiungere un gruppo, che ci permetterà di scorrere verticalmente se il contenuto non si adatta allo schermo. Trascina un gruppo dal Libreria di oggetti e rilasciarlo nel Controller di interfaccia come mostrato di seguito.

Ora che hai un gruppo nel tuo controller di interfaccia, puoi vedere i suoi attributi nel Ispettore degli attributi sulla destra. Diamo un'occhiata ad alcuni di essi in modo più dettagliato.

• Disposizione: Il layout determina se gli elementi del gruppo sono disposti orizzontalmente o verticalmente. Quando aggiungi un elemento, verrà posizionato accanto o al di sotto del precedente.
• inserti: Questo attributo determina il margine superiore, inferiore, sinistro e destro per il gruppo.
• Spaziatura: Come suggerisce il nome, determina la spaziatura tra gli elementi all'interno del gruppo.
• Sfondo: È possibile impostare un'immagine come sfondo del gruppo e animarla nominando le immagini in sequenza.
• Posizione: L'attributo position determina la posizione orizzontale (sinistra, centro, destra) e verticale (superiore, centrale, inferiore) del gruppo.
• Taglia: L'attributo size determina la larghezza e l'altezza dell'elemento. Ci sono tre valori, Dimensione per soddisfare il contenuto (regolato automaticamente in base al contenuto), Relativo al contenitore (prende la dimensione del contenitore e la moltiplica per il valore definito), Fisso (valore costante).

Tieni presente che Apple Watch è disponibile in due dimensioni. Dovresti utilizzare lo stesso layout in entrambi i casi, ma potresti riscontrare alcune piccole differenze. Facendo clic sull'icona più a sinistra di un attributo, puoi impostare un attributo che verrà applicato solo quando l'app viene eseguita sul dispositivo specificato.

Continuiamo a costruire il nostro layout. Cambiare il Layout di gruppo a Verticale in modo che il contenuto scorrerà verticalmente quando aggiungo più elementi. Impostare il Orizzontale posizione a Centro in modo che il contenuto sarà centrato. Infine, imposta il Larghezza attribuire a Larghezza relativa al contenitore con il moltiplicatore impostato su 1. Questo espanderà il gruppo per riempire l'intera larghezza dello schermo.

Passaggio 3: aggiunta di un'etichetta

Ora che abbiamo impostato le proprietà principali per il nostro gruppo di contenitori, aggiungiamo un'etichetta al gruppo. Dal Libreria di oggetti, aggiungi un'etichetta al gruppo che hai aggiunto un momento fa. Se selezioni l'etichetta, vedrai come la sua larghezza non occupa tutto lo spazio disponibile. Risolviamo questo modificando l'attributo width su Relativo al contenitore. Per centrare l'etichetta, cambia il Orizzontale attribuire a Centro e impostare Allineamento del testo a Centro.

Cosa succede se il nome dell'hotel è troppo lungo? Voglio che si espanda e cresca verticalmente. Per fare ciò, cambia il Linee attributodell'etichetta a 0. Ciò significa che il nome dell'hotel si estenderà su più righe se necessario. Cambia il testo dell'etichetta per vedere il risultato da solo. Il risultato dovrebbe essere simile allo screenshot qui sotto.

Passaggio 4: aggiunta di stelle

Vogliamo anche mostrare la valutazione dell'hotel. L'idea è di avere un gruppo appena sotto il nome dell'hotel con il numero di stelle dell'hotel. Aggiungi un altro gruppo al gruppo che già abbiamo. In altre parole, il nuovo gruppo è annidato all'interno del primo gruppo. 

Voglio che le cinque stelle siano sulla stessa linea e centrate. Come accennato in precedenza, non posso aggiungere o rimuovere oggetti in fase di esecuzione, ma posso nascondere e mostrare oggetti. Aggiungerò cinque immagini al gruppo. Se l'hotel ha meno stelle, le nasconderò in fase di esecuzione.

Trascina cinque immagini nel gruppo nidificato e imposta la larghezza di ogni stella su Relativo al contenitore. Cambia il moltiplicatore da 1 a 0.2. La ragione per cui scegliere 0.2 come il moltiplicatore è semplice. Se voglio che cinque immagini si adattino allo spazio disponibile sulla stessa linea, voglio che ciascuna immagine sia pari al 20% della larghezza del gruppo. Cambiare il Orizzontale posizione a Centro in modo che siano sempre centrati, non importa quante stelle ci sono.

Quindi, assegniamo un'immagine interessante a ciascuna immagine. Puoi trovare le immagini che uso nei file sorgente di questo tutorial. Impostare il Immagine attribuire a star.png e cambiare la modalità a Vestibilità per garantire che le proporzioni siano rispettate.

Il risultato dovrebbe essere simile all'immagine animata qui sotto. Puoi anche provare a controllare il Nascosto proprietà di una delle immagini nel Ispettore degli attributi e vedi come le stelle sono sempre centrate.

Passaggio 5: aggiunta dell'immagine dell'hotel

Inizia scaricando l'immagine di esempio di un hotel da immagini gratuite. Voglio aggiungere un'immagine dell'hotel per mostrare all'utente come appare l'hotel. Aggiungi una nuova immagine dal Libreria di oggetti come hai appena fatto prima per le stelle. Cambiare il Immagine attribuire all'immagine che hai scaricato e impostare il Modalità a Vestibilità.

Cambiare il Orizzontale posizione a Centro e il Larghezza a Relativo al contenitore. Assicurati sempre di aggiungere l'immagine come elemento nidificato del gruppo principale controllando la gerarchia dei livelli nel file Scene Navigator sulla sinistra. Impostato Altezza essere Dimensione per soddisfare il contenuto per ridimensionare automaticamente l'immagine in base alle dimensioni dell'immagine.

Passaggio 6: aggiunta dell'indirizzo

Sotto l'immagine, vorrei aggiungere un'etichetta di indirizzo. Potremmo anche aggiungere una mappa, ma usiamo un'etichetta per questo esempio. Trascina un'etichetta dal Libreria di oggetti e posizionarlo sotto l'immagine dell'hotel. Impostato Linee a 0 e Larghezza a Relativo al contenitore. Cambia il testo in modo che sia un indirizzo casuale a tua scelta.

Come avrai notato, il controller dell'interfaccia è ora più alto. Si ridimensiona automaticamente nello storyboard in modo da poterne vedere il contenuto.

Passaggio 7: aggiunta di pulsanti

Il controller dell'interfaccia dovrebbe avere due pulsanti nella parte inferiore. Voglio che i pulsanti siano la metà della larghezza dello schermo e posizionati fianco a fianco. Poiché il nostro gruppo principale ha un layout verticale, dobbiamo aggiungere un gruppo nidificato in modo che i pulsanti siano posizionati orizzontalmente anziché verticalmente.

Aggiungi un nuovo gruppo come mostrato di seguito e aggiungi due pulsanti. Imposta loro Larghezza attribuire a Relativo al contenitore e impostare il moltiplicatore su 0.5. Impostare il Verticale posizione dei due pulsanti su Centro per centrarli verticalmente.

Imposta il testo del primo pulsante su "Da $ 99" e il colore di sfondo per un bel rosso. Imposta il testo del secondo pulsante su "Visualizza altro" e il colore di sfondo al blu. Il controller dell'interfaccia dovrebbe ora assomigliare a questo:

Assicurati di aver selezionato lo schema corretto e premi Comando-R per eseguire l'applicazione WatchKit.

Quando si apre il simulatore iOS, c'è ancora una cosa che devi fare. Seleziona il simulatore iOS e scegli Hardware> Display esterni> Apple Watch 42 mm. Apple Watch Simulator verrà visualizzato accanto al tuo iPhone Simulator. Ora puoi vedere il tuo layout di lavoro in azione. Guarda il risultato nel video qui sotto.

Conclusione

In questo tutorial, ti ho mostrato le principali caratteristiche e concetti per creare layout complessi in WatchKit. Abbiamo esplorato l'aggiunta e il posizionamento di elementi dell'interfaccia utente e alcune best practice. Ora sei in grado di trasformare le tue idee di app di Apple Watch in realtà. Spero che questo tutorial ti sia piaciuto.