Jump to content
skyzoframe[hun]

FMX TListView with dynamicappearance. Create progress bar as bitmap.

Recommended Posts

hi,

Problem.:

1.- ListView using with DynamiAppearance,

image.png.f4a602978806aab11a6230e9df28c608.png

 

using only these kinds of objects.:

image.thumb.png.58a1d037d5fd9a16c7b6645d782bfac7.png

 

2.- I have to create a progress bar in runtime. I want to create/draw a bitmap in runtime.

3.- How to draw a  rectangle, and fill it with color.

-input data.: 25

-output.: Some bitmap with two rectangle

-bitmap Height 10 Width 100 all the time!

image.thumb.png.79c90a1c75d3a20345865906bf903cfb.png

 

kind regards kz.

 

Share this post


Link to post

1. Use FlowLayout and set properties of children controls.

2. Put a Progress bar over another. 

fmxuoverlays.png

  • Thanks 1

Share this post


Link to post

Can't read RARs today.

 

procedure TForm1.Button1Click(Sender: TObject);
var
  I:                    integer;
  colorRect:         TroundRect;
begin
  for I := 1 to 100 do
  begin
    colorRect := TRoundRect.Create(self);
    with colorRect do
    begin
     Setbounds(0,10 * I, 34,34); //need to set size only
     parent := FlowLayout1;
     fill.color := Talphacolors.Gold;

     show;
    end;
  end;
 

You could change the roundRect to other shapes as needed. the self in TRoundRect.Create(self) puts the object created in the forms list of Controls and/or Components for destruction later

Edited by Pat Foley
Need for self added
  • Thanks 1

Share this post


Link to post

Hi, if you mean something like this

image.thumb.png.b134d2bac71da5e025c9064e1bf7886f.png

 

(my first try) I use this code
 

unit UnitProgess;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes,
  System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base,
  Data.Bind.GenData, System.Rtti, System.Bindings.Outputs, FMX.Bind.Editors,
  Data.Bind.EngExt, FMX.Bind.DBEngExt, Data.Bind.Components,
  Data.Bind.ObjectScope, FMX.ListView, Fmx.Bind.GenData;

type
  TForm18 = class(TForm)
    ListView1: TListView;
    PrototypeBindSource1: TPrototypeBindSource;
    BindingsList1: TBindingsList;
    LinkListControlToField1: TLinkListControlToField;
    procedure ListView1UpdateObjects(const Sender: TObject;
      const AItem: TListViewItem);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;

var
  Form18: TForm18;

implementation

{$R *.fmx}

procedure TForm18.ListView1UpdateObjects(const Sender: TObject;
  const AItem: TListViewItem);
var
  pBitMap: TBitmap; // for further purpose
  pListItemImage : TListItemImage;
begin
  if AItem.Purpose = TListItemPurpose.None then
  begin
    pListItemImage:=AItem.Objects.FindObjectT<TListItemImage>('ProgressBar');
    if assigned(pListItemImage) then
     begin
      pListItemImage.Bitmap.Width:=400-(abs(PrototypeBindSource1.DataGenerator.FindField('intfield1').GetTValue.AsInteger)*10);
      pListItemImage.Bitmap.Clear(Talphacolors.RED);
     end;
end;

end.

Quick designed

image.thumb.png.3f36fb3f28c416e308a3902bf300068d.png

 

But I shall investigate more because this "version" need a link to (bitmap1 -> Item.ProgressBar)
I was enabled to add a bitmap directly (PlistItemImage is unassigned if there is no link)

  • Thanks 1

Share this post


Link to post

Thanks for all the replies.

Problem step.:

-4. How to move the image, behind the selection?

image.thumb.png.8152f5f82e62c4e75771e8033c11e5f2.pngimage.thumb.png.a977bfc8779a91a3435598864096ea1a.png

 

Alternative solution.:

The image still in front of the selection blue.

image.thumb.png.31c1294e63303ce159958e67694fa66b.png

 

 

Edited by skyzoframe[hun]

Share this post


Link to post

Runs OK!  Good example of separation of units and runtime building. 

 

 

It may be easier to edit DFM file than drilling into Object Inspector.  

    ItemAppearance.ItemHeight = 45
    ItemAppearanceObjects.ItemObjects.ObjectsCollection = <
      item
        AppearanceObjectName = 'INDEX'
        AppearanceClassName = 'TTextObjectAppearance'
        Appearance.Width = 100.000000000000000000
        Appearance.Height = 22.000000000000000000
        Appearance.Align = Trailing
      end
      item
        AppearanceObjectName = 'VALUE'
        AppearanceClassName = 'TTextObjectAppearance'
        Appearance.Width = 100.000000000000000000
        Appearance.Height = 22.000000000000000000
      end
      item
        AppearanceObjectName = 'IMAGE'
        AppearanceClassName = 'TImageObjectAppearance'
        Appearance.ScalingMode = Original
        Appearance.Width = 200.000000000000000000
        Appearance.Height = 5.000000000000000000
        Appearance.PlaceOffset.Y = 32.000000000000000000
      end>

 

  • Thanks 1

Share this post


Link to post

Or,

image.thumb.png.c70cc5fd270ddc92118e3eb5c5334479.png

 

  y :=  5;
  //x :=  200;
  x := trunc(Listview1.Width-50);

 

and it will be responsive for window resize.:

image.thumb.png.fe12206b780eab73f033c39a45132121.png

image.thumb.png.829d2939886063de6419a424edd91e51.png

 

Problem step.:

5.- By the way. Is there another method to get object width, in runtime?

 

"TAppearanceListViewItem(ListView1.Items.Add).Objects.FindObjectT<TListItemImage>('IMAGE').Width"

 

Edited by skyzoframe[hun]

Share this post


Link to post

Hi

Sorry but, I think we don't play in the same playground.

For me, a TListView is used with Livebindings to fill it with data coming from a data source (table, query or list of Object). You use it like a TListBox!

With a TListBox it's easy to put in a style whatever you want (in this case a text and a progress bar).

 

By the way, your code is more for this kind of component,

  • Create a style (layout, ttext, progressbar)

just to adapt your code in the    "for FR in FArray do" loop

  • set the style of the created item  item.stylelookup:='mystyleprogress'
  • insert an item.applystylelookup
  • change access to the objects of the item

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
On 5/28/2021 at 4:23 PM, skyzoframe[hun] said:

I need to stay in Listview-objects!

 

Almost done.. but slow when I use 500 record..

 

Solution.:

image.thumb.png.4e57a530c818a48db5af5af0741ca1a1.png

 

WorkStation00.rar

WorkStation00.7z

Check here the rar file. In data module you can see, how to build up in runtime the query for data source usage. Here usually I use synchronized threads. In user interface I handle every data sources in dynamic arrays. You all right, I don't use livebindings and live database connections. Live bindings for me is like "tying hands". 

Share this post


Link to post

Mistake here.:

procedure TForm2.FormDestroy(Sender: TObject);
Var
  rec :  dmRecord;
begin
  try
    for rec in FArray do
    begin
      if rec.mStr_Flag=Boolean(1)
      then  rec.mStr.DisposeOf;
    end;
  finally
    //FArray.Clear;
    FArray.DisposeOf; // missing line
  end;
end;

OR

procedure TForm2.FormDestroy(Sender: TObject);
begin
  try
    GetData.dmArray_CLEAR(FArray);
  finally
    FArray.DisposeOf;
  end;
end;

 

Edited by skyzoframe[hun]

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×