[Xamarin][iOS] SingleViewアプリの基礎

今回は、Visual Studio for Mac(Preview)を使用して、SingleViewアプリを作成してみます。

ダイアログこそ異なるものの、Windows版 Visual Studioでも同様にして作成することが可能です。

SingleViewアプリは、単一のViewで構成されるアプリケーションのことです。

はじめに、新規ソリューションの作成をしましょう。

新しいプロジェクトのダイアログでiOSを選択し、一覧からSingle View Appを選択し[次へ]ボタンをクリックします。

続いて「iOSアプリを構成する」画面が表示されます。App Nameにはアプリケーションの名前を、Organization Identifierには組織名を入力します(通常はURLを逆から記述し増す)。

Deviceでは、アプリを提供するデバイスにチェックを付けます。

最後にターゲットOSの最小バージョンを選択します。

最後にソリューション名、プロジェクト名を確認し[作成]ボタンをクリックします。

[Mac][Xamarin][iOS] アラートを表示する

前回の記事ではイベントの作成方法について説明しました。

今回はアラートを表示する方法について見ていきましょう。

アラートは、Windowsアプリでいうところのメッセージボックスやメッセージダイアログに相当するものです。

iOSアプリでアラートを表示するにはUIAlertViewクラスを使用します。

まずは最もシンプルな例を示します。

アラートのタイトルはTitleプロパティに、表示したいメッセージはMessageプロパティに設定します。

表示するボタンはAddButtonメソッドで追加をします。

UIAlertView alert = new UIAlertView
{
	Title = "タイトル",
	Message = "ここにメッセージを記述"
};

alert.AddButton("OK");

alert.Show();

上記のコードを前回作成したサンプルの btnShowMsg_TouchUpInsideイベントの中に記述して実行した例を以下に示します。

アラートの表示例

続いて複数のボタンを持たせる方法を見ていきましょう。

以下は[Yes]と[No]の2つのボタンを持たせる例です。

AddButtonメソッドを2回使用して[Yes]と[No]を作成しています。

どちらかのボタンが押されるとClickイベントが呼ばれますのでイベントハンドラーを作成し、switch文でどちらのボタンが押されたのかを判定しています。

どのボタンが押されたのかは引数eのButtonIndexで知ることができ、最初に追加したボタンが0となり、あとは1, 2と続きます。この例では[Yes]のButtonIndexが0で[No]が1となります。

UIAlertView alert = new UIAlertView
{
	Title = "タイトル",
	Message = "ここにメッセージを記述"
};

alert.AddButton("Yes");
alert.AddButton("No");

alert.Clicked += (msgsender, e) =>
{
	switch (e.ButtonIndex)
	{
		case 0:
			lblMsg.Text = "Yes buttn.";
			break;
		case 1:
			lblMsg.Text = "No button.";
			break;
	}
};

alert.Show();

実行すると以下のように2つもボタンが表示されることが確認できます。また、[Yes]ボタンを押した場合は、Labelに「Yes button.」が表示されます。

複数ボタンの表示例

Yesボタンを押した場合の例

 

[Mac][Xamarin][iOS] UI部品に名前を付けイベントを作成する

前回の記事では、Main.storyboardにUI部品を配置してシミュレーターを起動してみました。

今回は、Main.storyboardに配置した部品に名前を付ける方法と、イベントを作成する方法について見ていきます。

はじめに、前回と同様にMain.storyboardにButtonとLabelを1つずつ配置してください。

続いて、配置したButtonをマウスで選択します。右側にあるプロパティウィンドウのIdentity欄にName欄があるのでButtonに付ける名前を入力します。ここでは「btnShowMsg」と入力します。コードからは「btnShowMsg」という名前をを使用して操作することができます。他のUI部品も同様の手順で名前を付けることができます。

Labelには「lblMsg」という名前を付けてください。

UI部品に名前を付ける

ここでButtonの表面に表示されている「Button」という文字列を「Click Me!」に変更してみましょう。

Buttonの表示テキストを変更

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

ここではButtonがタップされたときのイベントを作成します。

再びMain.storyboardに配置したButtonを選択します。プロパティウィンドウの上部の「Events」を選択して「Up Inside」の欄に「btnShowMsg_TouchUpInside」と入力し[return]を押します。「Up Inside」とはタップされたときに発生するイベントを表しており、このイベントに付けた名前が「btnShowMsg_TouchUpInside」ということになります。

イベントの作成

ViewController.csというファイルが開き、「btnShowMsg_TouchInside」のイベントコードをどこに挿入するかを尋ねてきます。

[↑][↓]キーで挿入位置を選択して[return]キーで挿入します。ここでは一番下に挿入してみましょう。

イベントの挿入

今度はイベントが発生したとき(つまり[Click!]がタップされたとき)にLabelに「Hello!」が表示されるようにします。

以下のようにコードを編集して下さい。

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

Label表面のテキストはTextプロパティで変更することができます。よって上記のコードとなります。

コードの編集が終わったら実行をして確認してみましょう。[Click!]をタップするとLabelには「Hello!」が表示されます。

実行確認

今回はここまで。

 

 

 

[Mac][Xamarin][iOS] iOSのSingle View Appプロジェクト

前回からだいぶ時間が経ってしまいました。

今回は前回に引き続き MacのXamarinについて見ていきます。

Xamarinでプロジェクトを作成すると、画面左側にはファイルの一覧がツリー構造で表示されます。このエリアは「ソリューション」と呼びます。Visual Studioでは「ソリューションエクスプローラー」と呼ばれテイルものです。

Single App Viewプロジェクトを作成した場合は、下図のようになります。

ソリューション

上記ソリューションの中で、メイン画面のデザインを行うためのファイルは「Main.storyboard」です。拡張子が.storyboardのファイルは「ストーリーボード」と呼ばれます。

ソリューションでMain.storyboardファイルをダブルクリックすると画面は下図のようになります。ここで、はじめに表示されていた「ソリューション」が見えなくなっていることがわかります。「ソリューション」を表示したい場合は、Main.storyboadのタブの左側にある「<」をクリックします。

Main.storyboard

中央には画面デザイン用のエディタが、右上にはツールボックス(Toolbox)が、その下にはプロパティウィンドウがあります。

Visual Studioとほぼ同じ構成であることがわかります。

ツールボックスにはSingle View Appで使用可能なUI部品が表示されており、ドラッグ&ドロップで貼り付けることができます。

また、画面に貼り付けたUI部品は、選択後に右したのプロパティウィンドウで見た目を変更することができます。

そでれは、右側のツールボックスからButtonとLabelを1つずつ貼り付けてみましょう。

UI部品の配置

貼り付ける部品を間違えたときは、マウスで選択して[delete]ボタンで削除することができます。

今回は、UI部品を貼り付けただけにして実行をしてみましょう。

実行をするには、画面上部にある右向きの三角ボタンを押してください。

三角ボタンの隣にはデバッグモードで動かすかどうかとシミュレータを選択することができます。

今回は[Debug]、[iPhone 6s iOS 9.3]で実行してみましょう。

停止をする場合は■ボタンを押します(実行すると右向き三角ボタンが■に変わります)。

アプリの実行

しばらくすると、シミュレータが起動し、作成したアプリが表示されます。

シミュレータの起動

実行時に選択できるシミュレータですが、iPhone以外にもiPadも選択できることがわかります。またiPhoneやiPadをMacに接続しておくと、実機も選択することができます。この場合は、一覧の一番下に表示されます。私の環境の場合は「myiPhone」が実機です。

シミュレータの選択

実機を選択した場合は、iPhoneやiPadに実際に転送して動作を確認することができますので、是非試してください。

次回はイベントを作成する方法について見ていく予定です。