--- title: "Maak mobiele apps die automatisch de donkere modus ondersteunen" date: "2020-12-28" categories: - "app-development" - "mobile-development" tags: - "app-development" - "dark-theme" - "mobile-development-tools" - "mobiletogether" description: Ontdek hoe u mobiele apps kunt ontwikkelen die automatisch aanpassen aan het donkere thema met behulp van Altova MobileTogether. Verbeter de gebruikerservaring en optimaliseer het batterijverbruik op een effectieve manier. --- Status: #blog Tags: #app-development #dark-theme #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/nl/category/mobile-development.md) | [mobile-development](/blog/nl/category/mobile-development.md) # Maak mobiele apps die automatisch de donkere modus ondersteunen Android- en Apple-mobiele apparaten ondersteunen een weergaveoptie genaamd "Donkere modus", die je kunt zien als een soort omgekeerd beeld van de normale schermweergave. In de donkere modus is wit zwart, zwart is wit, en de intensiteit van de kleuren wordt over het algemeen aangepast. De donkere modus vermindert het energieverbruik, wat de batterijduur kan verlengen, en kan gemakkelijker te lezen zijn bij weinig licht. Altova MobileTogether bevat functies waarmee ontwikkelaars mobiele apps kunnen maken die automatisch de donkere modus ondersteunen. Dit gebeurt door de instellingen van de gebruiker te detecteren wanneer de app wordt gestart. Laten we eens een voorbeeld bekijken: ![](/blog/images/mt_darktheme_blog_1.jpg) Hieronder ziet u twee weergaven van een mobiele app die draait op hetzelfde mobiele apparaat, respectievelijk in de lichte en de donkere thema-instelling. [![Weergaven van dezelfde mobiele app, zowel in de lichte modus als in de donkere modus](/blog/images/image-1-1.png)](image-1-1.png) Deze app stelt gebruikers in staat om de energieopbrengst van zonnepanelen en het elektriciteitsverbruik bij te houden, op basis van meterstanden. Vervolgens genereert de app grafieken om de gegevens weer te geven en de overschotten in de loop van de tijd te volgen. Veel residentiële systemen voor zonne-energie zijn aangesloten op het elektriciteitsnet en werken volgens een systeem waarbij de afrekening gebaseerd is op het nettoverbruik. De zonnepanelen die op het dak zijn geïnstalleerd, leveren stroom aan het huis, maar alleen wanneer de zon schijnt. 's Nachts of wanneer de vraag naar elektriciteit groter is dan de productie, wordt de stroom van het elektriciteitsnet onttrokken. Wanneer het systeem meer elektriciteit produceert dan het huis verbruikt, wordt het overtollige teruggeleverd aan het net en draagt het bij aan de totale productiecapaciteit van het elektriciteitsbedrijf. Altova MobileTogether maakt het voor mobiele ontwikkelaars eenvoudig om [mobiele applicaties te maken die op verschillende platforms werken,](https://www.altova.com/nl/mobiletogether) met behulp van de MobileTogether Designer. Deze omgeving combineert gebruiksvriendelijke tools voor het ontwerpen van de gebruikersinterface, de krachtige visuele programmeertaal Action Tree voor het afhandelen van gebeurtenissen, en gestandaardiseerde functionele programmeertechnieken voor het selecteren en verwerken van data. Elk onderdeel van de app is zeer aanpasbaar, maar standaard zijn elementen zoals kleuren voor tekst, knoppen, regels, randen en zelfs achtergronden van vensters allemaal ingesteld op de standaardinstellingen van elk apparaat. De MobileTogether Designer bevat een hulpmiddelvenster waarin ontwikkelaars algemene projectinstellingen kunnen specificeren, waaronder een instelling voor een licht of donker thema. [![Instellingen voor stijlen en eigenschappen die automatisch de donkere modus ondersteunen in een mobiele app.](/blog/images/styles-window.png)](styles-window.png) De opties voor het thema zijn: "Gebruik systeeminstellingen", "Forceer licht thema" of "Forceer donker thema". De standaardinstelling is "Gebruik systeeminstellingen", waardoor ontwikkelaars automatisch ondersteuning kunnen bieden voor het donkere thema, zonder speciale aanpassingen te hoeven maken. ### Automatische ondersteuning voor donkere thema's in grafieken, met aangepaste kleuren Sommige elementen vereisen mogelijk aangepaste kleurinstellingen, en ontwikkelaars kunnen alternatieve kleuren specificeren voor het lichte en het donkere thema. De eerste stap is om te bepalen welke gebruikersinstelling van kracht is. MobileTogether bevat globale variabelen waarmee ontwikkelaars tijdens de uitvoering de instellingen van het gebruikte apparaat kunnen detecteren en op basis van de functionaliteit van het apparaat de juiste acties kunnen programmeren. Het dialoogvenster "Globale variabelen" in de MobileTogether Designer toont alle globale variabelen en hun waarden voor het geselecteerde simulatieapparaat. [![Een globale variabele identificeert de achtergrondkleur van het apparaat van de gebruiker tijdens de uitvoering van het programma.](/blog/images/global-variables-1.png)](global-variables-1.png) De standaard achtergrondkleur van de pagina voor een bepaald Android-apparaat wordt hierboven aangegeven. Deze waarde verandert als het apparaat in de donkere modus (Dark Theme) staat. Een lagere hexadecimale waarde duidt op een donkerdere tint, terwijl een hogere waarde een lichtere tint aangeeft. De hexadecimale waarde #808080 vertegenwoordigt de tint 50% grijs. We kunnen een XPath-expressie maken om de waarde tijdens runtime te testen, en we kunnen aannemen dat elke standaardachtergrondkleur die donkerder is dan 50% grijs, aangeeft dat het apparaat in de donkere modus staat. De XPath-evaluator in het venster "Designer Simulatie" is een handige tool om de exacte syntaxis van de expressie uit te werken: [![Een XPath-expressie om de kleurencode voor zwart of wit terug te geven, gebaseerd op de standaardachtergrondkleur van het mobiele apparaat](/blog/images/xpath-expression.png)](xpath-expression.png) Deze expressie zet de hexadecimale string om naar een integer, vergelijkt deze met de waarde voor 50% grijs en selecteert vervolgens de stringwaarde voor zwart of wit, afhankelijk van het resultaat. Dit is een handige expressie om automatisch een tekstkleur te selecteren voor een licht of donker thema. Laten we deze dus toepassen in een gebruikersfunctie: ![Het implementeren van de expressie in een gebruikersfunctie.](/blog/images/user-function.png) MobileTogether bevat functies waarmee u eenvoudig [gedetailleerde grafieken en diagrammen kunt maken](https://www.altova.com/nl/mobiletogether/enterprise-apps) die er op alle platforms hetzelfde uitzien. De voorbeeld-app "Solar Tool" die hierboven wordt getoond, gebruikt een staafdiagram om de dagelijkse opwekking van zonne-energie weer te geven, gecombineerd met een lijndiagram dat het elektriciteitsverbruik toont. Ontwikkelaars kiezen de instellingen voor deze grafieken via een reeks dialoogvensters voor het maken van grafieken, zoals het dialoogvenster "Uiterlijk wijzigen" dat hier wordt weergegeven: [![Dialoogvenster "Uiterlijk grafiek" om dezelfde grafiek te maken voor alle platforms](/blog/images/chart-creation.png)](chart-creation.png) Veel van deze instellingen bepalen kleuren, zoals de achtergrondkleur en de randkleur in dit voorbeeld. We hebben echter volledige controle om deze standaardinstellingen te overschrijven op basis van dynamische XPath-instellingen, die tijdens de uitvoering op het apparaat van de gebruiker worden geëvalueerd. [![Een dynamische XPath-optie om de instellingen van grafische elementen nauwkeurig aan te passen.](/blog/images/chart-config.png)](chart-config.png) Door op deze knop te klikken, wordt een dialoogvenster geopend met opties om een XPath-waarde of -expressie in te stellen voor elk element van het diagram. In de afbeelding hieronder stellen we de waarden in voor alle elementen die in de dialoogvensters voor diagraminstellingen zijn aangegeven als zwart of wit. We stellen de oorspronkelijke witte elementen in als de standaardachtergrondkleur, en we stellen zwarte elementen, zoals tekst en randen, in om gebruik te maken van onze functie AutoTextColor(). ![Het gebruik van een globale variabele en een gebruikersfunctie om automatisch de donkere modus te ondersteunen](/blog/images/dynamic-xpath.png) We hebben andere elementen, zoals de rasterlijnen voor elke as, in de instellingen voor het maken ingesteld op een lichtgrijze tint die geschikt is voor beide thema's. Er is een apart dialoogvenster voor de dynamische XPath-instellingen voor elke laag van elk diagram, maar zodra deze allemaal zijn aangepast, is dat alles. De diagrammen worden automatisch correct gemaakt, zowel voor het lichte als het donkere thema. Hier is een Android-telefoon die de grafieken voor het cumulatieve overschot toont, zowel in donker thema als in licht thema: [![Een andere weergave van de app, zowel in donker thema als in licht thema](/blog/images/android-app-1.png)](android-app-1.png) Als u klaar bent om gebruiksvriendelijke mobiele applicaties te maken die automatisch de donkere modus ondersteunen op basis van de gebruikersinstellingen, download dan de gratis te gebruiken [MobileTogether Designer](https://www.altova.com/nl/mobiletogether/download). Bekijk ook de pagina [MobileTogether Demos](https://www.altova.com/nl/mobiletogether/demos) met links naar video's, tutorials en meer demo-applicaties.