Xamarin.Android コントロールの配置

2015.11.10

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

1 はじめに

Xamarin.Androidで「ボタン」や「ラベル」をビューの上に配置するには、「コードによる方法」と「レイアウトファイル(axml)による方法」の2種類があります。

今回は、「ボタン」の配置と、それを押したときのイベント(トースト表示)を例にとって、この2つの方法を紹介します。

次の図は、今回サンプルで作成するアプリの画面です。

001

2 コードによる方法

アクティビティ(MainActivity)のOnCreate()は、アクティビティが起動されたとき最初に実行されるメソッドです。 通常、画面構成(コントロールの配置)などはここに記述されることになります。

下記のコードは、テンプレートで生成されるコード(MainActivity.cs)を書きなおしたものです。

まず、リニアレイアウト(縦方向配置)を生成し、その階層下にボタンを追加しています。最後に、アクティビティのルートビューとしてSetContentView()を使用してリニアレイアウトをセットしています。

全てのコントロールは、このように階層的に組み立てて行くことになります。

MainActivity.cs

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が生成されています。今回は、一から自分で作成するという意味で、こちらを削除しました。

002

(2) レイアウトファイルの追加

新しく追加するレイアウトファイル(axml)は、Resources/layoutの下に追加します。

003

「新しい項目の追加」で「Android Layout」を選択すると、拡張子axmlのファイルが生成されます。 ここでは、ファイル名をMyLayout.axmlとしました。

004

新規に作成した段階では、LinearLayout(orientation="vertical"なので縦配置)だけが配置されています。

下記は「Design」タブとドキュメントアウトラインで確認しているようすです。

005

また、「Source」タブでコードを確認すると次のようになっています。

MyLayout.axml

<?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をドラックアンドドロップでレイアウトに配置します。

006

表示文字は、ボタンをダブルクリックするか、もしくは、プロパティの「text」で変更できます。

007

(4) idの設定

コントロールは、リソースidを付与してコードから扱います。

idの設定は、ボタンを選択した状態で、プロパティの「id」に設定します。 新規にボタンを置いた状態では、「button1」となっていますが、ここではそのまま使用することにします。

008

現時点では、このidはコード上には反映されていませんが、一度コンパイルを行うと、「Resource.Degigner.cs」に自動的に追加されます。

009

この「Resource.Degigner.cs」は、Resourceのpartialクラスであり、ユーザが編集することなく、常に自動的に変更されます。

ここまで来ると、この「button1」は、Resourceクラスの中のIdクラスのプロパティとして、コードから認識可能になります。

010

この時点でのaxmlは次のとおりです。 LinearLayoutの階層下にButtonが追加されており、Buttonのtextが「OK」idが「button1」となっていることが確認できます。

MyLayout,axml

<?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 コードによる方法」の場合とまったく同じで、全部自分で編集することになります。

MainActivity.cs

[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

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

Xamarin記事一覧(SAPPOROWORKSの覚書)