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

markieren

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

markieren

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

noch ein Hinweis:

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

Clipboard05.jpg

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

Rollo

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.

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.
Clipboard07.jpg
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.
Clipboard06.jpg

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.

markieren

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

Zitat von 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.

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 von Rollo62:

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 von Rollo62:

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.

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