Implementierung eines Dunkelmodus für native mobile Apps
Heutzutage verfügen die meisten Mobiltelefone über eine integrierte Funktion, mit der der Benutzer zwischen Hell- und Dunkelmodus wechseln kann. Wenn sich das Telefon des Benutzers bereits im Dunkelmodus befindet, es aber eine App gibt, die nicht angepasst werden kann und im Hellmodus hell leuchtet, wird dies das Gesamterlebnis des Benutzers bei der Verwendung der App beeinträchtigen. Aus diesem Grund ist es wichtig zu wissen, wie man einen Dunkelmodus für native mobile Apps implementiert.
Glücklicherweise mit Mendix, der Vorgang ist unkompliziert, da ein Großteil des Codes bereits im Hintergrund erstellt wurde.
Bitte beachten Sie, dass dieses Tutorial auf einer nativen App basiert, die erstellt wurde in Mendix Modeller-Version 9.20. In anderen Versionen können die Dinge anders sein.
Worum es in diesem Beitrag geht
In diesem Beitrag werden wir erklären, wie man einen dunklen Modus erstellt für Mendix native mobile Apps. Das Endergebnis ist, dass die App je nach den mobilen Einstellungen des Benutzers automatisch in einen dunklen (oder hellen) Modus wechselt. Wenn sich das Telefon des Benutzers bereits im dunklen Modus befindet, wird die App im dunklen Modus angezeigt und umgekehrt.
Worum es in diesem Beitrag geht NICHT Über Uns
Bitte beachten Sie, dass dieser Beitrag KEIN Tutorial zum Erstellen eines Umschalters zwischen einem hellen und einem dunklen Modus ist. (Weitere Informationen dazu finden Sie hier: So implementieren Sie den Dunkelmodus in Ihren Apps) Heute möchten wir herausfinden, wie Sie Ihre App automatisch in den Dunkelmodus wechseln lassen, wenn sich das Telefon des Benutzers im Dunkelmodus befindet.
Benutzerhandbuch
Schritt 1: Erstellen Sie ein benutzerdefiniertes Designmodul
Beim Erstellen eines benutzerdefinierten Designmoduls wird eine ähnliche Methode verwendet wie beim Erstellen eines benutzerdefinierten Designmoduls für Webanwendungen. Klicken Sie mit der rechten Maustaste in den App-Explorer und wählen Sie „Modul hinzufügen“.
Stellen Sie sicher, dass Sie es auf eine erkennbare Weise umbenennen. Wenn Ihre Marke beispielsweise „Smith Company“ heißt, kann das Themenmodul etwa „smith_theme“ lauten. Im Beispiel habe ich mein Modul in „sampleapp_theme“ umbenannt.
Wir sollten dieses Modul auch als UI-Ressourcenmodul markieren. Klicken Sie mit der rechten Maustaste auf das Modul und wählen Sie „Dies als UI-Ressourcenmodul markieren“. Dadurch sollte das Modul grün werden.
Durch die Kennzeichnung als UI-Ressourcenmodul kann das Team die benutzerdefinierte Formatierung schneller finden.
Das Erstellen eines benutzerdefinierten Designmoduls ist eine effektive Methode, um alle Stilelemente einer bestimmten Marke an einem Ort zu gruppieren. Wenn Sie dasselbe Designelement in einer anderen App dieser Marke wiederverwenden müssen, können Sie das benutzerdefinierte Designmodul einfach exportieren und in Ihre neue App importieren.
In nativen mobilen Apps werden benutzerdefinierte Klassen zu „main.js“ in Ihrem benutzerdefinierten Designmodul hinzugefügt. Dieses befindet sich unter: themesource > [Ihr benutzerdefiniertes Designmodul] > main.js
Hier werden wir auch die Dunkelmodus-Funktionalität hinzufügen.
Schritt 2: Fügen Sie das zum Erstellen eines Dunkelmodus erforderliche Modul hinzu
Um einen Dunkelmodus für die App zu erstellen, müssen wir der Datei „main.js“ zwei Dinge hinzufügen.
Zuerst müssen wir das Modul „Darstellung“ oben in der Datei hinzufügen. Durch das Hinzufügen dieses Moduls können wir das bevorzugte Farbschema der App festlegen. (Weitere Informationen zum „Darstellungsstil“ finden Sie unter diesem Link: https://reactnative.dev/docs/appearance).
Zweitens müssen wir eine „darkMode“-Variable hinzufügen. Dies ist erforderlich, bevor wir eine Dark-Mode-Version für bestimmte Komponenten in der App implementieren können. Der Code sieht folgendermaßen aus:
Schritt 3: Testen Sie es
In diesem Beispiel habe ich einen Registerkartencontainer mit etwas Text und Bildern erstellt:
Wenn wir die App jetzt ausführen, sieht sie folgendermaßen aus:
Hinweis: So sieht die App derzeit sowohl im Hellmodus als auch im Dunkelmodus aus.
Geben wir dem Tab-Container eine Klasse. Doppelklicken Sie auf den Tab-Container, gehen Sie zu „Darstellung“ und geben Sie ihm eine Klasse. In diesem Beispiel ist meine Klasse „sampleTab“:
Hinweis: Die Klasse muss in Camel Case angegeben werden (der erste Buchstabe des ersten Wortes ist klein geschrieben und der erste Buchstabe der nachfolgenden Wörter ist groß geschrieben).
Lassen Sie uns in der Datei „main.js“ die Hintergrundfarbe der Registerkarte, des Indikators (also der Unterstreichung der ausgewählten Registerkarte), der Beschriftung und der aktiven Beschriftung ändern:
Wie im Kommentar in Zeile 8 gezeigt, besteht das Format zum Hinzufügen eines alternativen Stils für den Dunkelmodus darin, der Eigenschaft der Variablen darkmode ? [dunkler Modus] : [heller Modus] hinzuzufügen.
Speichern Sie alles und führen Sie das Projekt aus.
Ergebnisse
Dies ist das Ergebnis im Lichtmodus:
Dies ist das Ergebnis im Dunkelmodus:
Sie können ruhig mit der Farbe und dem Kontrast im Hell- und Dunkelmodus experimentieren. Hier ist eine schickere Version der App zu Ihrer Information.
Lichtmodus:
Hinweis: Das Buchbild ist meine eigene Kreation.
Dunkler Modus:
Hinweis: Das Buchbild ist meine eigene Kreation.
Die Projektdatei für die schickere Version, inklusive des App-Layouts auf dem Studio Pro-Modeller und des Codes, kann hier heruntergeladen werden: https://www.mendix.com/wp-content/uploads/DarkModeSampleApp-2.mpk_.zip
Vielen Dank fürs Lernen und ich hoffe, Ihnen hat dieses Tutorial gefallen!