Uso degli storyboard in Xamarin.Mac

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.

Lo storyboard è un file di risorse (con le estensioni di .storyboard) che viene incluso nel bundle dell'app Xamarin.Mac quando viene compilato e fornito. Per definire lo storyboard iniziale per l'app, modificare il Info.plist file e selezionare l'interfacciaprincipale nella casella a discesa:

Caricamento dal codice

In alcuni casi potrebbe essere necessario caricare uno storyboard specifico dal codice e creare manualmente un controller di visualizzazione. Per eseguire questa azione, è possibile usare il codice seguente:

// Get new window
var storyboard = NSStoryboard.FromName ("Main", null);
var controller = storyboard.InstantiateControllerWithIdentifier ("MainWindow") as NSWindowController;

// Display
controller.ShowWindow(this);

FromName Carica il file Storyboard con il nome specificato incluso nel bundle dell'app. InstantiateControllerWithIdentifier Crea un'istanza del controller di visualizzazione con l'identità specificata. L'identità viene impostata in Interface Builder di Xcode durante la progettazione dell'interfaccia utente:

Facoltativamente, è possibile usare il InstantiateInitialController metodo per caricare il controller di visualizzazione a cui è stato assegnato il controller iniziale in Interface Builder:

È contrassegnato dal punto di ingresso storyboard e dalla freccia terminata aperta sopra.

Visualizzare i controller

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.

Ciclo di vita del controller di visualizzazione

Alla classe sono stati aggiunti NSViewController diversi nuovi metodi per supportare storyboard in macOS. Soprattutto, i metodi seguenti usano per rispondere al ciclo di vita della visualizzazione controllata dal controller di visualizzazione specificato:

• ViewDidLoad - Questo metodo viene chiamato quando la visualizzazione viene caricata dal file Storyboard.
• ViewWillAppear - Questo metodo viene chiamato poco prima che la visualizzazione venga visualizzata sullo schermo.
• ViewDidAppear - Questo metodo viene chiamato direttamente dopo che la visualizzazione è stata visualizzata sullo schermo.
• ViewWillDisappear - Questo metodo viene chiamato poco prima che la visualizzazione venga rimossa dalla schermata.
• ViewDidDisappear - Questo metodo viene chiamato direttamente dopo che la visualizzazione è stata rimossa dalla schermata.
• UpdateViewConstraints - Questo metodo viene chiamato quando è necessario aggiornare i vincoli che definiscono la posizione e le dimensioni del layout automatico della visualizzazione.
• ViewWillLayout - Questo metodo viene chiamato poco prima che le visualizzazioni secondarie di questa visualizzazione siano disposte sullo schermo.
• ViewDidLayout - Questo metodo viene chiamato direttamente dopo che le visualizzazioni secondarie della visualizzazione sono disposte sullo schermo.

Catena risponditore

Inoltre, NSViewControllers ora fanno parte della catena di risponditore della finestra:

E di conseguenza sono cablate per ricevere e rispondere a eventi come taglia, copia e incolla voci di menu. Questo collegamento automatico del controller di visualizzazione si verifica solo nelle app in esecuzione in macOS Sierra (10.12) e versioni successive.

Containment

Negli storyboard, i controller di visualizzazione (ad esempio il controller di visualizzazione divisa e il controller visualizzazione scheda) possono ora implementare il contenimento, in modo che possano "contenere" altri controller di visualizzazione secondari:

I controller di visualizzazione figlio contengono metodi e proprietà per collegarli al controller di visualizzazione padre e per lavorare con la visualizzazione e la rimozione delle visualizzazioni dallo schermo.

Tutti i controller di visualizzazione contenitori integrati in macOS hanno un layout specifico che Apple suggerisce di seguire se si creano controller di visualizzazione contenitori personalizzati:

Il controller visualizzazione raccolta contiene una matrice di elementi visualizzazione raccolta, ognuno dei quali contiene uno o più controller di visualizzazione che contengono le proprie visualizzazioni.

Segues

Segue 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.

Presentazione Segues

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. macOS Fornisce i tipi predefiniti seguenti:

• Mostra : visualizza la destinazione di Segue come finestra non modale. Ad esempio, usa questo tipo di Segue per presentare un'altra istanza di una finestra documento nell'app.
• Modale : presenta la destinazione di Segue come finestra modale. Ad esempio, usa questo tipo di Segue per presentare la finestra Preferenze per la tua app.
• Foglio : presenta la destinazione di Segue come foglio associato alla finestra padre. Ad esempio, utilizzare questo tipo di segue per presentare un foglio trova e sostituisci.
• Popover : presenta la destinazione di Segue come in una finestra popup. Ad esempio, usare questo tipo Segue per presentare le opzioni quando un elemento dell'interfaccia utente viene selezionato dall'utente.
• Personalizzato : presenta la destinazione di Segue usando un tipo segue personalizzato definito dallo sviluppatore. Per altri dettagli, vedere la sezione Creating Custom Segues (Creazione di segues personalizzati).

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.

Attivato Segues

Attivata Segues consente di specificare il nome Segues (tramite la relativa proprietà Identifier in Interface Builder) e di attivarli da eventi quali l'utente che fa clic su un pulsante o chiamando il PerformSegue metodo nel codice:

// Display the Scene defined by the given Segue ID
PerformSegue("MyNamedSegue", this);

L'ID Segue viene definito all'interno di Interface Builder di Xcode durante la disposizione dell'interfaccia utente dell'app:

Nel controller di visualizzazione che funge da origine di Segue, è necessario eseguire l'override del PrepareForSegue metodo ed eseguire qualsiasi inizializzazione necessaria prima dell'esecuzione di Segue e viene visualizzato il controller di visualizzazione specificato:

public override void PrepareForSegue (NSStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    // Take action based on Segue ID
    switch (segue.Identifier) {
    case "MyNamedSegue":
        // Prepare for the segue to happen
        ...
        break;
    }
}

Facoltativamente, è possibile eseguire l'override del ShouldPerformSegue metodo e controllare se Segue viene effettivamente eseguito tramite codice C#. Per visualizzare manualmente i controller di visualizzazione, chiamare il DismissController metodo per rimuoverli dalla visualizzazione quando non sono più necessari.

Creazione di segues personalizzati

In alcuni casi l'app richiede un tipo Segue non fornito dalla build-in Segues definita in macOS. In questo caso, puoi creare un oggetto Segue personalizzato che può essere assegnato in Interface Builder di Xcode durante la disposizione dell'interfaccia utente dell'app.

Ad esempio, per creare un nuovo tipo Segue che sostituisce il controller di visualizzazione corrente all'interno di una finestra (anziché aprire la scena di destinazione in una nuova finestra), è possibile usare il codice seguente:

using System;
using AppKit;
using Foundation;

namespace OnCardMac
{
    [Register("ReplaceViewSeque")]
    public class ReplaceViewSeque : NSStoryboardSegue
    {
        #region Constructors
        public ReplaceViewSeque() {

        }

        public ReplaceViewSeque (string identifier, NSObject sourceController, NSObject destinationController) : base(identifier,sourceController,destinationController) {

        }

        public ReplaceViewSeque (IntPtr handle) : base(handle) {
        }

        public ReplaceViewSeque (NSObjectFlag x) : base(x) {
        }
        #endregion

        #region Override Methods
        public override void Perform ()
        {
            // Cast the source and destination controllers
            var source = SourceController as NSViewController;
            var destination = DestinationController as NSViewController;

            // Swap the controllers
            source.View.Window.ContentViewController = destination;

            // Release memory
            source.RemoveFromParentViewController ();
        }
        #endregion

    }

}

Ecco un paio di cose da notare:

• Viene usato l'attributo Register per esporre questa classe a Objective-C/macOS.
• Si esegue l'override del Perform metodo per eseguire effettivamente l'azione dell'oggetto Segue personalizzato.
• Il controller della finestra viene ContentViewController sostituito con quello definito dalla destinazione (destinazione) di Segue.
• Il controller di visualizzazione originale viene rimosso per liberare memoria usando il RemoveFromParentViewController metodo .

Per usare questo nuovo tipo Segue in Interface Builder di Xcode, è prima necessario compilare l'app, quindi passare a Xcode e aggiungere un nuovo segue tra due scene. Impostare Style su Custom e Segue Class su ReplaceViewSegue (il nome della classe Segue personalizzata):

Controller finestra

I controller di finestra contengono e controllano i diversi tipi di finestra che l'app macOS può creare. Per gli storyboard, hanno le funzionalità seguenti:

1. Devono fornire un controller di visualizzazione contenuto. Si tratta dello stesso controller di visualizzazione contenuto di cui dispone la finestra figlio.
2. La Storyboard proprietà conterrà lo Storyboard da cui è stato caricato il controller di finestra, altrimenti null se non viene caricato da uno Storyboard.
3. È possibile chiamare il DismissController metodo per chiudere la finestra specificata e rimuoverla dalla visualizzazione.

Come i controller di visualizzazione, i controller di finestra implementano i PerformSeguePrepareForSegue metodi e ShouldPerformSegue e possono essere usati come origine di un'operazione Segue.

Window Controller è responsabile delle funzionalità seguenti di un'app macOS:

• Gestiscono una finestra specifica.
• Gestiscono la barra del titolo e la barra degli strumenti della finestra (se disponibile).
• Gestiscono il controller visualizzazione contenuto per visualizzare il contenuto della finestra.

Riconoscitori di movimento

I riconoscitori di movimento per macOS sono quasi identici alle rispettive controparti in iOS e consentono allo sviluppatore di aggiungere facilmente movimenti (ad esempio facendo clic su un pulsante del mouse) agli elementi nell'interfaccia utente dell'app.

Tuttavia, dove i movimenti in iOS sono determinati dalla progettazione dell'app (ad esempio toccando lo schermo con due dita), la maggior parte dei movimenti in macOS è determinata dall'hardware.

Usando riconoscimento movimenti, è possibile ridurre notevolmente la quantità di codice necessaria per aggiungere interazioni personalizzate a un elemento nell'interfaccia utente. Come possono determinare automaticamente tra doppio e singolo clic, fare clic e trascinare eventi e così via.

Anziché eseguire l'override dell'evento MouseDown nel controller di visualizzazione, è consigliabile usare un riconoscimento movimento per gestire l'evento di input dell'utente quando si usano gli storyboard.

I sistemi di riconoscimento movimento seguenti sono disponibili in macOS:

• NSClickGestureRecognizer - Registrare gli eventi con il mouse verso il basso e verso l'alto.
• NSPanGestureRecognizer - Registra il pulsante del mouse verso il basso, trascina gli eventi di rilascio.
• NSPressGestureRecognizer - Registra tenendo premuto un pulsante del mouse per un determinato periodo di tempo.
• NSMagnificationGestureRecognizer - Registra un evento di ingrandimento dall'hardware trackpad.
• NSRotationGestureRecognizer - Registra un evento di rotazione dall'hardware trackpad.

Uso dei riferimenti a Storyboard

Un riferimento storyboard consente di prendere una progettazione storyboard di grandi dimensioni e complessa e suddividerla in storyboard più piccoli a cui si fa riferimento dall'originale, eliminando così la complessità e rendendo i singoli Storyboard risultanti più facili da progettare e gestire.

Inoltre, un riferimento a storyboard può fornire un ancoraggio a un'altra scena all'interno dello stesso storyboard o di una scena specifica su uno diverso.

Riferimento a uno storyboard esterno

Per aggiungere un riferimento a uno storyboard esterno, eseguire le operazioni seguenti:

1. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto e scegliere Aggiungi>nuovo file...>Mac>Storyboard. Immettere un nome per il nuovo storyboard e fare clic sul pulsante Nuovo :

   

2. Nella Esplora soluzioni fare doppio clic sul nuovo nome dello storyboard per aprirlo per la modifica in Interface Builder di Xcode.

3. Progettare il layout delle scene del nuovo storyboard come si farebbe normalmente e salvare le modifiche:

   

4. Passare allo Storyboard a cui si aggiungerà il riferimento in Interface Builder.

5. Trascinare un riferimento storyboard dalla libreria di oggetti nell'area di progettazione:

   

6. In Controllo attributi selezionare il nome dello storyboard creato in precedenza:

   

7. Fare clic con il pulsante di controllo su un widget dell'interfaccia utente (ad esempio un pulsante) in una scena esistente e creare un nuovo elemento Segue per il riferimento allo storyboard appena creato. Dal menu popup selezionare Mostra per completare Segue:

   

8. Salvare le modifiche apportate allo Storyboard.

9. Tornare a Visual Studio per Mac per sincronizzare le modifiche.

Quando l'app viene eseguita e l'utente fa clic sull'elemento dell'interfaccia utente da cui è stato creato Segue, verrà visualizzato il controller finestra iniziale dello storyboard esterno specificato nel riferimento dello storyboard.

Riferimento a una scena specifica in uno storyboard esterno

Per aggiungere un riferimento a una scena specifica, uno storyboard esterno (e non il controller finestra iniziale), eseguire le operazioni seguenti:

1. Nella Esplora soluzioni fare doppio clic sullo storyboard esterno per aprirlo per la modifica in Interface Builder di Xcode.

2. Aggiungere una nuova scena e progettarne il layout come si farebbe normalmente:

   

3. In Identity Inspector (Controllo identità) immettere un ID storyboard per il nuovo controller finestra della scena:

   

4. Aprire lo storyboard a cui si aggiungerà il riferimento in Interface Builder.

5. Trascinare un riferimento storyboard dalla libreria di oggetti nell'area di progettazione:

   

6. In Identity Inspector (Controllo identità) selezionare il nome dello storyboard e l'ID riferimento (ID storyboard) della scena creata in precedenza:

   

7. Fare clic con il pulsante di controllo su un widget dell'interfaccia utente (ad esempio un pulsante) in una scena esistente e creare un nuovo elemento Segue per il riferimento allo storyboard appena creato. Dal menu popup selezionare Mostra per completare Segue:

   

8. Salvare le modifiche apportate allo Storyboard.

9. Tornare a Visual Studio per Mac per sincronizzare le modifiche.

Quando l'app viene eseguita e l'utente fa clic sull'elemento dell'interfaccia utente da cui è stato creato Segue, verrà visualizzata la scena con l'ID storyboard specificato nello storyboard esterno specificato nel riferimento allo storyboard.

Riferimento a una scena specifica nello stesso storyboard

Per aggiungere un riferimento a una scena specifica nello stesso storyboard, eseguire le operazioni seguenti:

1. Nella Esplora soluzioni fare doppio clic sullo Storyboard per aprirlo per la modifica.

2. Aggiungere una nuova scena e progettarne il layout come si farebbe normalmente:

   

3. In Identity Inspector (Controllo identità) immettere un ID storyboard per il nuovo controller finestra della scena:

   

4. Trascinare un riferimento storyboard dalla casella degli strumenti nell'area di progettazione:

   

5. In Controllo attributi selezionare ID riferimento (ID storyboard) della scena creata in precedenza:

   

6. Fare clic con il pulsante di controllo su un widget dell'interfaccia utente (ad esempio un pulsante) in una scena esistente e creare un nuovo elemento Segue per il riferimento allo storyboard appena creato. Dal menu popup selezionare Mostra per completare Segue:

   

7. Salvare le modifiche apportate allo Storyboard.

8. Tornare a Visual Studio per Mac per sincronizzare le modifiche.

Quando l'app viene eseguita e l'utente fa clic sull'elemento dell'interfaccia utente da cui è stato creato Segue, verrà visualizzata la scena con l'ID storyboard specificato nello stesso storyboard specificato nel riferimento allo storyboard.

Collegamenti correlati

• Hello, Mac
• Uso di Windows
• Linee guida dell'interfaccia umana OS X
• Introduzione a Windows