[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!」が表示されます。

実行確認

今回はここまで。