BLOG

Blitz Gateスタッフブログ

BLOG

Xamarin Native(iOS)(1) NavigationBarとAlertの作り方

書いた人:

Android , iOS , Xamarin , 技術  

blgimg_xamarin

どうも、CTOのゆんゆんです。

 

巷で有名なXamarinですが、個人的に興味があったので始めてみました。
ただ、このXamarin、元は高額なSDKであるためか情報がぜんぜん見つからず、
制作する上で困り果ててしまいましたので、記事にしてみようと思いました。

 

なお、今回の記事は「ある程度iPhoneアプリをXcodeで制作したことがある人向け」です。
XamarinはAndroid/iOSのAPIを100%カバーしていますので、各プラットフォームのAPIに似ています。
ですので、開発したことがある人はすんなり入り込めると思っていますので、ご注意ください。

 


 

Xamarinのインストール

 

僕は仕事でMacを使っていますので、Xamarin Studioでの開発になります。
その辺りは読み換えてください。

 

また、インストールはコチラの記事が参考になります。

 

プロジェクトの作成

① 「New Solution」をクリックし、「Multiple」の「App」を選択。

② 「Native(iOS, Android)」の「Single View App」を選択し、Next。

 

xamarin_ios_01

 

③ 「App Name」、「Organization Identifier」にはアプリケーション名を設定。

④ 「Target Platforms」は「Android」「iOS」の両方にチェック。

⑤ 「Shared Code」は、よくわからない人は「Use Portable Class Library」を選ぶと良さそうです。
※「Use Portable Class Library」と「Use Shared Library」の違いについてはコチラ

⑥ 「Next」をクリック

 

PCLとSL
PCL (Portable Class Libraries) の紹介PCL (Portable Class Libraries) の紹介
Shared Projects -Shared Projects を使用してコードを共有-

 

xamarin_ios_02

 

あとは下記の画像のように、環境設定を行えばプロジェクト作成は完了です。

 

スクリーンショット 2016-07-10 18.29.40

 

プロジェクトの編集:ナビゲーションの追加

 

ソリューション内のMain.storyboardを開き、NavigationControllerをドラッグ&ドロップして追加します。
この時、RootViewControllerを削除し、rootViewControllerをデフォルトのViewControllerに設定します。

※rootViewの設定は、Xcodeと同じ、Ctrlを押しながら左クリックをドラッグ&ドロップで設定できます。

 

xamarin_ios_03

 

次に新しいViewControllerをToolboxからドラッグ&ドロップでStoryboardに追加し、
rootViewControllerからセグエをつなぎます。

 

セグエをつなぐ際は「ViewControllerの下部にある黒い部分」からセグエを張ります。
Ctrlを押しながら左クリックをドラッグ&ドロップです。

 

xamarin_ios_04

 

セグエを選択し、IDを振ります。
今回は「nextSegue」としました。

 

xamarin_ios_05

 

セグエIDを設定したら画面遷移処理を書きましょう。
ViewController.cs を開き、下記のように修正します。

 

using System;

using UIKit;

namespace XamSamp.iOS
{
	public partial class ViewController : UIViewController
	{
		// コメントアウト
		//int count = 1;

		public ViewController (IntPtr handle) : base (handle)
		{
		}

		public override void ViewDidLoad ()
		{
			base.ViewDidLoad ();

			// Perform any additional setup after loading the view, typically from a nib.
			Button.AccessibilityIdentifier = "myButton";
			Button.TouchUpInside += delegate {
				// コメントアウト
				//var title = string.Format ("{0} clicks!", count++);
				//Button.SetTitle (title, UIControlState.Normal);

				// セグエによる画面遷移
				this.PerformSegue ("nextSegue", null);
			};
		}

		public override void DidReceiveMemoryWarning ()
		{
			base.DidReceiveMemoryWarning ();
			// Release any cached data, images, etc that aren't in use.		
		}
	}
}

 

これで画面の遷移は終了です。

 

プロジェクトの編集:アラートの追加

 

先ほど作った新しいViewControllerにボタンを配置します。
ボタンはToolboxから選択し、ドラッグ&ドロップでViewに配置できます

 

xamarin_ios_08

 

配置したボタンにNameを付けましょう。
配置したボタンを選択後、プロパティ内にある 「Name」 に名前をつけます。
今回は 「showAlertBtn」 としました。

 

xamarin_ios_09

 

Storyboardに追加したViewControllerにソースを追加します。
「ファイル」 > 「新規」 > 「ファイル」を選択し、新しいファイルの作成ウィンドウを表示します。

 

表示されたウィンドウから 「iOS」 > 「ViewController」 を選択し、
ファイル名等を設定して 「新規」 ボタンを押下します。
(xibファイルができている場合、今回は使用しないので削除してOKです)

 

xamarin_ios_06

※画像では「AlertViewController」と記載されていますが、実際には使えません。
後に記載する「ChildViewController」に読み替えてください。

 

ファイルが作成されたら、Storyboardに追加したViewControllerに設定します。
設定するときは、View下部の黒い部分を選択し、プロパティの 「Identity」 にある 「Class」に入力します。

 

xamarin_ios_07

※画像では「AlertViewController」と記載されていますが、実際には使えません。
後に記載する「ChildViewController」に読み替えてください。

 

次に、遷移後のソースファイルを下記のように変更し、
アラートを表示する処理を追加します。

 

using System;

using UIKit;

namespace XamSamp.iOS
{
	public partial class ChildViewController : UIViewController
	{
		public ChildViewController (IntPtr handle) : base (handle)
		{
		}

		public override void ViewDidLoad ()
		{
			base.ViewDidLoad ();
			// Perform any additional setup after loading the view, typically from a nib.

			this.showAlertBtn.TouchUpInside += delegate {
				var alert = UIAlertController.Create ("タイトル", "メッセージ", UIAlertControllerStyle.Alert);
				alert.AddAction (UIAlertAction.Create ("OK", UIAlertActionStyle.Default, null));

				PresentViewController (alert, true, null);
			};
		}

		public override void DidReceiveMemoryWarning ()
		{
			base.DidReceiveMemoryWarning ();
			// Release any cached data, images, etc that aren't in use.
		}
	}
}

 

以上で最初の画面でボタンを押すと次の画面に遷移し、
遷移後のページのボタンを押すとアラートが表示されるようになります。

 

さいごに

 

如何だったでしょうか?
ソースの内容をご覧いただくとわかりますが、Nativeの場合、ソースコードはかなり
Nativeに近いものが使用されているのがわかります。

 

既にiPhoneアプリを開発したことのある人でしたら、割と馴染みやすいのではないでしょうか?

 

次はAndroid版も記載してみようかな。
ではでは〜♪

  • このエントリーをはてなブックマークに追加