Xamarin.Android コントロールの配置
1 はじめに
Xamarin.Androidで「ボタン」や「ラベル」をビューの上に配置するには、「コードによる方法」と「レイアウトファイル（axml）による方法」の２種類があります。
今回は、「ボタン」の配置と、それを押したときのイベント（トースト表示）を例にとって、この２つの方法を紹介します。
次の図は、今回サンプルで作成するアプリの画面です。
2 コードによる方法
アクティビティ（MainActivity)のOnCreate()は、アクティビティが起動されたとき最初に実行されるメソッドです。 通常、画面構成（コントロールの配置）などはここに記述されることになります。
下記のコードは、テンプレートで生成されるコード(MainActivity.cs)を書きなおしたものです。
まず、リニアレイアウト（縦方向配置）を生成し、その階層下にボタンを追加しています。最後に、アクティビティのルートビューとしてSetContentView()を使用してリニアレイアウトをセットしています。
全てのコントロールは、このように階層的に組み立てて行くことになります。
public class MainActivity : Activity {
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
//タイトルを非表示
RequestWindowFeature(WindowFeatures.NoTitle);
//リニアレイアウトを生成
var linearLayout = new LinearLayout(this) {
Orientation = Orientation.Vertical //子コントロールを縦方向に配置する
};
//ボタンの生成
var button = new Button(this) {
Text = "OK"
};
//ボタンをクリックした時のイベント処理
button.Click += (sender, e) => {
//トーストを表示
Toast.MakeText(this, "メッセージ", ToastLength.Short).Show();
};
//リニアレイアウトにボタンを追加
linearLayout.AddView(button);
//ルートビューとして、リニアレイアウトを設定する
SetContentView(linearLayout);
}
}
3 レイアウトファイル（axml）による方法
レイアウトファイル（axml）を使用して、先のものと同じ動作をするようにしてみます。
(1) Main.axmlの削除
テンプレートでは既にMain.axmlが生成されています。今回は、一から自分で作成するという意味で、こちらを削除しました。
(2) レイアウトファイルの追加
新しく追加するレイアウトファイル（axml）は、Resources/layoutの下に追加します。
「新しい項目の追加」で「Android Layout」を選択すると、拡張子axmlのファイルが生成されます。 ここでは、ファイル名をMyLayout.axmlとしました。
新規に作成した段階では、LinearLayout（orientation="vertical"なので縦配置）だけが配置されています。
下記は「Design」タブとドキュメントアウトラインで確認しているようすです。
また、「Source」タブでコードを確認すると次のようになっています。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
(3) コントロールの配置
ツールボックスからButtonをドラックアンドドロップでレイアウトに配置します。
表示文字は、ボタンをダブルクリックするか、もしくは、プロパティの「text」で変更できます。
(4) idの設定
コントロールは、リソースidを付与してコードから扱います。
idの設定は、ボタンを選択した状態で、プロパティの「id」に設定します。 新規にボタンを置いた状態では、「button1」となっていますが、ここではそのまま使用することにします。
現時点では、このidはコード上には反映されていませんが、一度コンパイルを行うと、「Resource.Degigner.cs」に自動的に追加されます。
この「Resource.Degigner.cs」は、Resourceのpartialクラスであり、ユーザが編集することなく、常に自動的に変更されます。
ここまで来ると、この「button1」は、Resourceクラスの中のIdクラスのプロパティとして、コードから認識可能になります。
この時点でのaxmlは次のとおりです。 LinearLayoutの階層下にButtonが追加されており、Buttonのtextが「OK」idが「button1」となっていることが確認できます。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:text="OK"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button1" />
</LinearLayout>
(5) イベント処理
下記のコードは、今、作成したレイアウト（MyLayout）をビューとして設定し、ボタンにイベント（トースト表示）を追加したものです。 アクティビティへのレイアウトのセットには、SetContentView()を使用し、ボタンは、idを頼りに、FindViewById()で取得します。
イベント処理のコードは、「1 コードによる方法」の場合とまったく同じで、全部自分で編集することになります。
[Activity(Label = "App1", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
int count = 1;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
//タイトルを非表示
RequestWindowFeature(WindowFeatures.NoTitle);
//ビューとして、ライナーレイアウトを設定する
SetContentView(Resource.Layout.MyLayout);
//リソースIDからボタンを取得する
var button = FindViewById<Button>(Resource.Id.button1);
//ボタンをクリックした時のイベント処理
button.Click += (sender, args) => {
//トーストを表示
Toast.MakeText(this, "メッセージ", ToastLength.Short).Show();
};
}
}
4 まとめ
Androidでレイアウトを記述できるaxmlは、単純にコントロールを配置するだけの機能しかなく、WindowsのXAMLのようにデータバインディングを記述したり、iOSのストーリーボードのように、イベントへのデリゲートを記述することはできません。これは、ある意味、ネイティブの構造を尊重していると言えます。
今回、紹介したような簡単なサンプルだと、圧倒的にコードで書いた方が、簡単です。しかし、実際のアプリでは、画面が非常に複雑になるだろうし、また、ビューとコントローラーの分離という意味では、axmlでの作業が大事なると思います。
5 参考リンク
Xamarin Developer Hello, Android
