[Visual Studio][Xamarin][CrossPlatform] 新規プロジェクトを作成する

前回まではiOSやAndroidのネイティブアプリの作成方法を見てきました。

今回からXamarin.Formsを使用したクロスプラットフォームの開発手法を見ていきます。

そもそも、クロスプラットフォーム開発って何でしょう?

現在世の中に出回っているデバイスはA

ndroidかiOSのデバイスが主流です。で、アプリを作成する際に、それぞれのOS用にコーディングするのは時間が掛かりますし、非効率的です。そこで仕様が異なるOSやデバイスで、同じ仕様のアプリを作成できるようにしたものが、クロスプラットフォーム開発と呼ばれいてます。

Xamarinはこのクロスプラットフォーム開発ができる開発環境です。

では、新規プロジェクトでどれを選べばよいかを見ていきましょう。

新しいプロジェクトの作成ダイアログを開いたら、左側で[Visual C#]-[Windows]-[Cross Platform]を選択します。右側にはクロスプラットフォームのプロジェクト一覧が表示されます。この中から「Blank Xaml App(Xamarin.Forms.Portable)」を選択します。あとはプロジェクト名を入力して[OK]を押すとプロジェクトの作成が開始されます。

クロスプラットフォーム開発のプロジェクト作成しばらく待つと(結構待ちます)。

途中UWPアプリプロジェクトのバージョン選択ダイアログが表示されるのですが、現時点ではAniversary Editionを選択しない方がいいようです。ということでBuild 10586を選択します。

UWPターゲット選択

プロジェクトの作成が完了すると、使用している環境にもよりますが大量の警告やらエラーが出まくります。

いったんビルドすることで消えるエラーや警告があります。それでも消えない場合はNugetパッケージマネージャを起動してXamarin関連のアップデートがないかを確認してください。

Nugetマネージャ

無事エラーが取れたら、ソリューションエクスプローラーを確認してみましょう(エラーの解決方法は随時公開していきたいと思います)。

ソリューションエクスプローラー

一番上が各デバイスの共通となるプロジェクトで、それ以外がデバイス毎のプロジェクトになります。

上の例を表示すると以下のようになります

プロジェクト名 対応デバイス
BlankXamlAppSample 各デバイス共通のプロジェクト
BlankXamlAppSample.Droid Android
BlankXamlAppSample.iOS iOS
BlankXamlAppSample.UWP(Universal Windows) Windows(UWPアプリ)
BlankXamlAppSample.Windows(Windows 8.1) Windows 8.1向け
BlankXamlAppSample.WinPhone(Windows Phone 8.1) Windows Phone 8.1向け

不要なデバイス向けのプロジェクトもあるかもしれません。そのような場合は削除しても大丈夫です。

ということで、プロジェクトの作成方法については理解できたかと思います。

次回も引き続きXamarin.Formsを見ていきます。

 

 

[Visual Studio][Xamarin][Android] イベントを作成する

前回の記事では、Android用のプロジェクトを作成しました。

今回は、配置したコントロールに名前を付け、イベントを作成する方法について見ていきます。

はじめに、コントロールに名前を付けてみましょう。

前回配置したButtonを選択したら、プロパティウィンドウで「id」という項目を探して下さい。この「id」がWindowsアプリでいうところのNameプロパティに該当します。

新しいidは、プロパティ入力欄の「@+id/」の後ろに入力します。

id名をbtnSayHelloにする場合は「@+id/btnSayHello」とします。

ついでに表面の文字も変更してみましょう。こちらはTextプロパティに対して設定をします。「クリック」という文字を設定してみましょう。設定後のプロパティウィンドは以下のようになります。

idとTextプロパティの設定

続いて前回貼り付けたLarge TextにもidとTextプロパティを設定しておきましょう。

idはtxtMsgに、Textプロパティは空欄に設定をしてください。

続いてイベントを作成します。

残念ながらプロパティウィンドからイベントを作成することはできないようです。そこでコードからイベントを作成します。

ソリューションエクスプローラーからMainActivity.csを開いて以下のようにコードを編集してください。

[Activity(Label = "DroidSample", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{

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

        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);

        Button btnM = FindViewById<Button>(Resource.Id.btnSayHello);
        TextView txtV = FindViewById<TextView>(Resource.Id.txtMsg);

        btnM.Click += delegate
        {
            txtV.Text = "こんにちは";
        };
    }
}

OnCreateはAndroidの起動時に実行されるメソッドです。このメソッドではアプリの初期化処理などを行います。今回はこの中にButtonのイベント作成します。

はじめに、画面に配置したButtonとTextViewコントロールをコードから使用できるようにします。それぞれのButton型の変数btnMとTextView型の変数txxVに入れることとします。コード中のFindViewByIdは、画面に配置したコントロールをId名で取得するというものです。画面に配置したコントロールはResouce.Idで管理されているので、ここからIdを指定して取り出しているというわけです。

続いてイベントの作成ですが、btnM.Clickとしている部分です。delegateを使用した記述となっています。このイベントの中ではtxtVのTextプロパティに「こんにちは」の文字列を設定していますでの、ボタンがクリックされるとTextViewには「こんにちは」の文字が表示されます。

実行例を以下に示します。

実行例

 

 

関連記事

[Visual Studio][Xamarin][Android] UI部品を配置する

[Visual Studio][Xamarin][Android] UI部品を配置する

今回はXamarinを使用してAndroidのプロジェクトを作成してUI部品を配置する方法を見ていきましょう。

新規プロジェクトの作成を開き、左側で「Android」を選択して一覧から「Blank App(Android)」を選択します。あとは名前欄にプロジェクト名を入力して[OK]ボタンを押します。

プロジェクトの作成

プロジェクトの作成が完了すると、画面中央にはGet Start With Xamarinが表示されます。

Get Start With Xamarin

メイン画面デザイン用のファイルは、Resources\layoutフォルダーにあるMain.axmlというファイルです。拡張子が*xamlかと思いましたが、*.axmlなんですね。紛らわしい…

このファイルをダブルクリックすると画面中央にはAndoroidの画面が表示され、左側にはツールボックスがあることがわかります。

メイン画面のデザインファイル

UI部品はツールボックスからメイン画面にドラッグ&ドロップで配置することができます。

今回はButtonとText(Latge)を配置してみましょう。

ドラッグ&ドロップでUI部品を配置

次回は配置したButtonコントロールのイベントを作成する方法を見ていきます。

[Visual Studio][Xamarin][iOS] イベントを作成する

前回の記事ではUI部品を配置する方法を紹介しました。

今回はイベントを作成する方法について見ていきましょう。

それではButtonのクリックイベントを作成してみましょう。

前回までに作成しているプロジェクトを開きます。続いて画面に配置してるButtonをダブルクリックします。

するとViewController.csが開き、以下のようにTouchUpInsideのイベントが作成されます。

partial void BtnClickMe_TouchUpInside(UIButton sender)
{
    throw new NotImplementedException();
}

このように、画面に配置したUI部品をダブルクリックすると、既定のイベントが作成されます。

続いて、Buttonがクリックされたら配置しているLabelに「Hello!」という文字列を表示してみましょう。

Labelには「lblMsg」という名前を付けていますので、コードは以下のようになります。

partial void BtnClickMe_TouchUpInside(UIButton sender)
{
    lblMsg.Text = "Hello";
}

コードの編集が完了したら、シミュレーターで実行確認してみましょう。

Visual Studioの上部で[Debug]-[iPhoneSimulator]を選択し、任意のシミュレーターを選択して実行をします。

デバッグ実行

しばらくするとMac側でシミュレーターが起動し、作成したアプリの動作を確認することができます。

シミュレーターの起動

関連記事

[Visual Studio][Xamarin][iOS] Macに接続する
[Visual Studio][Xamarin][iOS] UI部品を配置する

[Visual Studio][Xamarin][iOS] UI部品を配置する

前回から少し時間が経ってしまいましたが、今回はその続きです。

Single View App(iPhone)のプロジェクトを作成したら、ソリューションエクスプローラーを確認してみましょう。

ソリューションエクスプローラー

上記の中で拡張子が「*.storyboard」というのが画面のデザイン用ファイルです。

そのなかでもMain.storyboardがメインのアプリ画面になります。このファイルをダブルクリックして開いてみましょう。

以下のように画面中央には、アプリのメイン画面が表示されます。

Main.storyboard

続いてツールボックスを表示し、ButtonとLabelを1つずつ配置してみましょう。配置をするにはツールボックスにあるButtonやLabelをドラッグ&ドロップするか、ダブルクリックをします。

ツールボックス

 

続いて配置したButtonに名前を付け、表面のテキストを変更します。

配置したButtonをマウスで選択して、プロパティウィンドウのWidgetタブを選択します。Name欄にはButtonに付ける名前を、Title欄には表面に表示するテキストをそれぞれ入力します。

Labelも同様にして編集します。Name欄には「lblMsg」、Text欄は空欄にします。

プロパティの設定

Visual Studioを使用してWidowsアプリケーションを作成したことがある場合は、違和感なく操作できたのではないでしょうか。

そのほかのUI部品も同様にして配置することができますので試してみてください。

次回、イベントを作成する方法を見ていきます。

 

関連記事

Visual Studio][Xamarin][iOS] Macに接続する