読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

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

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

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

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

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 の中に入れてます。

画面はこんな感じ

f:id:ytabuchi:20150827091132p:plain:w300 f:id:ytabuchi:20150827091137p:plain:w300 f:id:ytabuchi:20150827091129p:plain:w300

Android は大きめなので分かりやすいですが iOS, Windows Phone は少し分かりにくいですね。Device.OnPlatformiOS, WinPhone は Scale プロパティを 2倍とかにしても良いかもです。

実際に使う場合は文字と一緒に以下のような感じで表示するのが良さそうです。

f:id:ytabuchi:20150827095221p:plain:w300

標準機能だけで出来るので簡単ですね。次はポップアップ的なのを表示してクルクルしたいと思います。

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。