Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#35 ListViewを下に引っ張て更新する方法

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

ListViewを下に引っ張て更新とは?

ListViewが表示されているときに,上から下にスワイプすることで,ListViewに対して更新を促すことができます。スマホを使い慣れている方ならわかると思いますが,下に引っ張って更新される動作です。AndroidやiOSでこの動作は可能ですが,Windowsにこの思想がないと思うので,UWPでは普通にやってもできません。何かツールを使うとできるかもしれませんが,今回はAndroidだけで検証します。

準備

今回はPullToRefreshPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,PullToRefreshPage という新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにPullToRefreshPageの実装をして問題ありません。

PullToRefreshPageの追加

Pagesフォルダーに新規追加でPullToRefreshPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルを削除して,次のように記述します。

とりあえず普通にListViewを作成します。IsPullToRefreshEnabledをTrueにしておくことで,下に引っ張って更新ができるようになります。Refreshingイベントは下に引っ張って更新を促されたときに通知されます。Refreshingイベントの中にListViewを更新する処理を書いておきましょう。

コードビハインド側の実装

コードビハインド側にはPullToRefreshDtoというクラスを作り,ListViewにバインドします。中身はNameというstringのプロパティのみです。ここには今回はシステム日時の文字列を入れておきます。コンストラクタでリストを作成しMyListViewのItemsSourceにセットします。最初のリストは1件です。Refreshingイベントには,リストの更新処理を書きますが,今回は検証のために,リストを1件追加する処理を書きます。リストの追加はすぐに終わってしまうので,少し更新に時間がかかるようにするために,3秒間のウエイトを入れています。そのままSleepさせると画面が固まってしまうので非同期でSleepさせています。

実行

この状態で実行し,下に引っ張って更新をすると,リストが1件増える動作をすることが確認できます。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。