Xamarin.Forms アラートダイアログ

2015.11.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

ユーザへの警告や、選択が必要になった時、UIの1つとしてポップアップのメッセージを表示することがあります。 Xamarin.Formsでは、このような時のために、DisplayAlert及びDisplayActionSheetの2種類のアラートダイアログが用意されています。どちらのクラスも各プラットフォーム上で適当なネイティブコントロールでレンダリングされています。

2 DisplayAlert

DisplayAlertで軽易にアラートダイアログが表示できます。 3つだけパラメータを指定することで、選択のないOKボタンだけのメッセージボックスになります。

App.cs

public class App : Application {
    public App() {
        MainPage = new MyPage();
    }
}

class MyPage : ContentPage {
    public MyPage() {
        //ボタンの生成
        var button = new Button() {
            Text = "Button"
        };
        //ボタンを押した際のイベント
        button.Clicked += (s, e) => {
            //DisplayAlertの表示
            DisplayAlert("タイトル", "メッセージ", "OK");
        };
        Content = button;
    }
}
iOS Android WindowsPhone
001 002 003

第2パラメータまでセットすると、2択のインターフェースとなり、戻り値にboolを得ることができます。 なお、戻り値でプログラムを分岐させたい場合は、awaitを使用する必要があります。(ラムダ式にもasyncが必要になります)

App.cs

 //ボタンを押した際のイベント
button.Clicked += async (s, e) => {
    //DisplayAlertの表示
    var result = await DisplayAlert("タイトル", "選択してください", "OK", "キャンセル");
    //戻り値をボタンテキストにセットする
    button.Text = result.ToString();
};
iOS Android WindowsPhone
004 005 006

3 DisplayActionSheet

iOSのアクションシートと同じです。iOSでは、おなじみかも知れませんが、他のデバイスではどうなんでしょう・・・

DisplayActionSheetの第2パラメータと第3パラメータは、レンダリング位置や強調表示が、iOSのアクションシートと同じで固定になっています。nullを指定して、これを使用しないようにすることもできます。

※DisplayActionSheetは、Pageのメソッドであり、ContentPageの中で使用可能です。

App.cs

public class App : Application {
    public App() {
        MainPage = new MyPage();
    }
}

class MyPage : ContentPage {
    public MyPage(){
        //ボタンの生成
        var button = new Button(){
            Text = "Button"
        };
        //ボタンを押した際のイベント
        button.Clicked += async (s, e) =>{
            //DisplayActionSheetの表示
            var retult= await DisplayActionSheet("選択してください", "キャンセル", "削除", "編集", "コピー", "貼り付け");
            //返された文字列でボタンテキストを書き換える
            button.Text = retult; 
        };
        Content = new StackLayout{
            Padding = new Thickness(0, 20, 0, 0),//上に余白を持つ
            Children ={button,}//スタックレイアウトにボタンを1つだけ持つ
        };
    }
}
iOS Android WindowsPhone
007 008 009

4 まとめ

今回は、Xamarin.FormsにおけるポップアップUIを紹介しました。 ActionSheetがあるためか、やや、iOSに偏った印象を受けてしまいます。 ちなみに、Androidのトーストのようなメッセージ表示はありません。

githubサンプルコード(https://github.com/furuya02/Xamarin.Forms.AlertSample)

本記事は、2015年11月12日現在で最新の Xamarin.Forms 1.5.1.6471 を使用して作成されています。

5 参考リンク

Xamarin Developers Guide 「Working with Pop-ups」

この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015

Xamarin記事一覧(SAPPOROWORKSの覚書)