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

clock-up-blog

go-mi-tech

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

Xamarin AdventCalendar

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

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

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

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

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

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

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

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);
    }
}

おしまい

ACR User Dialogs Plugin for Xamarin はローディング表示以外にもものすごくものすごく多彩なダイアログ関連機能が提供されています。

https://github.com/aritchie/userdialogs/tree/master/src ここの Sample プロジェクトを実際に実行してみると、各機能のチュートリアルが簡単に試せるようになっているので興味のある方は試してみると良いです。

});