Xamarin.Forms で ListView を最後まで表示するとクルクルを表示してその間に処理をするには～その１～

こんにちは。エクセルソフトの田淵です。

併せて読みたい：
Xamarin.Forms で最後まで表示すると動的にデータが増える ListView を作るには - Xamarin 日本語情報
 Xamarin.Forms で ListView を最後まで表示するとクルクルを表示してその間に処理をするには～その２～ - Xamarin 日本語情報
を追記しました。

上記エントリーでは最後が表示されるとひたすらデータを増やしていましたが、一般的なスマホアプリで一瞬でデータを増やせるわけもなく、ActivityIndicator を表示するのが一般的ですね。その方法その１です。

2015/8/27 時点での最新バージョン Xamarin.Forms 1.4.4.6392 を使用しています。

サンプル

GitHub をアップデートしました。

ListView の下に ActivityIndicator を表示します。

本エントリーでは表示部分のみを記載しています。ListView のデータソースなどは Xamarin.Forms で最後まで表示すると動的にデータが増える ListView を作るには - Xamarin 日本語情報をご参照ください。

StackLayout で ListView の下に ActivityIndicator を入れて更新処理をする時だけ IsVisible を true にして終わったら false にすればいいです。StackLayout なので簡単です。

例えば以下のような感じです。

XAML:

<StackLayout>
    <ListView>
      省略
    </ListView>
    <StackLayout x:Name="stack" 
                    Padding="10"
                    IsVisible="False">
        <ActivityIndicator x:Name="indicator"
                            IsRunning="True" />

    </StackLayout>
</StackLayout>

C#:

var list = new ListView
{
    省略
};

stack = new StackLayout
{
    IsVisible = false,
    Padding = 10,
    Children =
        {
            new ActivityIndicator { IsRunning = true },
        },
};

Content = new StackLayout
{
    Children = {
        list,
        stack,
    },
};

サンプルのコードビハインドでは

list.ItemAppearing += (object sender, ItemVisibilityEventArgs e) => {
    // ObservableCollection の最後が ListView の Item と一致した時に ObservableCollection にデータを追加する処理を行いましょう。
    if (listItems.Last() == e.Item as ListItem)
    {
        // ObservableCollection にデータを追加する処理
        stack.IsVisible = true;
        await Task.Delay(2000); // 実際の処理を入れてください。
        stack.IsVisible = false;
    }
};

という感じで 2秒ウエイトしています。

もちろんそのまま ActivityIndicator を表示しても構いませんが、読み込み中... とかの文字を出すことも多いのと、上下に少し余白が欲しかったのとで、このサンプルでは StackLayout の中に入れてます。