tvOS-Benutzeroberflächenstile in Xamarin

In diesem Artikel werden die Hellen und dunklen UI-Designs behandelt, die Apple zu tvOS 10 hinzugefügt hat und wie sie in einer Xamarin.tvOS-App implementiert werden.

tvOS 10 unterstützt jetzt sowohl ein Dunkles als auch ein helles Benutzeroberflächendesign, an das sich alle Build-In-UIKit-Steuerelemente basierend auf den Einstellungen des Benutzers automatisch anpassen. Darüber hinaus kann der Entwickler UI-Elemente basierend auf dem design, das der Benutzer ausgewählt hat, manuell anpassen und ein bestimmtes Design überschreiben.

Informationen zu den neuen Benutzeroberflächenformatvorlagen

Wie oben erwähnt, unterstützt tvOS 10 jetzt sowohl ein Dunkles als auch ein helles Benutzeroberflächendesign, an das sich alle build-in UIKit-Steuerelemente basierend auf den Einstellungen des Benutzers automatisch anpassen.

Der Benutzer kann dieses Design wechseln, indem er zu Einstellungen> Generale>Darstellung wechselt und zwischen Hell und Dunkel wechselt:

Wenn das Design "Dunkel " ausgewählt ist, wechseln alle Elemente der Benutzeroberfläche zu hellem Text auf einem dunklen Hintergrund:

Der Benutzer hat die Möglichkeit, das Design jederzeit zu wechseln und kann dies basierend auf der aktuellen Aktivität tun, in der sich das Apple TV befindet oder die Tageszeit.

Das Helle UI-Design ist das Standarddesign, und alle vorhandenen tvOS-Apps verwenden weiterhin das Helle Design, unabhängig von den Einstellungen des Benutzers, es sei denn, sie werden für tvOS 10 geändert, um das dunkle Design zu nutzen. Eine tvOS 10-App verfügt auch über die Möglichkeit, das aktuelle Design außer Kraft zu setzen und immer das Helle oder dunkle Design für einige oder alle Ui-Elemente zu verwenden.

Übernehmen der hellen und dunklen Designs

Um dieses Feature zu unterstützen, hat Apple der UITraitCollection Klasse eine neue API hinzugefügt, und eine tvOS-App muss sich anmelden, um das dunkle Erscheinungsbild (über eine Einstellung in der Info.plist Datei) zu unterstützen.

Gehen Sie wie folgt vor, um die Unterstützung für helles und dunkles Design zu aktivieren:

1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei Info.plist, um sie zur Bearbeitung zu öffnen.

2. Wählen Sie die Quellansicht (vom unteren Rand des Editors) aus.

3. Fügen Sie einen neuen Schlüssel hinzu, und rufen Sie ihn UIUserInterfaceStyleauf:

   

4. Lassen Sie den Typ auf und String geben Sie einen Wert von Automatic:

   

5. Speichern Sie die Änderungen in der Datei.

Für den UIUserInterfaceStyle Schlüssel gibt es drei mögliche Werte:

• Hell – Erzwingt die UI der tvOS-App, immer das Helle Design zu verwenden.
• Dunkel – Erzwingt die UI der tvOS-App, immer das dunkle Design zu verwenden.
• Automatisch – Wechselt basierend auf den Einstellungen des Benutzers in Einstellungen zwischen hellem und dunklem Design. Dies ist die bevorzugte Einstellung.

UIKit-Designunterstützung

Wenn eine tvOS-App standardmäßige, integrierte Steuerelemente verwendet, reagiert sie automatisch ohne Entwicklereingriff auf das UI-Design UIView .

UILabelUITextView Darüber hinaus wird ihre Farbe basierend auf dem ausgewählten UI-Design automatisch geändert:

• Der Text wird im Design "Hell" schwarz angezeigt.
• Der Text ist im Design "Dunkel" weiß.

Wenn der Entwickler die Textfarbe manuell ändert (entweder im Storyboard oder Code), ist er für die Behandlung von Farbänderungen basierend auf dem Ui-Design verantwortlich.

Neue Weichzeichnereffekte

Für die Unterstützung der Hellen und dunklen Designs in einer tvOS 10-App hat Apple zwei neue Weichzeichnereffekte hinzugefügt. Diese neuen Effekte passen den Weichzeichner automatisch basierend auf dem Benutzeroberflächendesign an, das der Benutzer wie folgt ausgewählt hat:

• UIBlurEffectStyleRegular - Verwendet einen hellen Weichzeichner im hellen Design und einen dunklen Weichzeichner im dunklen Design.
• UIBlurEffectStyleProminent - Verwendet einen extra hellen Weichzeichner im hellen Design und einen zusätzlichen dunklen Weichzeichner im dunklen Design.

Arbeiten mit Trait Collections

Die neue UserInterfaceStyle Eigenschaft der UITraitCollection Klasse kann verwendet werden, um das aktuell ausgewählte UI-Design abzurufen und eine Enumeration von einem der folgenden Werte zu sein UIUserInterfaceStyle :

• Hell – Das Design "Light UI" ist ausgewählt.
• Dunkel – Das Design der dunklen Benutzeroberfläche ist ausgewählt.
• Nicht angegeben – Die Ansicht wurde noch nicht auf dem Bildschirm angezeigt, sodass das aktuelle UI-Design unbekannt ist.

Darüber hinaus verfügen Trait Collections über die folgenden Features in tvOS 10:

• Der Darstellungsproxy kann basierend auf dem UserInterfaceStyle gegebenen UITraitCollection Element angepasst werden, um Elemente wie Bilder oder Elementfarben basierend auf dem Design zu ändern.
• Eine tvOS-App kann Trait-Sammlungsänderungen behandeln, indem die TraitCollectionDidChange Methode einer UIView oder UIViewController einer Klasse überschrieben wird.

Wichtig

Die Xamarin.tvOS Early Preview für tvOS 10 unterstützt noch nicht vollständig UIUserInterfaceStyleUITraitCollection . Der vollständige Support wird in einer zukünftigen Version hinzugefügt.

Anpassen der Darstellung basierend auf dem Design

Für Benutzeroberflächenelemente, die den Darstellungsproxy unterstützen, kann ihre Darstellung basierend auf dem UI-Design ihrer Trait-Auflistung angepasst werden. Für ein bestimmtes UI-Element kann der Entwickler also eine Farbe für das helle Design und eine andere Farbe für das dunkle Design angeben.

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);

Wichtig

Leider wird die Xamarin.tvOS Preview für tvOS 10 nicht vollständig unterstützt UIUserInterfaceStyleUITraitCollection, sodass diese Art von Anpassung noch nicht verfügbar ist. Der vollständige Support wird in einer zukünftigen Version hinzugefügt.

Direktes Reagieren auf Designänderungen

Im Entwickler ist eine tiefere Kontrolle über das Erscheinungsbild eines UI-Elements basierend auf dem ausgewählten Ui-Design erforderlich. Sie können die TraitCollectionDidChange Methode einer UIView oder UIViewController einer Klasse außer Kraft setzen.

Zum Beispiel:

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

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

Überschreiben einer Trait-Auflistung

Basierend auf dem Design einer tvOS-App kann es vorkommen, dass der Entwickler die Trait-Sammlung eines bestimmten Benutzeroberflächenelements außer Kraft setzen muss und immer ein bestimmtes UI-Design verwendet.

Dies kann mithilfe der SetOverrideTraitCollection Methode für die UIViewController Klasse erfolgen. Zum Beispiel:

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

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

Weitere Informationen finden Sie in den Abschnitten "Traits and Overriding Traits" unserer Dokumentation "Einführung in Unified Storyboards ".

Trait-Sammlungen und Storyboards

In tvOS 10 kann das Storyboard einer App so eingestellt werden, dass sie auf Trait-Sammlungen reagiert, und viele UI-Elemente können hell und dunkel gestaltet werden. Die aktuelle Xamarin.tvOS Early Preview für tvOS 10 unterstützt dieses Feature im Interface Designer noch nicht, sodass das Storyboard im Schnittstellen-Generator von Xcode als Problemumgehung bearbeitet werden muss.

Gehen Sie wie folgt vor, um die Trait-Sammlungsunterstützung zu aktivieren:

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Storyboarddatei, und wählen Sie "Mit>Xcode-Schnittstellen-Generator öffnen" aus:

   

2. Um die Unterstützung der Trait-Auflistung zu aktivieren, wechseln Sie zum Dateiinspektor, und überprüfen Sie die Eigenschaft "Use Trait Variations" im Abschnitt "Interface Builder Document":

   

3. Bestätigen Sie die Änderung für die Verwendung von Trait-Variationen:

   

4. Speichern Sie die Änderungen in der Storyboarddatei.

Apple hat beim Bearbeiten von tvOS Storyboards im Schnittstellen-Generator die folgenden Funktionen hinzugefügt:

• Der Entwickler kann verschiedene Variationen von Benutzeroberflächenelementen basierend auf dem Benutzeroberflächendesign im Attributinspektor angeben:

  • Mehrere Eigenschaften verfügen jetzt über eine + neben ihnen, auf die geklickt werden kann, um eine spezifische Ui-Designversion hinzuzufügen:

    

  • Der Entwickler kann eine neue Eigenschaft angeben oder auf die Schaltfläche "x " klicken, um sie zu entfernen:

    

• Der Entwickler kann eine Vorschau eines UI-Designs im Hellen oder dunklen Design im Schnittstellen-Generator anzeigen:

  • Am unteren Rand des Design Surface kann der Entwickler das aktuelle Ui-Design wechseln:

    

  • Das neue Design wird im Schnittstellen-Generator angezeigt, und alle spezifischen Anpassungen der Trait-Auflistung werden angezeigt:

    

Darüber hinaus verfügt der tvOS Simulator jetzt über eine Tastenkombination, mit der der Entwickler beim Debuggen einer tvOS-App schnell zwischen den Designs "Hell" und "Dunkel" wechseln kann. Verwenden Sie die Befehls-Umschalt-D-Tastatursequenz , um zwischen Hell und Dunkel umzuschalten.

Zusammenfassung

In diesem Artikel wurden die Hellen und dunklen UI-Designs behandelt, die Apple tvOS 10 hinzugefügt hat und wie sie in einer Xamarin.tvOS-App implementiert werden.

Verwandte Links

• Neuerungen in tvOS 10