Stili dell'interfaccia utente tvOS in Xamarin

Questo articolo illustra i temi dell'interfaccia utente chiaro e scuro aggiunti da Apple a tvOS 10 e come implementarli in un'app Xamarin.tvOS.

tvOS 10 supporta ora sia un tema dell'interfaccia utente scuro che tutti i controlli UIKit di compilazione si adatteranno automaticamente, in base alle preferenze dell'utente. Inoltre, lo sviluppatore può regolare manualmente gli elementi dell'interfaccia utente in base al tema selezionato dall'utente e può eseguire l'override di un determinato tema.

Informazioni sui nuovi stili dell'interfaccia utente

Come indicato in precedenza, tvOS 10 ora supporta sia un tema dell'interfaccia utente scuro che tutti i controlli UIKit di compilazione si adatteranno automaticamente, in base alle preferenze dell'utente.

L'utente può cambiare questo tema passando a Impostazioni> Generale>Aspetto e passando da Chiaro a Scuro:

Quando si seleziona il tema Scuro , tutti gli elementi dell'interfaccia utente passeranno al testo chiaro su uno sfondo scuro:

L'utente ha la possibilità di cambiare il tema in qualsiasi momento e potrebbe farlo in base all'attività corrente, in cui si trova Apple TV o l'ora del giorno.

Il tema dell'interfaccia utente chiaro è il tema predefinito e tutte le app tvOS esistenti useranno comunque il tema Chiaro, indipendentemente dalle preferenze dell'utente, a meno che non vengano modificate per tvOS 10 per sfruttare il tema Scuro. Un'app tvOS 10 ha anche la possibilità di eseguire l'override del tema corrente e di usare sempre il tema Chiaro o Scuro per alcuni o per tutta l'interfaccia utente.

Adozione dei temi chiaro e scuro

Per supportare questa funzionalità, Apple ha aggiunto una nuova API alla UITraitCollection classe e un'app tvOS deve acconsentire esplicitamente per supportare l'aspetto Scuro (tramite un'impostazione nel file Info.plist ).

Per acconsentire esplicitamente al supporto del tema Chiaro e Scuro, eseguire le operazioni seguenti:

1. In Esplora soluzioni fare doppio clic sul file Info.plist per aprirlo e modificarlo.

2. Selezionare la visualizzazione Origine (nella parte inferiore dell'editor).

3. Aggiungere una nuova chiave e chiamarla UIUserInterfaceStyle:

   

4. Lasciare il tipo impostato su String e immettere un valore di Automatic:

   

5. Salvare le modifiche apportate al file.

Per la UIUserInterfaceStyle chiave sono disponibili tre valori possibili:

• Luce : forza l'interfaccia utente dell'app tvOS a usare sempre il tema Chiaro.
• Scuro : forza l'interfaccia utente dell'app tvOS a usare sempre il tema scuro.
• Automatico: passa dal tema chiaro al tema scuro in base alle preferenze dell'utente in Impostazioni. Questa è l'impostazione preferita.

Supporto dei temi UIKit

Se un'app tvOS usa controlli basati su standard e predefiniti UIView , risponderà automaticamente al tema dell'interfaccia utente senza alcun intervento da parte dello sviluppatore.

Inoltre, UILabel e UITextView cambierà automaticamente il colore in base al tema dell'interfaccia utente selezionato:

• Il testo sarà nero nel tema Chiaro.
• Il testo sarà bianco nel tema Scuro.

Se lo sviluppatore modifica manualmente il colore del testo (nello Storyboard o nel codice), sarà responsabile della gestione delle modifiche dei colori in base al tema dell'interfaccia utente.

Nuovi effetti sfocatura

Per supportare i temi chiaro e scuro in un'app tvOS 10, Apple ha aggiunto due nuovi effetti sfocatura. Questi nuovi effetti regolano automaticamente la sfocatura in base al tema dell'interfaccia utente selezionato dall'utente come indicato di seguito:

• UIBlurEffectStyleRegular - Usa una sfocatura chiara nel tema Chiaro e una sfocatura scura nel tema Scuro.
• UIBlurEffectStyleProminent - Usa una sfocatura extra chiaro nel tema Chiaro e una sfocatura extra-scura nel tema Scuro.

Uso delle raccolte di tratti

La nuova UserInterfaceStyle proprietà della UITraitCollection classe può essere usata per ottenere il tema dell'interfaccia utente attualmente selezionato e sarà un'enumerazione UIUserInterfaceStyle di uno dei valori seguenti:

• Chiaro : il tema dell'interfaccia utente chiaro è selezionato.
• Scuro : il tema dell'interfaccia utente scuro è selezionato.
• Non specificato : la visualizzazione non è ancora stata visualizzata sullo schermo, quindi il tema dell'interfaccia utente corrente è sconosciuto.

Inoltre, Le raccolte di tratti hanno le funzionalità seguenti in tvOS 10:

• Il proxy aspetto può essere personalizzato in base all'oggetto UserInterfaceStyle di un dato UITraitCollection per modificare elementi come immagini o colori di elemento in base al tema.
• Un'app tvOS può gestire le modifiche alla raccolta dei tratti eseguendo l'override del TraitCollectionDidChange metodo di una UIView classe o UIViewController .

Personalizzazione dell'aspetto in base al tema

Per gli elementi dell'interfaccia utente che supportano il proxy di aspetto, l'aspetto può essere modificato in base al tema dell'interfaccia utente della raccolta dei tratti. Quindi, per un determinato elemento dell'interfaccia utente, lo sviluppatore può specificare un colore per il tema Chiaro e un altro colore per il tema Scuro.

button.SetTitleColor (UIColor.Red, UIControlState.Normal);

// TODO - Pseudocode because this isn't currently supported in the preview bindings.
var light = new UITraitCollection(UIUserInterfaceStyle.Light);
var dark = new UITraitCollection(UIUserInterfaceStyle.Dark);

button.ForTraitCollection(light).SetTitleColor (UIColor.Red, UIControlState.Normal);
button.ForTraitCollection(dark).SetTitleColor (UIColor.White, UIControlState.Normal);

Risposta diretta alle modifiche del tema

Lo sviluppatore richiede un controllo più approfondito sull'aspetto di un elemento dell'interfaccia utente in base al tema dell'interfaccia utente selezionato, può eseguire l'override del TraitCollectionDidChange metodo di una UIView classe o UIViewController .

Ad esempio:

public override void TraitCollectionDidChange (UITraitCollection previousTraitCollection)
{
    base.TraitCollectionDidChange (previousTraitCollection);

    // Take action based on the Light or Dark theme
    ...
}

Override di una raccolta di tratti

In base alla progettazione di un'app tvOS, potrebbe verificarsi un momento in cui lo sviluppatore deve eseguire l'override della raccolta di tratti di un determinato elemento dell'interfaccia utente e di usare sempre un tema specifico dell'interfaccia utente.

Questa operazione può essere eseguita usando il SetOverrideTraitCollection metodo nella UIViewController classe . Ad esempio:

// Create new trait and configure it
var trait = new UITraitCollection ();
...

// Apply new trait collection
SetOverrideTraitCollection (trait, this);

Per altre informazioni, vedere le sezioni Tratti e tratti di override della documentazione introduttiva agli storyboard unificati.

Raccolte di tratti e storyboard

In tvOS 10, lo storyboard di un'app può essere impostato per rispondere alle raccolte di tratti e molti elementi dell'interfaccia utente possono essere resi consapevoli di tema chiaro e scuro. L'anteprima anticipata di Xamarin.tvOS corrente per tvOS 10 non supporta ancora questa funzionalità in Interface Designer, quindi lo Storyboard dovrà essere modificato in Interface Builder di Xcode come soluzione alternativa.

Per abilitare il supporto di Trait Collection, eseguire le operazioni seguenti:

1. Fare clic con il pulsante destro del mouse sul file Storyboard nel Esplora soluzioni e scegliere Apri con>Xcode Interface Builder:

   

2. Per abilitare il supporto di Trait Collection, passare a Controllo file e selezionare la proprietà Use Trait Variations (Usa varianti di tratto) nella sezione Interface Builder Document (Documento di Interface Builder):

   

3. Confermare la modifica per usare varianti di tratto:

   

4. Salvare le modifiche apportate al file Storyboard.

Apple ha aggiunto le funzionalità seguenti durante la modifica di storyboard tvOS in Interface Builder:

• Lo sviluppatore può specificare diverse varianti degli elementi dell'interfaccia utente in base al tema dell'interfaccia utente in Controllo attributi:

  • Accanto a diverse proprietà è ora + possibile fare clic su di esse per aggiungere una versione specifica del tema dell'interfaccia utente:

    

  • Lo sviluppatore può specificare una nuova proprietà o fare clic sul pulsante x per rimuoverlo:

    

• Lo sviluppatore può visualizzare in anteprima una progettazione dell'interfaccia utente nel tema Chiaro o Scuro all'interno di Interface Builder:

  • La parte inferiore dell'area di progettazione consente allo sviluppatore di cambiare il tema corrente dell'interfaccia utente:

    

  • Il nuovo tema verrà visualizzato in Interface Builder e verranno visualizzate le modifiche specifiche della raccolta dei tratti:

    

Inoltre, il simulatore tvOS ora ha una scelta rapida da tastiera per consentire allo sviluppatore di passare rapidamente tra i temi Chiaro e Scuro durante il debug di un'app tvOS. Usare la sequenza di tastiera Command-Shift-D per passare da Chiaro a Scuro.

Riepilogo

Questo articolo ha illustrato i temi dell'interfaccia utente chiaro e scuro aggiunti da Apple a tvOS 10 e come implementarli in un'app Xamarin.tvOS.

Collegamenti correlati

• Novità di tvOS 10