Friday, March 31, 2017

FMX & Styles

FMX und Styles

OK, ein Stylebook auf ein Formular zu klicken ist ja nun kein Problem und dann?

Es gibt Leute, die haben sich extra ein Android-Handy gekauft, weil Ihnen das iOS zu "bund" oder was auch immer war... (oder auch anders herum).

Jetzt nimmt man einen Style - und alles sieht anders aus. Verärgert man damit seine Nutzer?

Für einen CI-Style sprechen sicherlich genau so viele Argumente, wie für einen nativen Plattform-Style.

Aber ist es den so einfach einen Style für alle Plattformen zu verwenden? Eigentlich schon...
Wäre da nicht das Problem, dass die mitgelieferten Styles - Handmade - sind. Daher sind die Grafiken leider nicht deckungsgleich. Bedeutet?

Alle Angaben der Regionen aus dehnen die einzelnen Style-Elemente herausgenommen werden sind unterschiedlich. Also muss man die für alle Plattformen anpassen?

Ich muss zugeben ich habe noch nicht alle Einzelheiten aller Plattformen verglichen - weil es hier pro Plattform noch Besonderheiten gibt... Als der Teil ist noch WIP.

Aber mein Ansatz war folgender:

Ich erzeuge über den Bitmap Style-Designer alle Default-Styles und speichere mir die Bezeichnungen:

AndroidL Light
[ANDROID][ANDROIDL][LIGHTSTYLE][DEFINEFONTSTYLES]
iOS7Alternate
[IOS][IOSALTERNATE][IOS7][DEFINEFONTSTYLES]
Windows 10 Modern
[MSWINDOWS][MODERN][DEFINEFONTS][DEFINEFONTSTYLES]


Dann nehme ich den Windows 10 Modern Default Style als Basis. Alle Plattformen nähern sich sowieso diesem Style... ;-)

Dann noch Icon suchen/erzeugen/von freien Quellen laden... Leider gibt es keine Size/Position-Hilfe im Styledesigner. Außerdem wollte ich auf keinen Fall die Icons in 4 Auflösungen per Hand zusammenklöppeln... Hierfür also schnell ein kleines Programm geschrieben, dass die Icons in immer gleichbleibender Reihenfolge laden und in die PNG's speichern kann. Und die Auflösung 1.0 noch mit einem Grid versehen. So fällt das "rechteckziehen" leichter.

Dann noch das SpeedButton-Style-Object im Style oft genug kopieren und alles zuweisen...

Und schon hat man seinen Style - der auf allen Plattformen funktioniert.
Die richtigen Größen der Elemente erzeugt mein FDK, hierum brauchte ich mich also nicht kümmern. Fertig sieht es dann so aus...

Es gibt im FDK noch eine Funktion die aus jeder Grafik, einen klickbaren Button mit Schatten und Pushdown-Animation machen kann. Somit hat man die Option entweder den Button nativ zu verwenden (Toolbar, oben) oder als Klickdown-Button (Leiste unten) besonders klasse finde ich den Effekt bei transparenten PNG's.

 
Die fertige App sieht das auf allen Plattformen so aus: Ok, die Schatten sind ein Style-Bruch und werden in der Store-Version wahrscheinlich noch rausfliegen.
 
 
So einfach kann es gehen - und ich habe hierfür nur eine Woche gebraucht. ;-)
 
Warum eine Woche? Bis alles so gepasst hat wie ich es mir vorstelle und das ganze zusammenklicken mit der Maus im Bitmap-Style-Designer war halt einfach viel Arbeit. Nochmal mache ich das so nicht. Nächster Schritt ist ein Style-Creator der diese unnötigen arbeiten automatisch macht... (Ich habe mich ja auf Button beschränkt) Hätte ich die anderen Elemente auch noch erzeugen/ändern müssen wäre es wahrscheinlich ein Monat geworden. Das FMX-Style-Format ist ja so ähnlich wie DFM/FMX/TXT aber ich hatte einfach noch keine Zeit hierfür eine Routine zu schreiben... Ich hoffe noch an den Source für den Bitmap-Style-Designer zu kommen und einfach diese Software zu erweitern... Anfrage läuft. 
 
Wie gesagt WIP...
 


No comments:

Post a Comment