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:
Doppelklicken Sie im Projektmappen-Explorer auf die Datei
Info.plist
, um sie zur Bearbeitung zu öffnen.Wählen Sie die Quellansicht (vom unteren Rand des Editors) aus.
Fügen Sie einen neuen Schlüssel hinzu, und rufen Sie ihn
UIUserInterfaceStyle
auf:Lassen Sie den Typ auf und
String
geben Sie einen Wert vonAutomatic
: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
.
UILabel
UITextView
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
gegebenenUITraitCollection
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 einerUIView
oderUIViewController
einer Klasse überschrieben wird.
Wichtig
Die Xamarin.tvOS Early Preview für tvOS 10 unterstützt noch nicht vollständig UIUserInterfaceStyle
UITraitCollection
. 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 UIUserInterfaceStyle
UITraitCollection
, 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:
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Storyboarddatei, und wählen Sie "Mit>Xcode-Schnittstellen-Generator öffnen" aus:
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":
Bestätigen Sie die Änderung für die Verwendung von Trait-Variationen:
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:
Der Entwickler kann eine Vorschau eines UI-Designs im Hellen oder dunklen Design im Schnittstellen-Generator anzeigen:
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.