Xamarin逆引きTips
Xamarin.Formsでツールバーアイテムによるメニューを設置するには？
PageクラスのToolbarItemsプロパティを使って、画面の上部にツールバー（Android）／ナビゲーションバー（iOS）を表示する方法を解説する。
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］ボタンを押す。
3. テキストメニュー
テキストメニューを追加するには、App.csファイルを以下のように修正する。
|
……省略……
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" });
}
}
}
|
Xamarin.Formsでは、メニューの表示場所となる画面上部の余白は、NavigationPageでないと利用できない。そこで、AppクラスのMainPageプロパティには、NavigationPageクラスを生成してセットし、その最初のページとしてMyPageを登録した（1）。
ContentPageの基底クラスであるPageには、ToolbarItemsというプロパティがある。このToolbarItemsプロパティにToolbarItemオブジェクトを追加することで、画面上部にメニュー項目が追加される（2）。
ToolbarItemオブジェクトにはTextプロパティがあり、ここにメニュー項目に表示する文字列を指定する（3）。また、Commandプロパティには、そのメニュー項目が選択された時のコマンドをセットできる（4）。
このコードを実行すると次のような画面になる。
［menu1］をタップ
［menu1］をタップ
4. メニュー項目の表示順序
メニュー項目は、ToolbarItemオブジェクトに追加した順に左から並べられるが、強制的に順番を指定することもできる。順番を指定したメニューを作成するには、App.csファイルを次のように修正する。
|
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
}
}
}
|
ToolbarItemオブジェクトのPriorityプロパティに数値を指定することで（312）、その数値順で「3番目、1番目、2番目」にメニュー項目が表示される。次の画面は、その実行例である。
5. アイコン表示
ToolbarItemオブジェクトのIconプロパティに画像を指定すると、アイコンメニューが表示される。アイコンメニューを表示するには、App.csファイルを次のように修正する。
|
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
}
}
}
|
※本稿で使った画像は、次のリンク先のものである： Menu22.png ／ Menu33.png ／ Menu44.png ／ Menu66.png
1／2／3／4では、順に22／33／44／66ピクセルの大きさの画像を指定している。なお、ここで使用する画像は、iOSの場合、「Resources」フォルダー、Androidの場合、「Resources/drawable」フォルダーにそれぞれ置かなければならない（図5）。
このコードを実行すると次のような画面になる。
文字列と画像の両方は表示されない。Iconプロパティを指定した場合、Textプロパティに設定した文字列は表示されない。また、アイコン画像の大きさは自動的に調整されないため、適切なサイズ*2の画像を用意する必要がある。
- *2 iOSの「ヒューマンユーザーインターフェースガイドライン」では、タッチ可能な領域のサイズを約44ｘ44ポイントとしている。
6. 表示位置
ToolbarItemオブジェクトのOrderプロパティでメニューの表示位置を指定できる。表示位置を指定するには、App.csファイルを次のように修正する
|
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
});
}
}
}
|
Orderプロパティには、ToolbarItemOrder列挙型を指定するが、1ではPrimary、2ではSecondaryを指定している。
このコードを実行すると次のような画面になる。
7. コマンド記述要領
最後に、メニュー選択時に実行するコマンドの記述要領をいくつか紹介する。
|
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");
}
}
}
|
1は、ToolbarItemオブジェクトのClickedイベントにハンドラーを追加している。
また、2は、Commandクラスのインスタンスを生成し、そのコンストラクターの引数に別に定義したメソッド（3）を指定している。
4は、2と同様にCommandオブジェクトを生成しているが、ToolbarItemオブジェクトのCommandParameterプロパティ（5）を、そのコマンドのパラメーターとして使用するパターンである。
それぞれ、実行すると同じように動作する（図8）。
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）。
※以下では、本稿の前後を合わせて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でも提供されている。その基本的な使用方法を解説。また、セルの高さ指定／プログラムによるスクロール／画像表示などの方法も説明する。
