Fmx ListBox Darstellungsfehler als Tile

[Rollo62]

Hallo zusammen,

ich möchte unter RadXE8 Upd1 mit Firemonkey die ListBox nutzen, mit Images aus einer ImageList
in einem separatem DatenModul.

Weil das im Orginal ein viel zu kleines Bild zeigt (ala 16x16 Icon), habe ich es mit

Code:

procedure TForm1.ListBoxItem1ApplyStyleLookup(Sender: TObject);

versucht.

Ich habe auch Versuche mit Styles gemacht, aber das führt bei mir zu anderen Problemen.
Deshalb würde ich gerne einfach folgendes hinbekommen:
ImageList --> ListBox --> ItemIndex --> linksbündiges Bild in max. Höhe

Code:

function  Styles_Apply_Get(obj : TListBoxItem;
                             var sTxt : TText; var sDet : TText; var sImg : TGlyph) : Boolean;
var
  fmxImg : TFmxObject;
  fmxTxt : TFmxObject;
  fmxDet: TFmxObject;

begin
  Result := False;
  sTxt   := nil;
  sDet   := nil;
  sImg   := nil;

  if not Assigned(obj) then
    Exit;

  if (obj is TListBoxItem) then
  begin

    fmxTxt  := (obj as TListBoxItem).FindStyleResource('text');
    fmxDet  := (obj as TListBoxItem).FindStyleResource('accessorydetail');
    fmxImg  := (obj as TListBoxItem).FindStyleResource('glyphstyle');


    if Assigned(fmxImg) and (fmxImg is TGlyph) then
    begin
      sImg := fmxImg as TGlyph;

      sImg.Align   := TAlignLayout.MostLeft;
      Result := True;
    end;


  end;

end;


  if Styles_Apply_Get(Sender as TListBoxItem,
                      sTxt, sDet, sImg) then
  begin
    sImg.HitTest      := False;

    rc := sImg.BoundsRect;
    rc.Width  := (Sender as TListBoxItem).Height -1;
    rc.Height := (Sender as TListBoxItem).Height -1;
    sImg.SetBounds(rc.Left, rc.Top, rc.Right, rc.Bottom  );

  end;

Damit kann ich mir den 'GlyphStyle' als TGlyph holen und die Größe etwas anpassen an die ListBoxItem Höhe.
Soweit so gut.

Das Problem:
Es sieht auf den mobilen Platformen anders aus als geplant, mit Tiles statt einem ge-stretch-tem Bild.
Auf Win/Mac ist es so wie gedacht, Ios/Android nicht.
Habe schon mit Retina Scaleing, etc.herumgespielt, ich komme aber nicht drauf wie man das abstellen kann.

Im Anhang Bilder der Platformen und Sources für ein kleines Demo.

Vielleicht ist ListBoxItem1ApplyStyleLookup je der falsche Weg ?

Rollo

[Rollo62]

noch ein Hinweis:

Es liegt wohl nicht an den ListBoxItems an sich.
Denn wenn ich über die Items jeweils TGLyphs lege passiert dasgleiche.

Anhang 43520

Es scheint also ein Problem des TGLyphs zu sein, das ein Image als Tile darstellt.

Rollo

[Harry Stahl]

Sieht so aus, als ob bei der TGlyph-Komponente unter IOS bzw. Android alle Bitmaps, die kleiner als der anzuzeigende Bereich sind mit Wrapmode Tile gezeichnet werden.

Du kannst die Sache umgehen, indem Du ausreichend große Bitmaps in Deine Imagelist aufnimmst, z.B. 128x128 Bildpunkte (siehe damit Dein Programm auf IOS in der Anlage), damit die dann in den anzuzeigenden Bereich eingepasst werden.

[Rollo62]

Hallo Harry,

dankesehr für den entscheidenden Tip, manchmal sieht man den Wald vor Bäumen nicht :-)
Das muss ich in deinem XE7-Buch wohl überlesen haben, da sind auf jeden Fall jede Menge gute Tips für VCL-FMX Umsteiger wie mich drin.
Ich freue mich schon auf die nächste Ausgabe.

Eigentlich bin davon ausgegangen das die Bilder schon gross genug wären.
Also werden die Bilder wahrscheinlich intern noch mit dem Retina ScreenScale Faktor verkleinert ?

Das sollte dann auch direkt mit der ImageList ohne Verrenkungen funktionieren ?
Das werde ich gleich mal ausprobieren, wäre ja dann endlich das was ich eigentlich möchte.

Welche Empfehlung gibt es es denn wohl für eine Mindestgröße damit es aus allen Plattformen korrekt aussieht ?
Der ScreenScale Faktor kann ja im Moment bis zu 3 sein.

Ergebnis:
Nach dem Test bekomme ich das leider immer noch nicht so hin wie in deinem Anhang:

Ich habe die Größe in der ImageList schrittweise auf 512x1512 erhöht.
Anhang 43526
Ich war mir aber gar nicht sicher ob diese Stelle überhaupt immer für die Bildgröße verantwortlich ist, oder ob das nur für das Speichern
benutzt wird (darauf hat es jedenfalls Einfluss).

Danach wird der Screenshot im 1sten ListItem dasImage immer noch als Tile gezeichnet (auf z.B. IOS Simulator).
Aber jedenfalls ist das Image jetzt schonmal größer, ohne die ganzen OnApplyLookup Verrenkungen.
Anhang 43527

Das 2. ImageListItem habe ich mit Width Height noch vergrößert, aber das vergrößert nur das Ganze Glyph, und das Image bleibt
fitted im ListBoxItem, so wie gedacht.

Im 3. habe ich mal an den Margins rumgespielt (so würde ich das normalerweise nicht machen), es tut aber auch nicht so wie erwartet.

Code:

    if (Sender as TListBoxItem).Index = 1 then
    begin
      sImg.Width  := 128;
      sImg.Height := 128;
    end;

    if (Sender as TListBoxItem).Index = 2 then
    begin
      sImg.Margins.Left   := -20;
      sImg.Margins.Right  :=  20;
      sImg.Margins.Top    := -20;
      sImg.Margins.Bottom :=  20;
    end;

Die Tiles sind aber in keinem Fall weg, was könnte hier noch anders ein ?
Wie gesagt, die Tiles sehe ich nur unter iOS, iOS Simulator und Android.
Wie hast du das wegbekommen ?


Rollo

[Harry Stahl]

Zitat:

Zitat von Rollo62 (Beitrag 1308368)

Hallo Harry,

dankesehr für den entscheidenden Tip, manchmal sieht man den Wald vor Bäumen nicht :-)
Das muss ich in deinem XE7-Buch wohl überlesen haben, da sind auf jeden Fall jede Menge gute Tips für VCL-FMX Umsteiger wie mich drin.

Freut mich, wenn mein Buch Dir eine Hilfe war / ist.

TGlyph gibt es erst seit XE8, daher konntest Du im XE7-Buch dazu nichts finden, im Buch zu XE8 wird es aber enthalten sein.

Zitat:

Zitat von Rollo62 (Beitrag 1308368)

Welche Empfehlung gibt es es denn wohl für eine Mindestgröße damit es aus allen Plattformen korrekt aussieht ?
Der ScreenScale Faktor kann ja im Moment bis zu 3 sein.

Ich würde den maximal vorgesehenen Anzeigebereich des TGlyphs in Pixeln mal 2 nehmen, das sollte momentan eigentlich reichen. Wobei ich mir aber im Moment nicht sicher bin, ob das derzeitige Anzeigeverhalten ein Fehler ist.

Zitat:

Zitat von Rollo62 (Beitrag 1308368)

Ergebnis:
Nach dem Test bekomme ich das leider immer noch nicht so hin wie in deinem Anhang:

Ich habe die Größe in der ImageList schrittweise auf 512x1512 erhöht.

Es reicht nicht, die Einstellungen der Pixel-Größe im Dialog zu verändern. Man muss dort Bilder mit der tatsächlichen Pixelgröße reinladen. Ich hatte Deine Imagelist ganz gelöscht und dann 3 neue Bilder mit physischer Größe von jeweils 128x128 reingeladen, dann geht's.

[Sir Rufo]

Projekt und Bilder im Anhang.

Je nach Skalierungsfaktor zwischen der logischen und physikalischen Auflösung wird in dem Bild ein "1", "1,5", "2" oder "3" stehen.

Einfach mal ausprobieren ;)

[Harry Stahl]

Ja klar, das wäre der richtige Weg, um bei jeder Auflösung das Bild in der richtigen "Schärfe" bzw. Qualität zu haben (soweit man die Bilder denn auch tatsächlich in den unterschiedlichen Auflösungen hat, wenn nicht, reicht es, direkt die höchste Auflösung in die Imagelist reinzutun, Delphi skaliert das dann eben runter).

Dass die Imagelist intern aus MultiresBitmaps besteht, hatte ich hier schon mal berichtet (Beitrag Nr. 11 http://www.devpage.de/blog/firemonkey.htm).

Da dachte ich noch, dass man an das MultiResBitmap nur über die Strukturliste rankommt. Was mir eben aber aufgefallen ist: Ein einfacher Doppelklick auf das Icon in der Mitte öffnet direkt den MultiResBitmap-Dialog (siehe anliegende Screenshots).

Nachtrag: Und in der linken Liste kann man ebenfalls per Doppelklick den MultiResBitmap-Dialog öffnen. Ist mir ein Rätsel, warum man neben den ganzen anderen Schaltern da nicht direkt auch einen Schalter zum Bearbeiten im MultiResBitmap-Dialog hinzugefügt hat.

[Rollo62]

Hallo Sir Rufo,

ja dankesehr für das Demo, das zeigt die Bitmap jetzt richtig an, und nicht als Tile.
Ich versuche das noch mit meinem Bitmaps umzubauen und hoffe es bleibt dann so.

Trotzdem verstehe ich nicht ganz warum die Images überhaupt als Tile gezeichnet werden.
Ich hätte erwartet, wenn der Skalierungsfaktor nicht stimmt bzw. ein entsprechendend MultiResBitmap fehlt,
das dann halt das nächstbeste Image genommen und hoch/runter skaliert wird.

Aber wo wir denn daraus der Tile gemacht ?
Das würde ich gerne abstellen, denn es kann ja immer mal passieren das man ein Bitmap vergisst.

Es verhält sich ja in Win32 und MaxOS richtig, so wie ich das erwarte.
Ich denke das MacBook Retina hat auch einen Skalierungsfaktor von 2.
Nur in den mobilen Platformen wird es ge-tiled ...

Rollo

[Rollo62]

Hallo zusammen,

ich glaube ich habe die Logik dahinter herausgefunden.

Wenn ich das Image mal in 1, 1.5, 2, 2.5, 3 dann ist das natürlich der optimale Weg, da gebe
ich Sir Rufo vollkommen recht.
Leider habe ich aber jetzt schon einen ganzen Zoo von Icons, das würde ich mir gerne ersparen.
Zumal das Skalieren durch Fmx bei mir keinerlei Performanceprobleme verursacht.
Wenn ich mal Zeit übrig habe, oder bei bestimmten wichtigen Icons, wo die Info bei kleinen Stufen verloren gehen würde
kann ich immer noch ein MultiResBitmap anlegen.

Also würde ich jetzt so vorgehen
- normalerweise ein großes Icon (512x512) laden, Q&D, und die Skalierung durch Fmx machen lassen
- bei besonderen Icons, wo das oben nicht gut genug wird, ein MultiResBitmap anlegen.

!! Trotz des MultiResBitmaps kann es aber immer noch zu Tile-Darstellung kommen.

Das scheint von der Einstellung hier Anhang 43538 abzuhängen.

Das MUSS an dieser Stelle die Skalierung des kleinsten Orginalbildes 1.0 sein, auch beim MultiResBitmap.
Falls es größer eingestellt wird kann das Bild u.U. als Tile dargestellt werden.

Wieder etwas dazugelernt, danke euch beiden für die Hilfe :-)

Rollo