4D für Mobile: Benutzerdefinierte Datenformatierer für helle und dunkle Erscheinungsbilder

Seit einiger Zeit können Sie Ihre eigenen benutzerdefinierten Datenformatierer erstellen und Strings, Boolesche oder ganze Zahlen in Ihrer generierten App in Bilder umwandeln.

Mit dieser neuen Funktion in 4D v19 R2 können Sie die Vorteile dieser Formatierer für iOS und Android voll ausschöpfen und dafür sorgen, dass die Bilder sowohl in hellen als auch in dunklen Umgebungen gut aussehen.

Mal sehen, wie das geht!

Sie können dies auf drei verschiedene Arten tun:

  • Verwendung schwarzer und weißer Farben
  • Verwendung unterschiedlicher Bilder je nach aktivem Modus
  • eine Mischung aus den beiden oben genannten Optionen

Verwendung von Schwarz-Weiß-Farben

Mit dieser Option erhalten Sie farboptimierte Bilder je nach dem auf Ihrem mobilen Gerät eingestellten Modus (hell oder dunkel).


{ "name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54,
"tintable": true
}
}

Für alle Ihre klassischen Formatierer sollte die Datei formatter manifest.json bereits die folgenden Informationen enthalten :

  • eine „choiceList“, die die Werte enthält, die durch Bilder ersetzt werden sollen
  • Eigenschaften von Bildern (oder Assets) wie „Größe“

Der wesentliche Unterschied besteht darin, dass der Schlüssel „tintable“ auf „true“ gesetzt ist, so dass die Bildfarbe (schwarz oder weiß) dynamisch an den Themenmodus der Benutzeroberfläche angepasst werden kann.

So sieht es auf Ihrem Telefon aus, wenn Sie den Modus wechseln:

Unterschiedliche Bilder je nach Modus verwenden

Mit dieser Option können Sie verschiedene optimierte Bilder einstellen, die je nach dem auf Ihrem mobilen Gerät eingestellten Modus angezeigt werden.


{ "name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54
}
}

Hier ist der Formatierer derselbe wie im vorherigen Beispiel. Was sich ändert, ist der Name des Bildes. Wenn ein Bild mit dem Suffix „_dark“ versehen ist, wird es für den dunklen Modus verwendet.

Beispiel: „clear_dark.png“ wird als die dunkle Version von „clear.png“ festgelegt.

blank

Hier ist das Ergebnis:

blank

Beide Optionen mischen

Diese Option ermöglicht es Ihnen, die Vorteile der beiden vorherigen Optionen zu nutzen. Das bedeutet, dass Sie den Schlüssel „tintable“ auf „true“ setzen und gleichzeitig optimierte Bilder und Farben festlegen können, die je nach dem auf Ihrem mobilen Gerät eingestellten Modus angezeigt werden.

blank

Jetzt können Sie Ihre Formatierer verwenden, egal ob Ihr iOS- oder Android-Gerät im dunklen oder hellen Modus ist.

Ja, diese Funktion ist auch auf Android verfügbar!

blank

Zögern Sie nicht, uns im 4D Forum Feedback zu geben, und lesen Sie die entsprechende Dokumentation für weitere Details.

David Azancot
4D for iOS Product Owner - David Azancot kam 2017 als Product Owner zum 4D Produktteam. Er ist verantwortlich für das Schreiben der User Stories und deren Umsetzung in funktionale Spezifikationen. Zu seinen Aufgaben gehört es auch, dafür zu sorgen, dass die Implementierungen der Funktionen den Bedürfnissen der Kunden entsprechen. David hat einen MBA-Abschluss in Marketing, Internet und Mobilität vom Leonard De Vinci Institute und begann seine Karriere 2011 bei einem mobilen Start-up-Unternehmen, das später von Madvertise (einer mobilen Marketinggruppe) übernommen wurde. Da er sich leidenschaftlich für mobile Schnittstellen interessiert, war er die erste Wahl, um 2015 interaktive mobile Werbeformate für die Gruppe zu entwickeln. Parallel dazu entwickelt David seit 2012 seine eigenen iOS- und Android-Applikationen.