Help us understand the problem. What is going on with this article?

Delphi で Pull To Refresh

PullToRefresh

Delphi で簡単に PullToRefresh しようよ~(ジョイマン風に)

PullToRefresh とは

上から下に引っ張ると表示内容が更新される機能です。

ListView PullToRefresh

TListView には PullToReflesh が機能として提供されています。

PullToRefresh の所にも書いてありますが、使い方は

  1. PullToRefresh プロパティを True にする
  2. OnPullRefresh イベントハンドラに更新する内容を記載する
  3. 更新が終わったら StopPullReflesh を呼ぶ

という感じです。

Object.png

OnPullRefresh
procedure TfrmMain.ListView1PullRefresh(Sender: TObject);
begin
  CreateRandomValue; // ListView にランダムな値を設定するメソッド
  ListView1.StopPullRefresh; // iOS の場合に待機アニメーションが停止される
end;

また PullRefreshWait というプロパティがあります。
このプロパティは iOS でしか効果がありません。
このプロパティを True にすると待機アニメーションが自動的に止まるようになります。
このプロパティを False にした場合は、コードで示したように StopPullRefresh を手動で呼び出します。
本来、データの更新というのは時間が掛かる物なので、PullRefreshWait を True にする機会は少ないかも知れません。

実際に動かすとこんな感じ

iOS
P2RSample.gif

Android
Xperia.gif

ListView 以外ではどうする?

ここからが本題!
ListView 以外の時にこの動作をさせたくても、そんなコントロールは無いのでした。

ということで Top に TLayout を置いて OnMouseDown, OnMouseMove, OnMouseUp で引っ張り出せるようにしてみました。
image.png

利点

この方法の利点は全部の OS で使えるということです。
先に上げた TListView の方法だとモバイルだけ。しかも Android の表示はそもそも Pull 感が無くて超解りづらい…

欠点

引っ張り出せるようにするために上部に少しコントロールを出しておかないといけない、というところです。
なので、画面上部にユーザーが操作する UI を置いておくことができません。

実装

これを実装した PK.GUI.PullToRefreshLayout を作成しました。
TPullToRefreshLayout を使うコードは↓こんな感じ

procedure TfrmMain.FormCreate(Sender: TObject);
begin
  FP2RLayout := TPullToRefreshLayout.Create(Self); // FP2RLayout は TPullToRefreshLayout として定義
  FP2RLayout.MaxPullingLen := 80; // どこまで引っ張り出せるか

  FP2RLayout.BoundsRect := Layout1.BoundsRect; // "PullToRefresh Sample" とあるエリアと同じ位置にする
  FP2RLayout.Parent := Self;
  FP2RLayout.BringToFront; // 最前面に持ってきて触れるようにする

  Path1.Parent := FP2RLayout; // 矢印を表示している Path を載せる

  FP2RLayout.OnRefresh := P2RLayoutRefresh; // イベントハンドラ

  CreateRandomValue;
end;

procedure TfrmMain.P2RLayoutRefresh(Sender: TObject);
begin
  CreateRandomValue; // 更新
end;

コレを使うと↓のような動作になります!

Windows
P2RSample.gif

macOS
P2RSample.gif

iOS
P2RSample.gif

Android
P2RSample.gif

まとめ

元から用意されている場合はそれを使って、用意されていない場合は工夫することが大事ですね!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away