Pull to Refresh on iOS

Written by Sarina D on Posted in UI

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:

    TListView
    TAniIndicator
    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.

refresh

 

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.

 

Tags: Mobile UI iOS Deployment



About
Gold User, Rank: 5, Points: 558

Check out more tips and tricks in this development video: