What control should I use to create this UI in Del

Question

I am developing an application for mobile (android and ios) by Delphi xe5.

I am willing to create this UI:

I tried TListBox but image on left and right cant be set.

I tried TListView but same problem as TListBox

I tried TGrid with custom column, The problem of texts and images is solved but I can't create headers of each rows (it hasn't something like colspan)

What I need is to create a custom control and repeat it.

What is the best solution?

Any solution or guide line will be appreciated.

Solution

Thanks @Mike Sutton for answer, this is the result

Answer 1

Here's an idea that I don't have time to test:

Create a descendant of a TListBoxItem and in that add you two images as normal TImages. I'm pretty sure that a TListBoxItem can parent an object. You'll have to place the images on the listbox item where you want them. Then whenever you add an item to the listbox item just pass in your own descendant.

(If this doesn't work someone let me know and I'll delete this.)

Answer 2

The style here is so different from a standard TListBoxItem style that is probably makes sense to start from scratch, in which case the issues with accessing the default styles become immaterial.

• Add a TStyleBook to your form.
• Set the StyleBook property of the form to point to it.
• Double click the icon to open the editor.
• Drag a TLayout to the structure panel and drop it on the only item which will be there.
• Set the StyleName property of the TLayout (e.g. ScoreListBoxItemStyle).
• Drag/drop other components to build up the layout you want (remember TLayouts for 'hidden' positioning).

• Set the StyleName property of any components you want reference from your code.

• Subclass TLIstBoxItem to TScoreListBoxItem (if using the StyleName suggested above).

• Add properties for your text, images etc.
• In the setter methods for each of these, cache the data and call a method such as:

procedure SetFlag1; var O: TFMXObject; begin O := FindStyleResource('flag1'); //StyleName of the item if O is TImage then TImage(O).Bitmap.Assign(FFlag1); end;

• Override the ApplyStyle method and call all of your methods that set the data in the style.

• Now create your items in code:

Item := TScoreListBoxItem.Create(Self); ListBox1.AddObject(Item); Item.Flag1.LoadFromReource ... ...