[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に接続する