Pull to Refresh on iOS

Posted by on in Blogs
Today, I thought I would show you a simple example of how to implement pull to refresh for TListView. This example doesn't use a data source, but instead just adds 20 items to my list every time I try to refresh it. I am currently using one timer with this sample, but you could add another one for when the data is done loading to hide the animation at that time.

This sample uses the following 3 components:

  1. TListView

  2. TAniIndicator

  3. TTimer


For Timer1, I set the Interval design time property to 30. ListView1 is aligned to the client. AniIndicator1 is positioned at the top and centered on my form.





Below is the entire code of my application:
unit PullToRefresh;

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, Data.Bind.GenData, Fmx.Bind.GenData, System.Rtti,
System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,
Fmx.Bind.DBEngExt, FMX.StdCtrls, Data.Bind.Components, Data.Bind.ObjectScope,
FMX.ListView;

type
TForm36 = class(TForm)
ListView1: TListView;
Timer1: TTimer;
AniIndicator1: TAniIndicator;
procedure ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Single);
procedure Timer1Timer(Sender: TObject);
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
Myposition : Integer;
Updating : Boolean;

public
{ Public declarations }
end;

var
Form36: TForm36;

implementation

{$R *.fmx}
var
LItem: TListViewItem;
LList : TListView;
I: Integer;


procedure TForm36.FormCreate(Sender: TObject);
begin
Timer1.Enabled := true;
begin
LItem := ListView1.Items.Add;
LItem.Text := 'Pull to refresh list & add 20 items';
end;
end;

procedure TForm36.ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Single);
begin
if not Updating and (ListView1.ScrollViewPos < -40) then
begin
Updating := true;
AniIndicator1.Visible := True;
AniIndicator1.Enabled := true;
for
I := Myposition + 1 to Myposition +20 do
begin
LItem := ListView1.Items.Add;
LItem.Text := Format('Text %d', [I]);
end;
inc(myposition, 20);
end;
end;

procedure TForm36.Timer1Timer(Sender: TObject);
begin
if ListView1.ScrollViewPos >-40 then
begin
AniIndicator1.Visible := false;
Updating := false;
end;
end;
end.

Here is a quick video showing the app running on the Simulator:



- Sarina
About
Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio

Comments