produced by Classmethod ˗ˏˋ 技術とビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 事前登録受付中

Xamarin.Android テンプレート(Blank App)

SIN

2015.10.14

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

1 はじめに

今回は、前記事で紹介した「Xamarinによる３種類のアプローチ」の内の２番目である「Xamarin.Android」について書いています。シンプルなプロジェクトを通じて、こちらも「薄いラッパー」となっていることを実感していただければと考えています。

2 テンプレート（Blank App)

VisualStudioでプロジェクトを作成する際に、「Blank App (Android)」を選択すると下記の構造のプロジェクトが生成されます。

(1)MainActivity.cs

MainActivityは、プログラム起動時に最初に起動されるアクティビティです。テンプレートではOnCreate()がオーバライドされており、その中でResource.Layout.Mainがビューとして設定されています。

MainActivity.cs

[Activity(Label = "BlankApp", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
   int count = 1;

   protected override void OnCreate(Bundle bundle) {
       base.OnCreate(bundle);

       //ビューとしてMain.axmlを設定
       SetContentView(Resource.Layout.Main);

       //リソースID(MyButton)からButtonコントロールを取得
       Button button = FindViewById<button>(Resource.Id.MyButton);
       //ボタンがクリックされた際のイベント処理を定義
       button.Click += delegate {
           button.Text = string.Format("{0} clicks!", count++); 
       };
    }
}
</button>

このResource.Layout.Mainというのは、Resources/layoutの階層下にあるMain.axmlの事であり、このaxmlがビューとして指定されていることになります。

※テンプレートでは、Main.axmlで配置されたボタンを押した時のイベント処理が、サンプルとして記述されています。

(2)Main.axml

ソリューションエクスプローラでMain.axmlをダブルクリックすると、axmlの内容をレンダリングしたデザイン画面が表示され、LinearLayoutとButtonが配置されているのが確認できます。また、「表示(V)」-「その他のウインドウ(E)」から「ドキュメントアウトライン(D)」を表示すると、その階層構造を分かりやすく確認することもできます。 Main.axmlでは、「Design」タブから「Source」タブに切り替えることで、axmlのコードを直接編集することもできます。

Main.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">
    <Button
        android:id="@+id/MyButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello" />
</LinearLayout>

3 UIViewだけのアプリ

(1)Viewクラスの定義

Viewだけの単純なアプリが、よく入門書に紹介されていますが、本テンプレートにおいては、Viewはaxmlで定義されているため、コードで記述することはできません。そこで、ここではaxmlを使わずに自前でViewクラスを作成して表示してみたいと思います。

ソリューションエクスプローラでプロジェクトに新しいクラス（ここのでは「MyView」としました）を追加します。新しく作成したクラスはViewを継承させます。基底クラスをViewとすると、コンストラクタでContextを要求しますので、これを引数とするコンストラクタも併せて定義します。

MyView.cs

namespace BlankApp {
    class MyView:View {
        public MyView(Context context) : base(context) {

        }
    }
}

(2)Viewクラスの使用

続いて、このクラスをアクティビティのビューとして使用されるようにします。 MainActivity.csで、OnCreate()の中のコードを全部削除し、SetContentView()で、今回作成したViewクラス（MyView）を指定します。

MainActivity.cs

[Activity(Label = "BlankApp", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
    protected override void OnCreate(Bundle bundle) {
        base.OnCreate(bundle);

        //作成したMyViewをビューとしてセットする
        SetContentView(new MyView(this));

        //テンプレートで生成されたコードをコメントアウトする
        //SetContentView(Resource.Layout.Main);
        //Button button = FindViewById<button>(Resource.Id.MyButton);
        //button.Click += delegate { button.Text = string.Format("{0} clicks!", count++);};
    }
}
</button>

(3)文字列表示

入門で、よく最初に紹介されているdraw()を使用したビューへの文字列描画は、Xamarinでは次のようになります。

MyView.cs

class MyView:View {
    public MyView(Context context) : base(context) {
    }

    public override void Draw(Canvas canvas) {
        base.Draw(canvas);
        var paint = new Paint {
            Color = Color.White,
            TextSize = 40,
            AntiAlias = true
        };
        canvas.DrawText("Developers.IO", 100, 60, paint);
    }
}

もし、タイトルを非表示にしたい場合は、アクティビティ側でSetContentView()の前にRequestWindowFeature(WindowFeatures.NoTitle)を追加してください。

MainActivity.cs

[Activity(Label = "BlankApp", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity {
    protected override void OnCreate(Bundle bundle) {
        base.OnCreate(bundle);

        //タイトルを非表示にする
        RequestWindowFeature(WindowFeatures.NoTitle);

        SetContentView(new MyView(this));
    }
}