Dark Mode in iOS 13 – Teil 3

Dynamic Colors im Code erzeugen

Im zweiten Teil dieser Artikelreihe zum Dark Mode in iOS 13 bzw. iPadOS 13 habt ihr Details zu den Dynamic Colors erhalten und erfahren, wie ihr solche mithilfe von Asset Catalogs erstellt. In diesem Teil knüpfe ich daran an und zeige euch, wie ihr alternativ Dynamic Colors auch über den Code erzeugen könnt. Basis hierfür ist ein neuer Initizaler der Klasse UIColor. Werfen wir einen Blick darauf!

Warum und wann man Dynamic Colors im Code erzeugen sollte

Vorab möchte ich mich zunächst aber erst einmal allgemein der Frage widmen, wann und warum man Dynamic Colors statt über einen Asset Catalog dynamisch im Code erzeugen sollte. Generell bietet sich dieses Vorgehen immer dann an, wenn man eine bestimmte Dynamic Color nur ein einziges Mal für eine bestimmte View benötigt. Die dann extra in einem Asset Catalog zu pflegen, ist möglicherweise zu viel des Guten. Das gilt insbesondere dann, wenn in einem Asset Catalog spezifische Bilder und Farben definiert sind, zu denen die benötigte Dynamic Color nicht passt. Das könnte beispielsweise der Fall sein, falls man in einem Asset Catalog ausschließlich für eine App konzipierte Grafiken hinterlegt und man eine Dynamic Color für den Systemstatus eines Buttons benötigt; beides passt nicht unbedingt zusammen und sollte daher womöglich auch nicht in einem gemeinsamen Asset Catalog untergebracht werden.

Ein anderer möglicher Einsatzzweck für im Code erzeugte Dynamic Colors kommt zum Tragen, falls man eine solche rein für eine einzelne View benötigt, die darüber hinaus Teil eines von einer App unabhängigen Moduls ist. Für solche Einzelfälle extra einen Asset Catalog zu nutzen, „nur“ um darin ein paar einzelne Dynamic Colors unterzubringen, ist eventuell nicht nötig und lässt sich komfortabler über den Code lösen.

Darüber hinaus spricht im Allgemeinen nichts dagegen, eine Sammlung von Dynamic Colors, die innerhalb eines Projekts benötigt werden, zum Beispiel als Static Properties in einer Swift-Datei zu hinterlegen. Das ist ähnlich übersichtlich wie das Definieren von Dynamic Colors innerhalb eines Asset Catalogs.

Generell gilt: Sowohl das Erstellen von Dynamic Colors in Asset Catalogs als auch im Code stellen beide sinnvolle und komfortable Techniken dar.

Dynamic Color im Code erzeugen

Nun aber zum eigentlichen Kern dieses Artikels: dem Erzeugen von Dynamic Colors im Code. Zu diesem Zweck nutzt man den neuen Initializer init(dynamicProvider:) der UIColor-Klasse. Der erwartet als Parameter ein Closure, das uns eine UITraitCollection-Instanz als Parameter zur Verfügung stellt und eine Farbe als Rückgabewert erwartet.

Was ein wenig kompliziert klingt, ist im Kern recht simpel: Man nutzt den UITraitCollection-Parameter, um zu ermitteln, welches Erscheinungsbild auf dem Endgerät zum Einsatz kommt (sprich Light oder Dark Mode). Dazu nutzt man die userInterfaceStyle-Property. Die entspricht light für den Light Mode und dark für den Dark Mode. Abhängig von dieser Information liefert man dann die gewünschte Farbe zurück.

Das folgende Listing zeigt ein Beispiel dazu. Darin wird eine Dynamic Color im Stile der System Background Color erzeugt. Ist der Dark Mode aktiv, liefert sie schwarz zurück, andernfalls weiß. Diese Dynamic Color wird in einer Konstanten namens myBackgroundColor gespeichert und kann so darüber genutzt werden.

let myBackgroundColor = UIColor(dynamicProvider: { (traitCollection) -> UIColor in
	if traitCollection.userInterfaceStyle == .dark {
		return .black
	}
	return .white
})

Fazit

Dynamic Colors im Code zu erzeugen ist ein sehr praktisches Feature und lässt sich dank des neuen init(dynamicProvider:)-Initializers der UIColor-Klasse komfortabel nutzen. Es ist eine sinnvolle Alternative zum Erstellen von Dynamic Colors in Asset Catalogs. Beide Verfahren lassen sich problemlos auch parallel innerhalb eines Projekts einsetzen.

Euer Thomas