Buttons für alle Platformen einheitlich "stylen"

[knaeuel]

Hallo zusammen,

im Tutorial "Mobile-Tutorial: Verwenden von Schaltflächen-Komponenten mit unterschiedlichen Stilen (iOS und Android)" heißt es hier im Kapitel Definieren_von_Aussehen_und_Verhalten_einer_Schalt fl.C3.A4chen-Komponente es gäbe für Buttons die beiden Eigenschaften TintColor und IconTintColor. Also mein ObjectInspector zeigt die jedenfalls nicht an.

Wie kann ich meine Buttons so manipulieren, dass sie unter iOS und Android gleich aussehen? Alle Versuche, die ich bisher unternommen habe, hatten unerwünschte Nebeneffekte. So wurden zum Beispiel andere Komponenten im Aussehen verändert, die ich gar nicht ändern wollte (bei einem Versuch mit komplettem Style und dem Bitmap-Stil-Designer). Oder die Änderungen hatten einfach keinen Effekt. Oder die Eigenschaften, die angeboten werden, liefern nicht das, was ich will.

Ich möchte zum Beispiel alle Buttons blau haben, im gedrückten Zustand heller blau.
Der Text soll im Normalzustand weiß sein, im gedrückten schwarz.
Gibt es ein Tutorial dazu oder hat jemand eine kurze anleitende Erklärung parat?

Danke schon vorab!

[knaeuel]

kleine Korrektur/Ergänzung:

sobald man den "Stil" des Formulardesigners auf Android umstellt, erscheint "TintColor" im Objektinspector, IconTintColor allerdings nicht.

"Stil" -> iOS -> TintColor nicht verfügbar

Somit bleibt das Problem identisch: wie kann ich für alle Platformen die gleiche Optik für Buttons erreichen?

[Sherlock]

Auf der von Dir verlinkten Seite steht eigentlich alles, was Du zu dem Thema wissen mußt.

Hast Du ein TStylebook angelegt, und darauf den Stil für TButton definiert? Beachte bitte, daß solche Buttons unter iOS nicht mehr "betriebssystemeigene" Buttons sind, sondern "handgezeichnete" Fremdkörper. Das führt aufgrund der antiqueirten Grafikbibliothek, die FMX zum Zeichnen nutzt zu Performance Themen, wenn es mehrere zugleich malen soll.

Sherlock

[knaeuel]

erstmal danke für die Antwort!

Zitat von Sherlock:

Auf der von Dir verlinkten Seite steht eigentlich alles, was Du zu dem Thema wissen mußt.

ja und nein, das Tutorial ist nicht gut gemacht/hat Fehler/lässt einiges aus.

Zitat von Sherlock:

Hast Du ein TStylebook angelegt, und darauf den Stil für TButton definiert? Beachte bitte, daß solche Buttons unter iOS nicht mehr "betriebssystemeigene" Buttons sind, sondern "handgezeichnete" Fremdkörper. Das führt aufgrund der antiqueirten Grafikbibliothek, die FMX zum Zeichnen nutzt zu Performance Themen, wenn es mehrere zugleich malen soll.

wie meinst du das jetzt? Gilt das grundsätzlich für alle Buttons oder gibts Ausnahmen?


Ich bin ansonsten etwas weiter gekommen mit dem Tutorial. Ich hab mal mitgeschrieben, während ich das Tutorial durchgearbeitet habe.

Link zum Tutorial

Im Kapitel "Anpassen von Schaltflächen mit Stilen" starte ich mal:

Zitat:

1. Überprüfen Sie im Formular-Designer, ob Sie in der Ansichtsauswahl Master ausgewählt haben.

ja, hab ich

Zitat:

2. Klicken Sie im Formular-Designer mit der rechten Maustaste auf eine Schaltfläche oder Symbolschaltfläche, und wählen Sie dann im Kontextmenü einen der folgenden Einträge:
- Benutzerdefinierten Stil bearbeiten
- Standardstil bearbeiten

ich würde jetzt den Standardstil nehmen.

Hoppala, das Tutorial ist an dieser Stelle beendet. Das hat ja bis jetzt noch quasi gar nichts erklärt.

... aber es gibt einen weiterführenden Link. Mit wenig Begeisterung klicke ich drauf.
weiterführender Link

Plötzlich sind wir beim Stil-Designer. D.h. alle vorherigen Schritte kann ich wieder vergessen??
Die nächste Überschrift lautet wieder "Standardstile" - na dann gehts vielleicht doch in dieselbe Richtung?

Zitat:

So zeigen Sie die Stildefinitionen im FireMonkey-Stil-Designer an:
1. Legen Sie im Formular-Designer ein TStyleBook auf dem Formular ab.
2. Doppelklicken Sie auf das Stilbuch.

also sind wir doch wieder beim Stylebook und nicht beim Rechtsklick auf eine Komponente und dann Auswahl von Standardstil oder benutzerdefiniertem Stil... egal, wir machen erstmal weiter:
also, die Schritte 1 und 2 kriegen wir hin. Allerdings sehe ich jetzt nur einen leeren StyleContainer. Ok, könnte ja sein. Im Moment gibt es noch keine Stil-Definitionen in diesem Stilbuch. So wie es das Tutorial schildert, hätte ich jetzt allerdings erwartet, alle Default-Style-Settings zu sehen.

Zitat:

Der Standardstil von FMX.StdCtrls.TPanel ist beispielsweise wie folgt definiert:
- panelstyle: TRectangle

Was soll mir das sagen? Das ist völlig aus dem Zusammenhang gerissen. Oder übersehe ich was?
Ich erahne, dass das Tutorial Dinge ausgelassen hat. Ich beende den Stil-Designer, lege ein TPanel auf die Oberfläche, klicke mit rechts auf das Panel und wähle "Standardstil bearbeiten" aus. Ich erhalte jetzt die Ansicht, auf die sich das Tutorial bezieht.

Zitat:

Der Name der Stilressource, die den Stil definiert, lautet "panelstyle". Sie verweist auf ein TRectangle. Das Erscheinungsbild dieses Rechtecks kann im Stil-Designer geändert werden. Jedes TPanel-Steuerelement auf dem Formular wird dann standardmäßig entsprechend Ihren Änderungen dargestellt.

Ok, hier könnte ich jetzt das TRectangle, auf welches verwiesen wird, anpassen und schwupps, alle Panels sehen so aus. Zum Beispiel könnte ich direkt auf die Fill-Eigenschaft zugreifen und einfach blau füllen lassen. Soweit verstanden, kurz getestet, funzt. Dann schauen wir uns mal einen Button an.

Rechtsklick auf Button -> Standardstil bearbeiten

Tja, ungünstig. Der Button besteht in der obersten Ebene aus einem Layout, welches keine Fill-Eigenschaft besitzt.
Außerdem gibt es ein Element "background" unterhalb des Layouts.

Aber laut Tutorial kann ich das ändern:

Zitat:

Es gibt jedoch keine Regel, dass ein TPanel mit einem TRectangle dargestellt werden muss. TRoundRect oder TEllipse wären ebenfalls möglich.

Das gilt dann also auch für Buttons. Also ersetzen wir das Layout einfach durch ein TRectangle, lassen alles unterhalb von TLayout umziehen in unser Rectangle und fertig ist die Laube?
Der Stildesigner ignoriert Farbänderungen im Rectangle... eben bei TPanel hat das noch geklappt.

Lösung: das background-Element ist im Weg. Ich lösche das Element (etwas umständlich, Löschen funktioniert nur über den Rechtsklick)

Schade drum, das background-Element legt Eigeschaften für verschiedene Zustände des Buttons fest. Aber an dieser Stelle wissen wir noch nicht genug, um damit arbeiten zu können. Also weiter im Tutorial.

Zitat:

Nehmen Sie als Beispiel FMX.StdCtrls.TCheckBox, das ungefähr folgendermaßen aussieht:

checkboxstyle: TLayout (das gesamte Steuerelement)
TLayout (das Layout für das Kästchen)
background: TRectangle (das Kästchen selbst, das eine Zusammensetzung aus dem Folgenden ist
TGlowEffect (leuchten, wenn das Steuerelement den Fokus hat)
TRectangle (das äußere Rechteck, das das Kästchen bildet)
TRectangle (das innere Rechteck)
TColorAnimation (Farbanimation, wenn der Mauszeiger über das Steuerelement geführt wird)
TColorAnimation (und wieder zurück)
checkmark: TPath (das Häkchen in dem Kästchen, das als Pfad gezeichnet wird, mit
TColorAnimation (Farbanimation, wenn das Häkchen ein- oder ausgeblendet wird)
text: TText (und wieder auf der obersten Ebene: der Text der Beschriftung)

nunja, unterhalb von "background" wird bei mir nichts angezeigt. Außerdem ist "background" nicht vom Typ TRectangle sondern vom Typ TCheckStyleObject. Ich bezweifle, dass ich hier noch was lernen kann...

Das Kapitel "Ressourcenbenennung und Ressourcenreferenzierung" sagt uns, wie wir den gerade erstellten Stil auf unser Objekt anwenden. Einfach in der Eigenschaft "StyleLookup" blättern und das richtige auswählen.

Anschließend geht das Tutorial wieder auf Stylebooks ein. Wir lernen, wie wir eigene Styles hinzupatchen können, die wir anschließend auf passende Objekte anwenden können.

Fazit: mein Button hat nun die Farbe meiner Wahl, aber dafür verhält er sich nicht mehr wie ein Button. Es ist nur noch eine starre Fläche. Beim Klick (oder tap) wird nichts optisch gedrückt. Es bleibt starr in dieser Optik. => suboptimal, ohne dieses "background"-Element ist das nix.

ich werde mich dann wohl mal mit diesem "background"-Element befassen.
Einen schnellen Weg scheint es nicht zu geben.

[knaeuel]

ich machs kurz: ich finde das richtig beschissen umgesetzt. Ich halte es nicht für praktikabel, Buttons über den Stil-Designer zu verändern. Es mag mit anderen grafischen Komponenten besser gehen, aber alle Komponenten, die auf die riesigen Steuerelemente-Bitmaps verweisen und sich dort ihr Aussehen abholen, baut man schneller mit anderen Elementen nach. Denn bis man so ein Bitmap in 4 Auflösungen manipuliert hat und dann auch noch die komischen doppelten Rechtecke für zum Beispiel das Aussehen eines Buttons, der gerdae gedrückt wird, an die richtigen Stellen geschoben hat, können Stunden bis Tage vergehen. Besonders nervig: die bereits an sich vernünftig platzierten Rechtecke werden auf Vollbild aufgezoomt, sobald man eine neue Steuerelemente-Grafik nutzen will. Und natürlich funktionieren die Scrollräder der Maus bei dem Riesen-Bitmap nicht...

Zur Krönung darf man das außerdem für Android, iOS und Windows getrennt machen.

Ich werde das auf gar keinen Fall nutzen. Ich finde das so unglaublich schlecht. *kopfschüttel* Ich werde jetzt einfach normale Rectangles (oder RadiantShapes) benutzen und diverse Messages (OnClick, OnMouseDown, OnMouseUp sollte reichen) programmieren, bis die Dinger sich verhalten wie Buttons. Die Buttons sehen dann unter allen Plattformen sofort gleich aus. Ohne Gehampel, ohne Bugs, ohne den nicht zu Ende programmierten FMX-Stil-Designer.