Xamarin逆引きTips

Xamarin逆引きTips

Xamarin.Formsでツールバーアイテムによるメニューを設置するには?

2015年2月25日

PageクラスのToolbarItemsプロパティを使って、画面の上部にツールバー(Android)/ナビゲーションバー(iOS)を表示する方法を解説する。

古谷 誠進(@furuya02
  • このエントリーをはてなブックマークに追加

 Xamarin.FormsのPageクラスには、ToolbarItemsというプロパティがあり、これを使用することで、画面の上部にメニューを表示できる。今回は、この要領について解説する*1

 なお、画面の上部というのは、Androidにおけるツールバー、iOSにおけるナビゲーションバーを指している。

  • *1 なお本Tipsは、Windows上でVisual Studio 2013を使用してXamarin.Forms開発をすることを前提としている(編集部注: Mac上のXamarin Studioでも同様の手順で、本稿の内容が実現できることは確認している)。使用しているXamarin.Formsのバージョンは、プロジェクト作成時に利用されている「1.3.1.6296」である。

1. シナリオ

 まず、Xamarin.FormsでNavigationPageを使用した際に確保される画面上部のエリアに、テキストのメニューを配置する。続いて、このメニューをアイコン形式にしたり、表示順を変更したりできることを解説する。また、メニュー選択時のコマンドの各種処理要領についても解説する。

2. Xamarin.Formsプロジェクトを作成する

 メニューバーの[ファイル]-[新規作成]-[プロジェクト]から表示したダイアログで、[テンプレート]-[Visual C#]-[Mobile Apps]-[Blank App (Xamarin.Forms Portable)]を選択し、名前を「ToolbarItemSample」として[OK]ボタンを押す。

図1 「Blank App (Xamarin.Forms Portable)」の新規作成

3. テキストメニュー

 テキストメニューを追加するには、App.csファイルを以下のように修正する。

C#
……省略……
namespace ToolbarItemSample {
  public class App : Application {
    public App() {
      MainPage =  new NavigationPage(new MyPage()); // <-1
    }
    
    ……省略……
  }

  internal class MyPage : ContentPage {
    public MyPage() {

      ToolbarItems.Add(new ToolbarItem { // <-2
        Text = "menu1", // <-3
        Command = new Command(() => DisplayAlert("Selected", "menu1", "OK")) //<-4
      });
      ToolbarItems.Add(new ToolbarItem { Text = "menu2" });
      ToolbarItems.Add(new ToolbarItem { Text = "menu3" });
    }
  }
}
テキストメニューを追加するコード(App.cs)

 Xamarin.Formsでは、メニューの表示場所となる画面上部の余白は、NavigationPageでないと利用できない。そこで、AppクラスのMainPageプロパティには、NavigationPageクラスを生成してセットし、その最初のページとしてMyPageを登録した(1)。

 ContentPageの基底クラスであるPageには、ToolbarItemsというプロパティがある。このToolbarItemsプロパティにToolbarItemオブジェクトを追加することで、画面上部にメニュー項目が追加される(2)。

 ToolbarItemオブジェクトにはTextプロパティがあり、ここにメニュー項目に表示する文字列を指定する(3)。また、Commandプロパティには、そのメニュー項目が選択された時のコマンドをセットできる(4)。

 このコードを実行すると次のような画面になる。

[menu1]をタップ

[menu1]をタップ

図2 メニュー表示と選択時のアラート表示(iOS)
図2 メニュー表示と選択時のアラート表示(iOS)
[menu1]をタップ

[menu1]をタップ

図3 メニュー表示と選択時のアラート表示(Android)
図3 メニュー表示と選択時のアラート表示(Android)

4. メニュー項目の表示順序

 メニュー項目は、ToolbarItemオブジェクトに追加した順に左から並べられるが、強制的に順番を指定することもできる。順番を指定したメニューを作成するには、App.csファイルを次のように修正する。

C#
namespace ToolbarItemSample {

  ……省略……

  internal class MyPage : ContentPage {
    public MyPage() {
      ToolbarItems.Add(new ToolbarItem { Text = "menu1", Priority = 3 });// <-3
      ToolbarItems.Add(new ToolbarItem { Text = "menu2", Priority = 1 });// <-1
      ToolbarItems.Add(new ToolbarItem { Text = "menu3", Priority = 2 });// <-2
    }
  }
}
メニュー項目の表示順序を指定するコード(App.cs)

 ToolbarItemオブジェクトのPriorityプロパティに数値を指定することで(312)、その数値順で「3番目、1番目、2番目」にメニュー項目が表示される。次の画面は、その実行例である。

図4 表示順序を変えたメニュー(iOS) 図4 表示順序を変えたメニュー(Android)
図4 表示順序を変えたメニュー(iOS/Android)

5. アイコン表示

 ToolbarItemオブジェクトのIconプロパティに画像を指定すると、アイコンメニューが表示される。アイコンメニューを表示するには、App.csファイルを次のように修正する。

C#
namespace ToolbarItemSample {

  ……省略……

  internal class MyPage : ContentPage {
    public MyPage() {
      ToolbarItems.Add(new ToolbarItem { Text = "menu1", Icon = "Menu22.png" }); // ←1
      ToolbarItems.Add(new ToolbarItem { Text = "menu2", Icon = "Menu33.png" }); // ←2
      ToolbarItems.Add(new ToolbarItem { Text = "menu3", Icon = "Menu44.png" }); // ←3
      ToolbarItems.Add(new ToolbarItem { Text = "menu4", Icon = "Menu66.png" }); // ←4
    }
  }
}
アイコンメニューの表示するコード(App.cs)

本稿で使った画像は、次のリンク先のものである: Menu22.pngMenu33.pngMenu44.pngMenu66.png

 1234では、順に22/33/44/66ピクセルの大きさの画像を指定している。なお、ここで使用する画像は、iOSの場合、「Resources」フォルダー、Androidの場合、「Resources/drawable」フォルダーにそれぞれ置かなければならない(図5)。

図5 画像の配置(iOS) 図5 画像の配置(Android)
図5 画像の配置(iOS/Android)

 このコードを実行すると次のような画面になる。

図6 アイコンメニュー(iOS) 図6 アイコンメニュー(Android)
図6 アイコンメニュー(iOS/Android)

 文字列と画像の両方は表示されない。Iconプロパティを指定した場合、Textプロパティに設定した文字列は表示されない。また、アイコン画像の大きさは自動的に調整されないため、適切なサイズ*2の画像を用意する必要がある。

6. 表示位置

 ToolbarItemオブジェクトのOrderプロパティでメニューの表示位置を指定できる。表示位置を指定するには、App.csファイルを次のように修正する

C#
namespace ToolbarItemSample {

  ……省略……

  internal class MyPage : ContentPage {
    public MyPage() {
      ToolbarItems.Add(new ToolbarItem {
        Text = "menu1",
        Icon = "Menu44.png",
        Order = ToolbarItemOrder.Primary // <-1
      
      }); 
      ToolbarItems.Add(new ToolbarItem {
        Text = "menu2",
        Icon = "Menu44.png",
        Order = ToolbarItemOrder.Secondary // <-2
      });
    }
  }
}
メニューの表示位置を指定するコード(App.cs)

 Orderプロパティには、ToolbarItemOrder列挙型を指定するが、1ではPrimary2ではSecondaryを指定している。

 このコードを実行すると次のような画面になる。

図7 表示位置を指定したメニュー(iOS) 図7 表示位置を指定したメニュー(Android)
図7 表示位置を指定したメニュー(iOS/Android)

7. コマンド記述要領

 最後に、メニュー選択時に実行するコマンドの記述要領をいくつか紹介する。

C#
namespace ToolbarItemSample {

  ……省略……

  internal class MyPage : ContentPage {
    public MyPage() {
      var menu1 = new ToolbarItem {Text = "menu1"};
      menu1.Clicked += (s, a) => {     // <-1
        DisplayAlert("Selected", ((ToolbarItem) s).Text, null, "OK");
      };
      ToolbarItems.Add(menu1);

      var menu2 = new ToolbarItem {
        Text = "menu2",
        Command = new Command(Click)   // <-2
      };
      ToolbarItems.Add(menu2);

      var menu3 = new ToolbarItem {
        Text = "menu3",
        CommandParameter = "menu3",    // <-5
        Command = new Command(key => { // <-4
          DisplayAlert("Selected", (string) key, null, "OK");
        })
      };
      ToolbarItems.Add(menu3);

    }

    // 3
    private void Click() {
      DisplayAlert("Selected", "menu2", null, "OK");
    }
  }
}
メニュー選択時に実行するコマンドの3つの記述パターンのコード例(App.cs)

 1は、ToolbarItemオブジェクトのClickedイベントにハンドラーを追加している。

 また、2は、Commandクラスのインスタンスを生成し、そのコンストラクターの引数に別に定義したメソッド(3)を指定している。

 4は、2と同様にCommandオブジェクトを生成しているが、ToolbarItemオブジェクトのCommandParameterプロパティ(5)を、そのコマンドのパラメーターとして使用するパターンである。

 それぞれ、実行すると同じように動作する(図8)。

図8 メニュー選択時に実行するコマンドの3つの記述パターンの実行例(iOS) 図8 メニュー選択時に実行するコマンドの3つの記述パターンの実行例(Android)
図8 メニュー選択時に実行するコマンドの3つの記述パターンの実行例(iOS/Android)

8. まとめ

 今回は、Xamarin.Formsの画面上部にメニューを追加する方法を紹介した。ToolbarItemsプロパティにToolbarItemを追加するという記述要領は、Xamarin.Formsから見れば全く同じだが、プラットフォームごと表示が大きく違う場合があるので注意が必要である(Windows Phoneの場合の表示をコラムで紹介している)

【コラム】Windows PhoneでのToolbarItemメニュー

 本記事では、AndroidおよびiOSの動作しか紹介していないが、Visual Studioを使用してXamarin.FormsのMobile Appsを作成すると、Windows Phone用のプロジェクトも同時に生成されるので、本稿の手順でメニューを表示した場合の動作内容を簡単に紹介しておこう。

 Windows Phoneでは、今回紹介したメニューは、画面下部に表示される(図9)。

図9 Windows Phoneでの実行画面
図9 Windows Phoneでの実行画面

※以下では、本稿の前後を合わせて5回分(第34回~第38回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

34. Xamarin.FormsでBoxViewコントロールを拡張するには?

四角形を描画するBoxViewコントロールを拡張してネイティブ側で描画することで、角丸・枠線・影付きなどを実現する方法を説明する。

35. Xamarin.Formsでタッチイベントを処理するには?(iOS/Androidの各種ジェスチャー対応)

iOS/Androidにおけるタップやスワイプなどの各種ジェスチャーを、Xamarin.Formsで処理する方法を解説する。

36. 【現在、表示中】≫ Xamarin.Formsでツールバーアイテムによるメニューを設置するには?

PageクラスのToolbarItemsプロパティを使って、画面の上部にツールバー(Android)/ナビゲーションバー(iOS)を表示する方法を解説する。

37. MvvmCrossのプロジェクトをセットアップするには?

クロスプラットフォーム開発を支援するXamarin用ライブラリの「MvvmCross」を使ってiOS/Androidアプリ開発を行うためのプロジェクトの作成方法を説明する。

38. Xamarin.FormsでListViewコントロールを使用するには?

データの一覧を表示できる「リストビュー」はXamarin.Formsでも提供されている。その基本的な使用方法を解説。また、セルの高さ指定/プログラムによるスクロール/画像表示などの方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!