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

のえる のえる
2016.07.13

どうも、のえるです。
 
巷で有名な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 を開き、下記のように修正します。
 

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

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

 
先ほど作った新しい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」に読み替えてください。

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

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

さいごに

 
如何だったでしょうか?
ソースの内容をご覧いただくとわかりますが、Nativeの場合、ソースコードはかなり
Nativeに近いものが使用されているのがわかります。
 
既にiPhoneアプリを開発したことのある人でしたら、割と馴染みやすいのではないでしょうか?
 
次はAndroid版も記載してみようかな。
ではでは?♪

スポンサーリンク

POPULAR

のえる

のえる

Full-stack Developer