Introduzione agli storyboard in Xamarin.Mac
Questo articolo offre un'introduzione all'uso degli storyboard in un'app Xamarin.Mac. Viene descritto come creare e gestire l'interfaccia utente dell'app usando gli storyboard e Interface Builder di Xcode.
Gli storyboard consentono di sviluppare un'interfaccia utente per l'app Xamarin.Mac che non include solo le definizioni e i controlli delle finestre, ma contiene anche i collegamenti tra finestre diverse (tramite segue) e stati di visualizzazione.
Questo articolo fornisce un'introduzione all'uso di Storyboard per definire l'interfaccia utente di un'app Xamarin.Mac.
Che cosa sono gli Storyboard?
Usando storyboard, l'interfaccia utente di un'app Xamarin.Mac può essere definita in un'unica posizione con tutti gli spostamenti tra i singoli elementi e le interfacce utente. Gli storyboard per Xamarin.Mac funzionano in modo molto simile agli storyboard per Xamarin.iOS. Tuttavia, contengono un set diverso di tipi Segue a causa dei diversi idiomi di interfaccia.
Uso delle scene
Come indicato in precedenza, uno Storyboard definisce tutta l'interfaccia utente per una determinata app suddivisa in una panoramica funzionale dei controller di visualizzazione. In Interface Builder di Xcode ognuno di questi controller si trova nella propria scena.
Ogni scena rappresenta una determinata coppia di visualizzazioni e controller di visualizzazione con un set di righe (denominate Segues) che connettono ogni scena nell'interfaccia utente, mostrando così le relative relazioni. Alcuni segue definiscono il modo in cui un controller di visualizzazione contiene una o più visualizzazioni figlio o controller di visualizzazione. Altre segues, definiscono le transizioni tra il controller di visualizzazione, ad esempio la visualizzazione di un popover o una finestra di dialogo.
La cosa più importante da notare è che ogni Segue rappresenta il flusso di alcuni dati tra l'elemento specificato dell'interfaccia utente dell'app.
Uso dei controller di visualizzazione
I controller di visualizzazione definiscono le relazioni tra una determinata visualizzazione delle informazioni all'interno di un'app Mac e il modello di dati che fornisce tali informazioni. Ogni scena di primo livello nello Storyboard rappresenta un controller di visualizzazione nel codice dell'app Xamarin.Mac.
In questo modo, ogni controller di visualizzazione è un'associazione autonoma riutilizzabile sia della rappresentazione visiva delle informazioni (Visualizzazione) che della logica per presentare e controllare tali informazioni.
All'interno di una determinata scena, è possibile eseguire tutte le operazioni che normalmente sarebbero state gestite da singoli .xib file:
- Posizionare visualizzazioni secondarie e controlli (ad esempio pulsanti e caselle di testo).
- Definire le posizioni degli elementi e i vincoli di layout automatico.
- Wire-up Actions and Outlet per esporre gli elementi dell'interfaccia utente al codice.
Uso di Segues
Come indicato in precedenza, Segues fornisce le relazioni tra tutte le scene che definiscono l'interfaccia utente dell'app. Se si ha familiarità con l'uso di Storyboard in iOS, si sa che Segues per iOS in genere definiscono transizioni tra visualizzazioni a schermo intero. Ciò differisce da macOS, quando Segues in genere definisce "contenimento" (dove una scena è il figlio di una scena padre).
In macOS la maggior parte delle app tende a raggruppare le visualizzazioni all'interno della stessa finestra usando elementi dell'interfaccia utente come Split Views e Tabs. A differenza di iOS, in cui è necessario eseguire la transizione delle visualizzazioni sullo schermo, a causa di uno spazio di visualizzazione fisico limitato.
Date le tendenze di macOS verso il contenimento, ci sono situazioni in cui vengono utilizzati Presentation Segues , ad esempio finestre modali, visualizzazioni foglio e popover.
Quando si usa Presentation Segues, è possibile eseguire l'override del PrepareForSegue metodo del controller di visualizzazione padre per la presentazione per inizializzare e le variabili e fornire i dati al controller di visualizzazione presentato.
Tempi di progettazione e esecuzione
In fase di progettazione (quando si esegue il layout dell'interfaccia utente in Interface Builder di Xcode), ogni elemento dell'interfaccia utente dell'app viene suddiviso in elementi costitutivi:
- Scene - Che sono composte da:
- View Controller : che definiscono le relazioni tra le visualizzazioni e i dati che li supportano.
- Visualizzazioni e visualizzazioni secondarie: gli elementi effettivi che costituiscono l'interfaccia utente.
- Contenimento Segues : che definiscono le relazioni padre-figlio tra scene.
- Presentation Segues : che definiscono le singole modalità di presentazione.
Definendo in questo modo ogni elemento, consente il caricamento differita di ogni elemento solo quando è necessario durante il runtime. In macOS, l'intero processo è stato progettato per consentire allo sviluppatore di creare interfacce utente complesse e flessibili che richiedono un minimo di codice di supporto per renderli operativi, pur essendo il più efficiente possibile con le risorse di sistema.
Guida introduttiva a Storyboard
Nella guida introduttiva di Storyboard si creerà una semplice app Xamarin.Mac che introduce i concetti chiave dell'uso degli storyboard per creare un'interfaccia utente. L'app di esempio sarà costituita da una visualizzazione spilt contenente un'area contenuto e un'area di controllo e presenterà una finestra di dialogo preferenze semplice. Useremo Segues per collegare tutti gli elementi dell'interfaccia utente.
Utilizzo degli storyboard
Questa sezione illustra i dettagli approfonditi sull'uso degli storyboard in un'app Xamarin.Mac. Verranno esaminate in modo approfondito le scene e il modo in cui sono composte da controller di visualizzazione e visualizzazione. Quindi, esamineremo come le scene sono collegate insieme a Segues. Infine, si esaminerà l'uso dei tipi Segue personalizzati.
Esempio di storyboard complesso
Per un esempio complesso di utilizzo degli storyboard in un'app Xamarin.Mac, vedere l'app di esempio SourceWriter. SourceWriter è un editor di codice sorgente semplice che offre supporto per il completamento del codice e informazioni sulla sintassi.
Il codice SourceWriter include tutti i commenti e, dove possibile, sono stati indicati i collegamenti delle tecnologie e dei metodi principali alle informazioni corrispondenti nelle guide di Xamarin.Mac.
Riepilogo
Questo articolo ha esaminato rapidamente l'uso degli storyboard in un'app Xamarin.Mac. È stato illustrato come creare una nuova app usando storyboard e come definire un'interfaccia utente. È stato anche illustrato come spostarsi tra finestre e stati di visualizzazione diversi usando segue.