Condividi tramite

Uso dello spostamento e dello stato attivo di tvOS in Xamarin

  • Articolo

Questo articolo illustra il concetto di stato attivo e come viene usato per presentare e gestire la navigazione all'interno di un'app Xamarin.tvOS.

Questo articolo illustra il concetto di stato attivo e il modo in cui viene usato per gestire la navigazione nell'interfaccia utente di un'app Xamarin.tvOS. Esamineremo il modo in cui i controlli di spostamento tvOS predefiniti usano lo stato attivo, l'evidenziazione e la selezione per fornire all'app Xamarin.tvOS lo spostamento dell'interfaccia utente dell'app.

Navigazione dell'interfaccia utente delle app tvOS

Si esaminerà quindi come usare Lo stato attivo con Parallasse e Immagini a più livelli per fornire indicazioni visive sullo stato di spostamento corrente all'utente finale.

Infine, si esaminerà l'uso di Focus, Focus Aggiornamenti, Focus Guides, Focus in Collections e Enabling Parallax on Image Views nelle app Xamarin.tvOS.

Gli utenti dell'app Xamarin.tvOS non interagiranno direttamente con l'interfaccia, come con iOS, in cui toccano le immagini sullo schermo del dispositivo, ma indirettamente da tutta la stanza usando siri remoto. È necessario tenere presente questo aspetto durante la progettazione dell'interfaccia utente dell'app in modo che venga trasmesso naturalmente, ma mantiene l'utente immerso nell'esperienza Apple TV.

Un'app tvOS di successo implementa lo spostamento in modo da supportare senza problemi lo scopo dell'app e la struttura dei dati che presenta senza richiamare l'attenzione sullo spostamento stesso. Progettare la navigazione in modo che si senta naturale e familiare senza dominare l'interfaccia utente o distogliere lo stato attivo dal contenuto e dall'esperienza utente delle app.

App delle impostazioni tvOS

Durante l'uso di un Apple TV, l'utente si sposta in genere attraverso un set di schermi in pila, ognuno dei quali presenta un determinato set di contenuti. A sua volta, ogni nuova schermata può portare a una o più schermate secondarie del contenuto usando controlli dell'interfaccia utente standard, ad esempio pulsanti, barre di tabulazioni, tabelle, visualizzazioni raccolta o visualizzazioni suddivise.

Con ogni nuova schermata dei dati, l'utente si sposta più in dettaglio in questo stack di schermate. Usando il pulsante Menu in Siri Remote, è possibile spostarsi all'indietro nello stack per tornare a una schermata precedente o a Un menu principale.

Apple suggerisce di tenere presente quanto segue quando si progetta lo spostamento per l'app tvOS:

  • Layout della struttura di spostamento per rendere il contenuto veloce e semplice : gli utenti vogliono accedere al contenuto all'interno dell'app nel minor numero possibile di tap, clic e scorrimenti rapidi. Semplificare la navigazione e organizzare il contenuto in base al numero minimo di schermate.
  • Creare un'interfaccia fluida usando il tocco : assicurarsi che un utente possa spostarsi tra elementi attivabili con un attrito minimo usando il minor numero di movimenti possibili.
  • Progettazione con focus in mente : poiché l'utente interagisce con il contenuto nella stanza, è necessario spostare lo stato attivo su un elemento dell'interfaccia utente prima di interagire con esso usando Siri Remote. Gli utenti si frustraranno con la tua app se richiede troppi movimenti per raggiungere i loro obiettivi.
  • Fornire lo spostamento indietro tramite il pulsante Menu : per creare un'esperienza semplice e familiare, consentire agli utenti di spostarsi indietro usando il pulsante Menu di Siri Remoto. Premere il pulsante Menu deve sempre tornare alla schermata precedente o tornare al menu principale dell'app. Al livello superiore dell'app, premere il pulsante Menu per tornare alla schermata Iniziale di Apple TV.
  • In genere evita di visualizzare un pulsante Indietro: poiché premendo il pulsante Menu in Siri Remote si sposta all'indietro nello stack dello schermo, evitare di visualizzare un controllo aggiuntivo che duplica questo comportamento. Un'eccezione a questa regola riguarda gli schermi di acquisto o le schermate con azioni distruttive (ad esempio l'eliminazione del contenuto) in cui deve essere visualizzato anche un pulsante Annulla .
  • Mostra raccolte di grandi dimensioni su uno schermo singolo, Invece di Molti - Siri Remote è stato progettato per eseguire lo spostamento attraverso una grande raccolta di contenuti veloce e facile da usare. Se l'app funziona con una grande raccolta di elementi con stato attivo, valuta la possibilità di mantenerli in un'unica schermata invece di suddividerli in molte schermate che richiedono più spostamento nella parte dell'utente.
  • Usa controlli standard per lo spostamento : ancora una volta, per creare un'esperienza utente semplice e familiare, laddove possibile, usa controlli predefiniti UIKit , ad esempio controlli pagina, barre di tabulazione, controlli segmentati, visualizzazioni tabella, visualizzazioni raccolta e visualizzazioni suddivise per la navigazione dell'app. Poiché l'utente ha già familiarità con questi elementi, sarà in grado di spostarsi nella tua app in modo intuitivo.
  • Favore Spostamento contenuto orizzontale - A causa della natura di Apple TV, scorrere verso sinistra verso destra su Siri Remote è più naturale che verso l'alto e verso il basso. Prendere in considerazione questa opzione quando si progettano layout di contenuto per l'app.

Stato attivo e selezione

In Apple TV, un'immagine, un pulsante o un altro elemento dell'interfaccia utente viene considerato attivo quando è la destinazione della navigazione corrente.

Esempio di messa a fuoco e selezione

A differenza dei dispositivi iOS in cui l'utente interagisce direttamente con gli elementi sul touchscreen del dispositivo, gli utenti interagiscono con gli elementi tvOS dall'altra parte della stanza usando Siri Remote. Per presentare e gestire questa interazione utente, Apple TV usa un modello basato su focus .

Usando i movimenti e i pulsanti si preme siri remoto, l'utente sposta lo stato attivo da un elemento dell'interfaccia utente a un altro. Una volta spostato lo stato attivo sull'elemento desiderato, l'utente fa clic per selezionare il contenuto o attivare l'azione rappresentata da tale elemento.

Man mano che cambia lo stato attivo, le animazioni e gli effetti sottili (ad esempio l'effetto parallasse sulle immagini) vengono usati per identificare chiaramente l'elemento dell'interfaccia utente che ha attualmente lo stato attivo.

Apple offre i suggerimenti seguenti per l'uso dello stato attivo e della selezione:

  • Usa controlli dell'interfaccia utente predefiniti per effetti di movimento: usando UIKit e l'API Messa a fuoco nell'interfaccia utente, il modello di messa a fuoco applicherà automaticamente gli effetti visivi e di movimento predefiniti agli elementi dell'interfaccia utente. In questo modo l'app si sente nativa e familiare agli utenti della piattaforma Apple TV e consente un movimento fluido e intuitivo tra elementi attivabili.
  • Sposta lo stato attivo nelle indicazioni previste - Su Apple TV, quasi ogni elemento usa la manipolazione indiretta. Ad esempio, l'utente usa Siri Remote per spostare lo stato attivo e il sistema scorre automaticamente l'interfaccia per mantenere visibile l'elemento attualmente attivo. Se l'app implementa questo tipo di interazione, assicurati che lo stato attivo si muova nella direzione del movimento dell'utente. Quindi, se l'utente scorre verso destra sullo stato attivo Siri Remote dovrebbe passare a destra (che potrebbe causare lo scorrimento dello schermo a sinistra). L'unica eccezione a questa regola è costituita da elementi a schermo intero che usano la manipolazione diretta (in cui lo scorrimento verso l'alto sposta l'elemento verso l'alto).
  • Assicurati che l'elemento con stato attivo sia ovvio : poiché gli utenti interagiscono con gli elementi dell'interfaccia utente da lontano, è fondamentale che l'elemento attualmente incentrato si distingue. In genere, questo verrà gestito automaticamente dagli elementi predefiniti UIKit . Per i controlli personalizzati, usare funzionalità come le dimensioni dell'elemento o l'ombreggiatura per mostrare lo stato attivo.
  • Usa parallasse per rendere reattivi gli elementi mirati - piccoli gesti circolari sul siri remoto comportano un movimento delicato e in tempo reale dell'elemento con lo stato attivo. Questo effetto parallasse è integrato in UIKitimmagini a più livelli per dare all'utente un senso di connessione all'elemento attivo.
  • Crea elementi con stato attivo delle dimensioni appropriate: gli elementi di grandi dimensioni con una spaziatura ampia sono più facili da selezionare e spostarsi rispetto agli elementi più piccoli.
  • Elemento dell'interfaccia utente di progettazione in modo che sembri attivo o non attivo : in genere Apple TV rappresenta l'elemento con stato attivo aumentandone le dimensioni. Assicurarsi che gli elementi dell'interfaccia utente delle app siano ideali per qualsiasi dimensione della presentazione e, se necessario, fornire asset per elementi di dimensioni maggiori.
  • Rappresenta le modifiche dello stato attivo in modo fluido: usa l'animazione per dissolvere senza problemi tra un elemento Con stato attivo e Unofocus per evitare che le transizioni vengano scomsparate .
  • Non visualizzare un cursore : gli utenti si aspettano di spostarsi nell'interfaccia utente dell'app usando lo stato attivo e non spostando un cursore sullo schermo. L'interfaccia utente deve usare sempre il modello di messa a fuoco per presentare un'esperienza utente coerente.

Uso dello stato attivo

In alcuni casi potrebbe essere necessario creare un controllo personalizzato che possa diventare un elemento attivabile. In caso affermativo, eseguire l'override della CanBecomeFocused proprietà e restituire true, altrimenti restituire false. Ad esempio:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

In qualsiasi momento è possibile utilizzare la Focused proprietà di un UIKit controllo per verificare se è l'elemento corrente. Se true l'elemento dell'interfaccia utente ha attualmente lo stato attivo, altrimenti non lo è. Ad esempio:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Anche se non è possibile spostare direttamente lo stato attivo su un altro elemento dell'interfaccia utente tramite codice, è possibile specificare quale elemento dell'interfaccia utente ottiene per primo lo stato attivo quando viene caricato uno schermo impostando la relativa PreferredFocusedView proprietà su true. Ad esempio:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Utilizzo di focus Aggiornamenti

Quando l'utente fa sì che lo stato attivo si sposti da un elemento dell'interfaccia utente a un altro (ad esempio, in risposta a un movimento su Siri Remote), un evento di aggiornamento dello stato attivo verrà inviato sia all'elemento che perde lo stato attivo e all'elemento che ottiene lo stato attivo.

Per gli elementi personalizzati che ereditano da UIView o UIViewController, è possibile eseguire l'override di diversi metodi per lavorare con l'evento di aggiornamento dello stato attivo:

  • DidUpdateFocus : questo metodo verrà chiamato ogni volta che la visualizzazione ottiene o perde lo stato attivo.
  • ShouldUpdateFocus : usare questo metodo per definire la posizione in cui è consentito spostare lo stato attivo.

Per richiedere che il motore di messa a fuoco rimuovono lo stato attivo sull'elemento dell'interfaccia PreferredFocusedView utente, chiamare il SetNeedsUpdateFocus metodo del controller di visualizzazione.

Importante

La chiamata SetNeedsUpdateFocus ha effetto solo se il controller di visualizzazione su cui viene chiamato contiene la visualizzazione attualmente attiva.

Uso delle guide per lo stato attivo

Il motore di messa a fuoco integrato in tvOS è ideale per gestire i movimenti tra gli elementi che cadono su una griglia orizzontale e verticale. In genere, devi fare niente di più che aggiungere gli elementi dell'interfaccia utente alla progettazione dell'interfaccia e il motore di messa a fuoco gestirà automaticamente lo spostamento tra questi elementi senza l'intervento dello sviluppatore.

Tuttavia, potrebbe esserci qualche volta, a causa delle esigenze della progettazione dell'interfaccia utente, quando gli elementi dell'interfaccia utente non rientrano in una griglia orizzontale e verticale e potrebbero non essere accessibili perché sono diagonali l'uno all'altro. Questo avviene perché il motore di messa a fuoco è stato progettato per gestire solo lo spostamento semplice su, giù, sinistro e destro tra gli elementi dell'interfaccia utente.

Per un esempio, prendere il layout dell'interfaccia utente seguente:

Esempio di Uso delle guide per lo stato attivo

Poiché il pulsante Altre informazioni non si trova su una griglia orizzontale e verticale con il pulsante Acquista sarebbe inaccessibile all'utente. Tuttavia, questo può essere facilmente corretto usando una Guida messa a fuoco per fornire suggerimenti di spostamento al motore di messa a fuoco.

Una Guida messa a fuoco (UIFocusGuide) espone un'area non visibile della visualizzazione come attivabile al motore di messa a fuoco, consentendo così il reindirizzamento dello stato attivo a un'altra visualizzazione.

Per risolvere l'esempio riportato sopra, è quindi possibile aggiungere il codice seguente al controller di visualizzazione per creare una guida di messa a fuoco tra i pulsanti Altre informazioni e Acquista :

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

Prima di tutto, viene creato un nuovo UIFocusGuide oggetto e aggiunto all'insieme View's Layout Guide usando il AddLayoutGuide metodo .

Successivamente, i pulsanti Top, Left, Width e Height Anchor della Guida messa a fuoco vengono regolati rispetto ai pulsanti Altre informazioni e Acquista per posizionarli tra di essi. Vedere:

Guida di stato attivo di esempio

È anche importante notare che i nuovi vincoli vengono attivati quando vengono creati impostando la proprietà Active su true:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

Con la nuova Guida messa a fuoco stabilita e aggiunta alla visualizzazione, è possibile eseguire l'override del metodo del DidUpdateFocus controller di visualizzazione e il codice seguente aggiunto per spostarsi tra i pulsanti Altre informazioni e Acquista :

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

In primo luogo, questo codice ottiene da NextFocusedViewUIFocusUpdateContext che è stato passato (context). Se questa vista è null, non è necessaria alcuna elaborazione e il metodo è stato chiuso.

Viene quindi valutato .nextFocusableItem Se corrisponde ai pulsanti Altre informazioni o Acquista , lo stato attivo viene inviato al pulsante opposto usando la proprietà della PreferredFocusedView Guida messa a fuoco. Ad esempio:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

Nel caso in cui nessun pulsante sia l'origine dello spostamento dello stato attivo, la PreferredFocusedView proprietà viene cancellata:

// No valid move
FocusGuide.PreferredFocusedView = null;

Uso dello stato attivo nelle raccolte

Quando si decide se un singolo elemento può essere attivo in o UICollectionView in un UITableViewoggetto , si eseguirà l'override dei metodi di UICollectionViewDelegate o UITableViewDelegate rispettivamente. Ad esempio:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

Il CanFocusItem metodo restituisce true se l'elemento corrente può trovarsi nello stato attivo, altrimenti restituisce false.

Se si desidera UICollectionViewUITableView ricordare e ripristinare lo stato attivo sull'ultimo elemento quando perde e recupera lo stato attivo, impostare la RemembersLastFocusedIndexPath proprietà su true.

Messa a fuoco e parallasse

Come indicato in precedenza, un elemento dell'interfaccia utente viene considerato attivo quando è l'elemento corrente durante un evento di spostamento. In genere, quando un elemento entra in stato attivo, le dimensioni sono leggermente aumentate ed è visivamente elevato usando un'ombreggiatura.

Se l'utente esegue un movimento lento e circolare sul telecomando Siri, l'elemento con stato attivo scorrerà in tempo reale in risposta a questo movimento. Man mano che si verifica lo sway, viene applicata una sheen illuminata alla sua immagine che rende la superficie sembra brillare. Dopo una determinata quantità di inattività, qualsiasi contenuto con stato non attivo aumenta e l'elemento con stato attivo crescerà ancora di più.

Questi effetti interagiscono per fornire una connessione mentale tra il contenuto sullo schermo della TV e l'utente che interagisce con Apple TV dal divano.

In Apple TV, questo effetto Parallasse viene usato in tutto il sistema per trasmettere un senso di profondità e dinamica 3D agli elementi con stato attivo. tvOS usa una serie di immagini trasparenti e a più livelli che si sposta e ridimensiona in modo dinamico per creare questo effetto.

Le immagini a più livelli sono necessarie per l'icona dell'app tvOS ed è supportata per il contenuto dinamico top shelf. Anche se non richiesto, Apple suggerisce vivamente di implementare immagini a più livelli in qualsiasi altro elemento attivabile nell'interfaccia utente dell'app.

Abilitazione di Parallasse

Il UIImageView controllo (o qualsiasi controllo che eredita da UIImageView) supporta automaticamente l'effetto Parallax. Per impostazione predefinita, questo supporto è disabilitato, per abilitarlo, usare il codice seguente:

myImageView.AdjustsImageWhenAncestorFocused = true;

Con questa proprietà impostata su true, la visualizzazione immagini otterrà automaticamente l'effetto Parallasse quando viene selezionato dall'utente e in stato attivo.

Riepilogo

Questo articolo ha illustrato il concetto di stato attivo e come viene usato per gestire la navigazione nell'interfaccia utente di un'app Xamarin.tvOS. Esamina il modo in cui i controlli di spostamento tvOS predefiniti usano lo stato attivo, l'evidenziazione e la selezione per fornire la navigazione. Successivamente, è stato esaminato come usare lo stato attivo con parallasse e immagini a più livelli per fornire indizi visivi per lo stato di spostamento corrente all'utente finale. Infine, ha esaminato l'uso di Focus, Focus Aggiornamenti, Focus in Collections e Enabling Parallax.