Uso delle viste in pila tvOS in Xamarin

Il controllo Visualizzazione stack (UIStackView) sfrutta la potenza delle classi Layout automatico e Dimensioni per gestire uno stack di visualizzazioni secondarie, orizzontalmente o verticalmente, che risponde dinamicamente alle modifiche del contenuto e alle dimensioni dello schermo del dispositivo Apple TV.

Il layout di tutte le visualizzazioni secondarie associate a una visualizzazione stack viene gestito da esso in base alle proprietà definite dallo sviluppatore, ad esempio asse, distribuzione, allineamento e spaziatura:

Quando si usa un UIStackView oggetto in un'app Xamarin.tvOS, lo sviluppatore può definire le visualizzazioni secondarie all'interno di uno Storyboard in iOS Designer oppure aggiungendo e rimuovendo le visualizzazioni secondarie nel codice C#.

Informazioni sui controlli visualizzazione in pila

UIStackView è progettato come una visualizzazione contenitore non di rendering e, di conseguenza, non viene disegnato nell'area di disegno come altre sottoclassi di UIView. L'impostazione di proprietà come BackgroundColor o l'override DrawRect non avrà alcun effetto visivo.

Esistono diverse proprietà che controllano la modalità di disposizione di una visualizzazione stack della relativa raccolta di visualizzazioni secondarie:

• Asse: determina se la visualizzazione stack dispone le visualizzazioni secondarie orizzontalmente o verticalmente.
• Allineamento: controlla la modalità di allineamento delle visualizzazioni secondarie all'interno della visualizzazione stack.
• Distribuzione : controlla le dimensioni delle visualizzazioni secondarie all'interno della visualizzazione stack.
• Spaziatura : controlla lo spazio minimo tra ogni visualizzazione secondaria nella visualizzazione stack.
• Baseline Relative : se true, la spaziatura verticale di ogni visualizzazione secondaria verrà derivata dalla linea di base.
• Margini di layout relativi : posiziona le visualizzazioni secondarie rispetto ai margini di layout standard.

In genere si userà una visualizzazione stack per disporre un numero ridotto di visualizzazioni secondarie. È possibile creare interfacce utente più complesse annidando una o più viste stack l'una all'altra.

È possibile ottimizzare ulteriormente l'aspetto delle interfacce utente aggiungendo vincoli aggiuntivi alle visualizzazioni secondarie, ad esempio per controllare l'altezza o la larghezza. È tuttavia necessario prestare attenzione a non includere vincoli in conflitto a quelli introdotti dalla visualizzazione stack stessa.

Layout automatico e classi di dimensioni

Quando una visualizzazione secondaria viene aggiunta a una visualizzazione stack, il relativo layout è totalmente controllato da tale visualizzazione stack usando classi di layout automatico e dimensioni per posizionare e ridimensionare le visualizzazioni disposte.

La visualizzazione stack aggiungerà la prima e l'ultima visualizzazione secondaria nella relativa raccolta ai bordi Superiore e Inferiore per le visualizzazioni stack verticali o i bordi sinistro e destro per le visualizzazioni stack orizzontali. Se si imposta la LayoutMarginsRelativeArrangement proprietà su true, la visualizzazione aggiunge le visualizzazioni secondarie ai margini pertinenti anziché al bordo.

La visualizzazione stack usa la proprietà della IntrinsicContentSize visualizzazione secondaria quando si calcolano le dimensioni delle visualizzazioni secondarie lungo l'oggetto definito Axis ,ad eccezione di FillEqually Distribution. FillEqually Distribution Ridimensiona tutte le visualizzazioni secondarie in modo che abbiano le stesse dimensioni, riempiendo così la visualizzazione stack lungo l'oggetto Axis.

Ad eccezione di Fill Alignment, la visualizzazione stack usa la proprietà della IntrinsicContentSize visualizzazione secondaria per calcolare le dimensioni della vista perpendicolare all'oggetto specificato Axis. Per , Fill Alignmenttutte le visualizzazioni secondarie vengono ridimensionate in modo che riempiano la visualizzazione stack perpendicolare all'oggetto specificato Axis.

Posizionamento e ridimensionamento della visualizzazione stack

Anche se la visualizzazione stack ha il controllo totale sul layout di qualsiasi visualizzazione secondaria (in base a proprietà come Axis e Distribution), è comunque necessario posizionare la visualizzazione stack (UIStackView) all'interno della visualizzazione padre usando layout automatico e classi di dimensioni.

In genere, ciò significa bloccare almeno due bordi della visualizzazione stack per espandere e contratto, definendone la posizione. Senza vincoli aggiuntivi, la visualizzazione stack verrà ridimensionata automaticamente in modo da adattarsi a tutte le relative visualizzazioni secondarie come indicato di seguito:

• Le dimensioni lungo di esso Axis saranno la somma di tutte le dimensioni della visualizzazione secondaria più qualsiasi spazio definito tra ogni visualizzazione secondaria.
• Se la LayoutMarginsRelativeArrangement proprietà è true, le dimensioni delle visualizzazioni dello stack includeranno anche spazio per i margini.
• La dimensione perpendicolare a Axis verrà impostata sulla visualizzazione secondaria più grande della raccolta.

Inoltre, è possibile specificare vincoli per altezza e larghezza della visualizzazione stack. In questo caso, le visualizzazioni secondarie verranno disposte (ridimensionate) per riempire lo spazio specificato dalla visualizzazione stack in base Distribution alle proprietà e Alignment .

Se la BaselineRelativeArrangement proprietà è true, le visualizzazioni secondarie verranno disposte in base alla linea di base della prima o dell'ultima visualizzazione secondaria, anziché usare la posizione Top, Bottom o Center - Y. Questi dati vengono calcolati sul contenuto della visualizzazione stack come indicato di seguito:

• Una visualizzazione stack verticale restituirà la prima visualizzazione secondaria per la prima linea di base e l'ultima per l'ultima. Se una di queste visualizzazioni secondarie si trovano in visualizzazioni stack, verrà usata la prima o l'ultima linea di base.
• Una visualizzazione stack orizzontale userà la visualizzazione secondaria più alta sia per la prima che per l'ultima linea di base. Se la visualizzazione più alta è anche una visualizzazione stack, verrà usata come visualizzazione secondaria più alta come linea di base.

Usi comuni della visualizzazione stack

Esistono diversi tipi di layout che funzionano bene con i controlli Visualizzazione stack. Secondo Apple, ecco alcuni degli usi più comuni:

• Definire le dimensioni lungo l'asse : aggiungendo entrambi i bordi lungo i bordi della Axis visualizzazione stack e uno dei bordi adiacenti per impostare la posizione, la visualizzazione Stack crescerà lungo l'asse per adattarsi allo spazio definito dalle relative visualizzazioni secondarie.
• Definire la posizione della visualizzazione secondaria: aggiungendo i bordi adiacenti della visualizzazione stack alla visualizzazione padre, la visualizzazione stack aumenta in entrambe le dimensioni per adattarla alle visualizzazioni secondarie.
• Definire le dimensioni e la posizione dello stack : aggiungendo tutti e quattro i bordi della visualizzazione stack alla visualizzazione padre, la visualizzazione stack dispone le visualizzazioni secondarie in base allo spazio definito all'interno della visualizzazione stack.
• Definire le dimensioni perpendicolare l'asse : aggiungendo entrambi i bordi perpendicolare ai bordi della Axis visualizzazione stack e uno dei bordi lungo l'asse per impostare la posizione, la visualizzazione Stack crescerà perpendicolare all'asse per adattarsi allo spazio definito dalle relative visualizzazioni secondarie.

Stack Views and Storyboards

Il modo più semplice per usare le visualizzazioni stack in un'app Xamarin.tvOS consiste nell'aggiungerli all'interfaccia utente dell'app usando iOS Designer.

Per altre informazioni sull'uso degli storyboard, vedere la guida introduttiva hello, tvOS.

Nel caso del nostro esempio, abbiamo esposto un outlet e un'azione per il controllo segmento e un outlet per ogni "scheda giocatore". Nel codice, nascondiamo e mostriamo il giocatore in base al segmento corrente. Ad esempio:

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take Action based on the segment
    switch(PlayerCount.SelectedSegment) {
    case 0:
        Player1.Hidden = false;
        Player2.Hidden = true;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 1:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = true;
        Player4.Hidden = true;
        break;
    case 2:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = true;
        break;
    case 3:
        Player1.Hidden = false;
        Player2.Hidden = false;
        Player3.Hidden = false;
        Player4.Hidden = false;
        break;
    }
}

Quando l'app viene eseguita, i quattro elementi verranno distribuiti equamente nella visualizzazione stack:

Se il numero di giocatori è diminuito, le visualizzazioni inutilizzate sono nascoste e la visualizzazione stack regola il layout in modo che si adatti:

Popolare una visualizzazione stack dal codice

Oltre a definire completamente il contenuto e il layout di una visualizzazione stack in Progettazione iOS, è possibile crearlo e rimuoverlo in modo dinamico dal codice C#.

Si prenda l'esempio seguente che usa una visualizzazione stack per gestire le "stelle" in una revisione (da 1 a 5):

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Di seguito sono riportate alcune parti di questo codice in dettaglio. Prima di tutto, si usano istruzioni if per verificare che non siano presenti più di cinque "stelle" o meno di zero.

Per aggiungere una nuova "stella" carichiamo l'immagine e impostiamo la modalità contenuto su Ridimensiona adattamento aspetto:

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

In questo modo l'icona "star" non viene distorta quando viene aggiunta alla visualizzazione stack.

Successivamente, aggiungiamo la nuova icona "star" alla raccolta di visualizzazioni secondarie della visualizzazione stack:

RatingView.AddArrangedSubview(icon);

Si noterà che è stato aggiunto alla UIImageView UIStackViewproprietà dell'oggetto ArrangedSubviews e non a SubView. Qualsiasi visualizzazione che si desidera che la visualizzazione stack controlli il relativo layout deve essere aggiunta alla ArrangedSubviews proprietà .

Per rimuovere una visualizzazione secondaria da una visualizzazione stack, ottenere prima di tutto la visualizzazione secondaria da rimuovere:

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

È quindi necessario rimuoverlo sia dalla raccolta che dalla ArrangedSubviews Super View:

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

La rimozione di una visualizzazione secondaria dalla ArrangedSubviews raccolta lo rimuove dal controllo Stack View, ma non lo rimuove dallo schermo.

Modifica dinamica del contenuto

Una visualizzazione stack regola automaticamente il layout delle visualizzazioni secondarie ogni volta che viene aggiunta, rimossa o nascosta una visualizzazione secondaria. Il layout verrà modificato anche se una proprietà della visualizzazione stack viene modificata , ad esempio il relativo Axis.

Le modifiche di layout possono essere animate inserendole all'interno di un blocco di animazione, ad esempio:

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

Molte delle proprietà della visualizzazione stack possono essere specificate usando classi di dimensioni all'interno di uno storyboard. Queste proprietà verranno animate automaticamente in risposta alle modifiche delle dimensioni o dell'orientamento.

Riepilogo

Questo articolo ha illustrato la progettazione e l'uso della visualizzazione in pila all'interno di un'app Xamarin.tvOS.

Collegamenti correlati

• tvOS
• Guide all'interfaccia umana tvOS
• Guida alla programmazione delle app per tvOS