Erstellen Sie mobile Anwendungen, die automatisch den Dark Mode unterstützen

Android- und Apple-Mobilgeräte unterstützen eine Anzeigemodusoption namens "Dunkelmodus", die man sich als eine Art Negativbild des normalen Bildschirmbilds vorstellen kann. Im Dunkelmodus ist Weiß schwarz, Schwarz ist weiß, und die Farbintensität wird insgesamt angepasst. Der Dunkelmodus reduziert den Stromverbrauch, was die Akkulaufzeit verlängern kann, und kann bei schlechten Lichtverhältnissen angenehmer zu lesen sein.

Altova MobileTogether bietet Funktionen, mit denen Entwickler mobile Anwendungen erstellen können, die automatisch den Dunkelmodus unterstützen, indem sie die Benutzereinstellung beim Start der App erkennen.

Schauen wir uns ein Beispiel an:

Im Folgenden sind zwei Ansichten einer mobilen App dargestellt, die auf demselben mobilen Gerät ausgeführt wird, einmal im hellen Design und einmal im dunklen Design.

Diese App ermöglicht es Nutzern, die Stromerzeugung von Solaranlagen und den Stromverbrauch anhand von Messwerteingaben zu erfassen und erstellt Diagramme, um die Daten zu veranschaulichen und den Überschuss im Laufe der Zeit zu verfolgen.

Viele Wohngebäude-Solaranlagen sind an das öffentliche Stromnetz angeschlossen und nutzen ein System der Nettoverrechnung. Die auf dem Dach installierten Solarmodule liefern Strom für das Haus nur dann, wenn die Sonne scheint. Strom wird nachts oder immer dann aus dem Netz bezogen, wenn der Bedarf die erzeugte Menge übersteigt. Wenn das System mehr Strom erzeugt als das Haus verbraucht, wird der Überschuss ins Netz eingespeist und trägt so zur Kapazität der Energieversorung bei.

Altova MobileTogether erleichtert mobilen Entwicklern die Erstellung von plattformübergreifenden mobilen Anwendungen mit dem MobileTogether Designer. Dieser kombiniert benutzerfreundliche Oberflächengestaltungswerkzeuge per Drag-and-Drop, die leistungsstarke visuelle Programmiersprache Action Tree zur Ereignisverarbeitung sowie standardisierte funktionale Programmierung für die Datenauswahl und -verarbeitung.

Jedes Element der App ist hochgradig anpassbar, aber standardmäßig werden Elemente wie Farben für Text, Schaltflächen, Regeln, Rahmen und sogar Fensterhintergründe mit den Systemeinstellungen für jedes Gerät verwendet. Der MobileTogether Designer enthält ein Hilfefenster für Stile, in dem Entwickler globale Projekteinstellungen festlegen können, einschließlich einer Einstellung für ein helles oder dunkles Design.

Die Optionen für die Gestaltung des Designs sind: "Systemeinstellungen verwenden", "Hellmodus erzwingen" oder "Dunkelmodus erzwingen". Die Standardeinstellung ist "Systemeinstellungen verwenden", sodass Entwickler den Dunkelmodus automatisch unterstützen können, ohne spezielle Maßnahmen ergreifen zu müssen.

Automatische Unterstützung für den Dark Mode bei Diagrammen mit benutzerdefinierten Farben

Einige Elemente benötigen möglicherweise benutzerdefinierte Farbeinstellungen, und Entwickler können alternative Farbvarianten für den hellen und den dunklen Modus festlegen. Der erste Schritt besteht darin, festzustellen, welche Benutzereinstellung aktiv ist.

MobileTogether enthält globale Variablen, die es Entwicklern ermöglichen, die Einstellungen des verwendeten Geräts zur Laufzeit zu erkennen und entsprechende Aktionen basierend auf den Funktionen des Geräts zu programmieren. Der Dialog "Globale Variablen" im MobileTogether Designer listet alle globalen Variablen und deren Werte für das ausgewählte Simulationsgerät auf.

Die Standard-Hintergrundfarbe für die Anzeige auf einem bestimmten Android-Gerät ist oben hervorgehoben. Dieser Wert ändert sich, wenn das Gerät im Dunkelmodus verwendet wird. Ein niedrigerer Hexadezimalwert bedeutet einen dunkleren Farbton, während ein höherer Wert einen helleren Farbton anzeigt.

Der Hexadezimalwert #808080 entspricht dem Farbton 50 % Grau. Wir können einen XPath-Ausdruck erstellen, um den Wert zur Laufzeit zu überprüfen. Wir können davon ausgehen, dass jede Standardhintergrundfarbe, die dunkler als 50 % Grau ist, darauf hindeutet, dass das Gerät im Dunkelmodus (Dark Theme) verwendet wird. Der XPath-Evaluator im Fenster zur Designsimulation ist ein nützliches Werkzeug, um die genaue Syntax des Ausdrucks zu ermitteln:

Dieser Ausdruck wandelt die Hexadezimalzeichenkette in eine Ganzzahl um, vergleicht sie mit dem Wert für 50 % Grau und wählt basierend auf dem Ergebnis den Zeichenkettenwert für Schwarz oder Weiß aus. Dies ist ein nützlicher Ausdruck, um automatisch eine Textfarbe für ein helles oder dunkles Design auszuwählen. Lassen Sie uns ihn in einer benutzerdefinierten Funktion anwenden:

MobileTogether bietet Funktionen, die die einfache Bedienung ermöglichen Erstellen Sie aussagekräftige Diagramme und Grafiken die auf allen Plattformen das gleiche Aussehen haben. Die im oberen Bereich gezeigte Beispielanwendung "Solar Tool" verwendet ein Balkendiagramm, um die tägliche Solarstromerzeugung darzustellen, überlagert auf einem Flächendiagramm, das den Stromverbrauch anzeigt. Entwickler wählen die Einstellungen für diese Diagramme in einer Reihe von Dialogfenstern zur Diagrammerstellung aus, wie beispielsweise dem hier gezeigten Dialogfenster "Erscheinungsbild ändern":

Viele dieser Dialoge legen Farben fest, wie beispielsweise die Hintergrundfarbe und die Rahmenfarbe in diesem Beispiel. Wir haben jedoch die vollständige Kontrolle, um diese Standardeinstellungen anhand von dynamischen XPath-Einstellungen zu überschreiben, die zur Laufzeit auf dem Client-Gerät ausgewertet werden.

Durch Klicken auf diesen Button öffnet sich ein Dialogfenster, in dem Sie für jedes Element des Diagramms einen XPath-Wert oder eine XPath-Ausdruck festlegen können. Im folgenden Bild haben wir die Werte für alle Elemente festgelegt, die im Dialogfenster "Diagrammeinstellungen" entweder als schwarz oder weiß definiert sind. Wir haben die ursprünglich weißen Elemente als Standardhintergrundfarbe festgelegt und die schwarzen Elemente, wie Text und Rahmen, so konfiguriert, dass sie unsere Funktion "AutoTextColor()" verwenden.

Wir haben andere Elemente, wie beispielsweise die Rasterlinien für jede Achse, in den Einstellungen für die Erstellung so eingestellt, dass sie einen hellgrauen Farbton haben, der sowohl für das helle als auch für das dunkle Design geeignet ist. Für jede Ebene jedes Diagramms gibt es einen separaten Dialog für die dynamischen XPath-Einstellungen, aber sobald diese alle angepasst wurden, ist das erledigt. Die Diagramme werden dann automatisch korrekt für das helle und das dunkle Design erstellt.

Hier ist ein Android-Smartphone, das die Diagramme für den kumulierten Überschuss sowohl im dunklen als auch im hellen Designmodus anzeigt:

Wenn Sie benutzerfreundliche mobile Anwendungen erstellen möchten, die automatisch den Dunkelmodus basierend auf den Benutzereinstellungen unterstützen, laden Sie einfach den kostenlosen MobileTogether Designer herunter. Besuchen Sie außerdem die Seite MobileTogether Demos mit Links zu Videos, Tutorials und weiteren Demo-Anwendungen.