Android アプリを Xamarin.Android に書き換えるシリーズ(1) です。
※Android サンプルアプリ MediaRecorder ( https://github.com/googlesamples/android-MediaRecorder )
■ プロジェクトの新規作成
Xamarin.Android のアプリを作るので最初はプロジェクト(ソリューション)の新規作成からです。
Mac の場合
・Visual Studio for Mac を起動します。
・メニューの ファイル > 新しいソリューション を選択します。
・[新しいプロジェクト用のテンプレートを選択する] で Android > アプリ > (全般) の Android アプリ (C#) を選択し、[次へ] をクリックします。
・[アプリ名] に適当な名前を入力し、[次へ] をクリックします。
・[プロジェクト名] [ソリューション名] は特に変える必要はありません。[場所] は好みの場所があれば変更してください。
・[作成] をクリックします。
Windows の場合
・Visual Studio (2017) を起動します。
・メニューの ファイル > 新規作成 > プロジェクト を選択します。
・[新しいプロジェクト] で Visual C# > Android > からのアプリ(Android) を選択します。
・[名前] に適当なアプリケーション名を入力します。[場所] は好みの場所があれば変更してください。
・[OK] をクリックします。
■ UI の移植
Xamarin はネイティブの UI 定義が使えることが特徴です。
ネイティブの UI 定義が使えるとは、Android で言えば、Android(Java) のプロジェクトで res フォルダー内にある .axml や .xml、画像ファイル などをそのまま使うということです。
Mac の場合
res フォルダーは Xamrin では Resources フォルダになります。
・Android(Java) プロジェクトの res フォルダーの中身(フォルダー、ファイル)を、Xamarin プロジェクトの Resources フォルダーにコピーします。
・Visual Studio for Mac の [ソリューション] の Resources を右クリック(二本指タップ)します。
・追加 > フォルダーからファイルを追加 を選択します。
・Resources フォルダーを選択し、[開く] をクリックします。
・[Resources から追加するファイルを選ぶ] で [すべて含める] をクリックします。
・全てチェック ON になっていることを確認し、[OK] をクリックします。
Windows の場合
res フォルダーは Xamrin では Resources フォルダーになります。
・Android(Java) プロジェクトの res フォルダーの中身(フォルダー、ファイル)を、Xamarin プロジェクトの Resources フォルダーにコピーします。
・(Win+e などで)エクスプローラーを開き、Resources フォルダー内のフォルダーをすべて選択しドラッグ、Visual Studio のソリューションエクスプローラー上の Resources フォルダーにドロップします。
・タイトル「ファイルを新しい場所に移動しますか？」メッセージ「１つ以上のファイルを "XXXXXXX\Resources" に移動します。この操作は長時間かかることがあります。」のダイアログで [OK] をクリックします。
共通
・「ファイルが見つかりません」というエラーが出て、Resources\layout\Main.axml 無いとされる場合、ソリューションエクスプローラーから Main.axml ファイルを削除します。
■ UI の適用
Xamarin はネイティブの UI 定義が使えることが特徴です。
axml などのファイルを使えるばかりでなく、Activity も Activity クラスで定義します。
また、先程コピーしたリソースファイルも、自動生成される Resource クラスに定数として定義されます。
(Android(Java) では R でしたが Xamarin では Resource になります)
また、Activity クラスのメソッドなども基本、Java と同じものが定義されており、同じ使い方になります。
ただし、メソッド名などは C# の流儀に変わっているので少し名前が変更されています。
例えば Java では onCreate メソッドでしたが、C# では OnCreate メソッドになっています。
Activity の書き換え
・ソリューションエクスプローラー上で、MainActivisy.cs をバブルクリックして開きます。
・7 行目あたりに
[Activity(Label = "XamMediaRecorder", MainLauncher = true, ...
という記述があります。
これが Activity に対する設定になります。Android では AndroidManifest.xml 内に記述していましたが、Xamarin では Activity クラスの属性として設定します。
属性とは、Java で言うところのアノテーションに当たる機能です。
この属性を先程追加したリソースを参照するよう、次のように変更します。
[Activity(Label = "@string/app_name", MainLauncher = true, ScreenOrientation = ScreenOrientation.Landscape)]
・ここでビルドを行うと「ScreenOrientation が見つからない」という様なエラーになります。
ScreenOrientation クラスの存在する名前空間(Java のパッケージに当たる機能)を using (Java でいう import に当たる機能) で宣言します。
ファイルの先頭の using の塊に次を追加します。
using Android.Content.PM;
この追加はエラーの発生している View にカーソルを合わせて、Mac の場合は alt+enter > クイック修正、Windows の場合は ctrl+. から自動で追加することもできます。
・また、Export 属性を使用する場合、dll の参照を追加する必要があります。
Mac の場合は、ソリューション上の [参照] を右クリック(二本指タップ) > [参照の編集] で開くダイアログで。
Windows の場合は、[参照] を右クリック > [参照の追加] で開くダイアログで [アセンブリ] を選択し。
Mono.Android.Export にチェックをつけて [OK] をクリックします。
・画面レイアウトの定義も、先程追加したリソースを参照するよう、次のように変更します。
変更箇所は15〜17行目あたりにあります。
変更前
SetContentView(Resource.Layout.Main);
変更後
SetContentView(Resource.Layout.sample_main);
・Mac の場合、OnCreate メソッド内に次のようなコードが書かれています。
Button button = FindViewById<Button(Resource.Id.button_capture); button.Click += delegate {button.Text = $"{count++} clicks!";
このコードは、不要なので削除します。
イベントハンドラメソッドの作成
サンプルの画面定義にはボタンクリックのイベントが設定されています。
このイベントのハンドラとなるメソッドを MainActivity に作成します。
・MainActivity クラスに次のメソッド定義を追加します。
Java.Interop.Export 属性で定義に設定されているメソッド名を設定することがポイントです。
[Java.Interop.Export("onCaptureClick")]
public void OnCaptureClick(View view)
{
}
・ここでビルドを行うと「View が見つからない」という様なエラーになります。
View クラスの存在する名前空間(Java のパッケージに当たる機能)を using (Java でいう import に当たる機能) で宣言します。
ファイルの先頭の using の塊に次を追加します。
using Android.Views;
この追加はエラーの発生している View にカーソルを合わせて、Mac の場合は alt+enter > クイック修正、Windows の場合は ctrl+. から自動で追加することもできます。
・また、Export 属性を使用する場合、dll の参照を追加する必要があります。
Mac の場合は、ソリューション上の [参照] を右クリック(二本指タップ) > [参照の編集] で開くダイアログで。
Windows の場合は、[参照] を右クリック > [参照の追加] で開くダイアログで [アセンブリ] を選択し。
Mono.Android.Export にチェックをつけて [OK] をクリックします。
ここまでで、MainActivity.cs は次の様になります。
using Android.App; using Android.Widget; using Android.OS; using Android.Content.PM; using Android.Views; namespace XamMediaRecorder { [Activity(Label = "@string/app_name", MainLauncher = true, ScreenOrientation = ScreenOrientation.Landscape)] public class MainActivity : Activity { protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.sample_main); } [Java.Interop.Export("onCaptureClick")] public void OnCaptureClick(View view) { } } }
■ UI の確認
これだけで、UI の移植が完了しました。
F5 キーで実行し画面を確認しましょう。
次の様な画面が表示されていれば成功です。
■ 次回予定
ここまでで UI の移植は完了しました。
次回以降でロジックの移植を行って行きます。
