Xamarin.Forms でローディング中表示を行う (Acr.UserDialogs 利用)

Xamarin(その2) Advent Calendar 2016 5日目の記事です。

Xamarin.Forms でローディング中表示を行いたい

f:id:kobake:20161205172503g:plain
こういうのをやります。

今回のサンプルプロジェクト

以下に置いてあります。Visual Studio 2015 あたりで開けばそのまま動かせるはず。

GitHub - xamarin-samples/XamarinFormsLoading: Loading indicator sample

ローディング表示の実現方法

いろんな方法があると思いますが僕のオススメは以下ライブラリの利用です。

ACR User Dialogs Plugin for Xamarin

NuGet パッケージなので導入も簡単です。

注記

一応 Xamarin.Forms 用のライブラリということで Android, iOS, UWP 等等対応されているのですが、今回は Android のみで検証を行っております。（Droid プロジェクト側を多少いじる必要がありましたので、他のプラットフォームにおいても何かしらいじる必要のあるところはあるかもしれません）

ACR User Dialogs の導入

f:id:kobake:20161205163903p:plain:w400
Package Manager Console 上で「Install-Package Acr.UserDialogs」を実行する。今回は PCL プロジェクトと Droid プロジェクトの両方に対して導入を行う。

PCL プロジェクトへの導入

f:id:kobake:20161205164349p:plain:w500

PM> Install-Package Acr.UserDialogs
....
Successfully installed 'Acr.UserDialogs 6.3.2' to XamarinFormsLoading

Droid プロジェクトへの導入

f:id:kobake:20161205164356p:plain:w500

PM> Install-Package Acr.UserDialogs
....
Successfully installed 'Xamarin.Android.Support.v7.MediaRouter 23.3.0' to XamarinFormsLoading.Droid
....

Droid プロジェクト側の Activity 処理に Acr.UserDialogs の初期化処理を入れる

これを忘れるとうまく動かないので注意。

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        ........
        global::Xamarin.Forms.Forms.Init(this, bundle);
        Acr.UserDialogs.UserDialogs.Init(this); // ★ここを追加
        LoadApplication(new App());
    }
}

PCL コード側でローディング表示処理を呼び出してみる

たとえば以下のような時間のかかる処理があるとしたら

private async void IncrementButton_Clicked(object sender, EventArgs e)
{
    await Task.Delay(1000);
    m_count++;
    CountLabel.Text = "COUNT = " + m_count;
    await Task.Delay(1000);
}

以下のように「using (UserDialogs.Instance.Loading("doing...")){ }」で囲んであげればローディング表示が施されます。かなりお手軽。

using Acr.UserDialogs;
....
private async void IncrementButton_Clicked(object sender, EventArgs e)
{
    using (UserDialogs.Instance.Loading("doing..."))
    {
        await Task.Delay(1000);
        m_count++;
        CountLabel.Text = "COUNT = " + m_count;
        await Task.Delay(1000);
    }
}