RadListViewプル・トゥ・リフレッシュ

プル・トゥ・リフレッシュ（引っ張って更新）機能を使用すると、リストが上端に達した際により多くのデータ項目を要求する操作をユーザーに提供することができます。 これは、データ項目のリストが時間の経過とともに定期的に更新されるシナリオで特に役立ちます。 メールメッセージのリストをプルダウンして更新できるメールクライアントを検討してください。

プル・トゥ・リフレッシュの有効化

RadListViewの「入門」セクションで説明されている設定を確認してください。 プル・トゥ・リフレッシュ動作は以下のように"pullToRefresh"プロパティを設定することにより有効になります。

例1：RadListViewでプル・トゥ・リフレッシュを有効にする：

<lv:RadListView items="{{ dataItems }}" pullToRefresh="true" pullToRefreshInitiated="{{onPullToRefreshInitiated}}" backgroundColor="blue">

また、新しいデータリクエストを行うには、 "pullToRefreshInitiatedEvent"イベントを定義する必要があります。 このイベントは、ユーザーがリストを引っ張って追加のデータをリクエストしたときに発生します。 新しいアイテムを取得してソースコレクションの先頭に追加したら、次のように操作が完了したことをリストコントロールに通知する必要があります。

例2：pullToRefreshInitiatedEventの処理：

public onPullToRefreshInitiated(args: ListViewEventData) {
    const that = new WeakRef(this);
    setTimeout(function () {
        const initialNumberOfItems = that.get()._numberOfAddedItems;
        for (let i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
            if (i > posts.names.length - 1) {
                break;
            }
            const imageUri = androidApplication ? posts.images[i].toLowerCase() : posts.images[i];

            that.get().dataItems.splice(0, 0, new DataItem(posts.names[i], posts.titles[i], posts.text[i], "res://" + imageUri));
            that.get()._numberOfAddedItems++;
        }
        const listView = args.object;
        listView.notifyPullToRefreshFinished();
    }, 1000);
}

ご覧のとおり、ここではコアNativeScriptフレームワークのtimerモジュール部分を使用しています。 コールバック関数は、1秒が経過すると実行されます。 次に、データがソースコレクションに送られ、 "notifyPullToRefreshFinished()"メソッドが呼び出されて リストビューに通知されます。

インジケーターのスタイル

プル・トゥ・リフレッシュ インジケーターの前景色と背景色をカスタマイズできます。 カスタマイズは、PullToRefreshStyle クラスのインスタンスを受け入れる PullToRefreshStyle プロパティを介して行われます。 このクラスは、次のプロパティを公開します。

• "indicatorColor" - プル・トゥ・リフレッシュインジケーターの前景色をスタイルするために使用されます
• "indicatorBackgroundColor" - プル・トゥ・リフレッシュインジケーターの背景色をスタイルするために使用

以下は、"RadListView"のXML定義でインジケーターをカスタマイズする方法のXMLサンプルです。

<lv:RadListView.pullToRefreshStyle>
	<lv:PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="blue"/>
</lv:RadListView.pullToRefreshStyle>

参考文献

このシナリオを実際に見てみたいですか？ GitHubのSDKサンプルリポジトリを確認してください。これとNativeScript UIを使用した他の多くの実用的な例があります。

• プル・トゥ・リフレッシュの例

役立つと思われる関連記事：

• ロードオンデマンド