本サイトからスピンオフした姉妹サイトです。その新機能として注目されるXamarin.Formsの概要と、基本的な使い方、メリット/デメリットを解説する。Phone間で画面レイアウトも共通化しよう。→5月28日にXamarinから大きな発表があった。3」がリリースされたのだ。Projectへの対応などが含まれるが、その中で最もインパクトの大きなXamarin.Formsについて取り上げる。Phone)で、画面レイアウトおよびそれに関わる処理(つまりMVCパターンのView層)を、1つのソースコードで共通化できる。これまでXamarinの説明として「コアロジックは共通化できる。プラットフォーム固有機能や画面については共通化できない」と繰り返し述べてきたが、その前提が覆ることになり、かなりインパクトが大きな機能である。Xamarinでの画面開発が、全てXamarin.Formsに置き換えられたわけではない。従来通り、iOS/Androidのネイティブの画面開発手法(.storyboard/.axmlレイアウトファイルなど)も引き続き利用できる。Mobileが近いと思われる)。画面のデザインは、C#言語によるコードまたはXAML(ザムル)で記述する。Foundation)とは別のものだ。Studioでも使用可能である。Studioを利用して、Xamarin.Formsを利用したアプリケーションを作成する手順を紹介する。(PCL)]を選択し、ソリューション名を「HelloForms」として[OK]ボタンを押す。Project)]でも同じことができる。Project*1は、PCL(ポータブル・クラス・ライブラリ)を使わず、コードレベルでプラットフォーム間のコードを共有する1つの選択肢だ。Projectは日本語表記するなら「共有プロジェクト」となる。2でリリースされた新機能の1つでもある。作成されたソリューションのファイルツリーから、要点を解説する。Xamarin.Formsソリューションのファイルツリーまず、以下の3つのプロジェクトが作成される。それぞれのプラットフォームのネイティブアプリケーションであり、「HelloForms」プロジェクトを参照している図2で赤枠で囲んだ部分について、それぞれ説明しよう。Xamarin.FormsXamarin.Formsを利用するために必要なNuGetパッケージ。Packages]ダイアログ(=いわゆるNuGetパッケージマネージャー)から「Xamarin.Forms」を検索して追加することになる。App.cs(共通の画面)画面レイアウトがC#言語で記述されているファイルだ。Forms!」と表示するシンプルなものになっている。LayoutOptions.CenterAndExpand,},};}}......省略......App.csファイルのひな型コードGetMainPageメソッドは、後述のAndroid/iOSアプリのエントリポイントから呼び出される。MainActivity.cs(Android)Androidアプリのエントリポイントとなるファイルだ。());}}......省略......MainActivity.csファイルのひな型コード1で、基底クラスをAndroidActivityとしている。これはXamarin.Formsで提供されるクラスだ。次に、ActivityのOnCreateメソッドでは、通常、.axmlファイルを読み込んでSetContentするのが通常だが、それは行わず、2でXamarin.Fromsを初期化(=Initメソッド)している。続いて3で、App.csファイルで定義した画面(=GetMainPageメソッドの呼び出しにより取得)をSetPageメソッドで設定している。画面や画面遷移を全てXamarin.Formsに委ねるならば、MainActivity.csファイルで行うことは、これ以上はない。MainActivity.OnCreateメソッドは単なるエントリポイントとしてのみの機能だ。AppDelegate.cs(iOS)AppDelegate.csファイルは、iOSアプリのエントリポイントであるが、Android同様、ここにXamarin.Forms向けのコードを記述する。true;}}......省略......AppDelegate.csファイルのひな型コードまず1で、Formsの初期化を行うのはAndroidと同様だ。続いて2で、App.csファイルから画面を取得してルートのViewControllerに設定している。こちらもXamarin.Formsだけを利用するならば、XXXViewController.csファイルは必要ない。2取りあえず実行してみるまずはiOS/Android両方の環境で実行してみよう。図3を見ると分かるように、ただラベルが表示されるだけだが、確かに共通の画面デザインで動作することを確認できる。iOS(左)とAndroid(右)で実行した画面UIパーツを利用するXamarin.Formsが提供するUIパーツ群のうち、いくつかを使ってみよう。App.csファイルのコードを、下記のように修正する。LayoutOptions.Center}};}}DatePicker&Buttonコントロールを配置するように修正したApp.csファイルのコード垂直(Vertical)と水平(Horizontal)のレイアウトオプションは、「拡大して中央(CenterAndExpand)」から「中央(Center)」に変更した。このコードは、StackLayoutという、UIパーツを縦または横に一列に並べて(=スタックさせて)表示させるコンテナー(AndroidでいうLinearLayout)に、日付ピッカーとボタンを配置したものだ。実行すると、次のようになる。DatePickerコントロールを追加した画面の実行結果(左:iOS、右:Android)(Buttonコントロールも追加されているが、)DatePickerコントロールとして定義したUIパーツは、iOSとAndroid双方で、「ネイティブな日付選択ダイアログ」として実行されるのが確認できる。画面遷移を行うApp.csファイルをさらに修正して、新しい画面を定義し、画面遷移を行ってみよう。NavigationPage(App.GetSecondPage(datePicker.Date)));」となっていた箇所を修正しました。お詫びして訂正させていただきます。画面遷移を行う場合は、GetMainPageメソッドの戻り値で、NavigationPage(=Pageの派生クラス)オブジェクト(1)を返すようにする。これを行うことで、アプリケーションの左上にナビゲーションを表すアイコンが表示される(図5を参照。Back]アイコンが表示されている)。2で、ボタンを押した時に、日付ピッカーで選択した日付けを渡しつつ、2つ目のページ(=GetSecondPageメソッドで取得)へ遷移している。そのSecondPageの定義が3だ。AndroidのActivityや、iOSのViewControllerを全く意識していないのが、コードから分かるだろう。これを実行すると、次のようになる。Xamarin.Formsによる画面遷移まとめXamarin.Formsの最初の利用方法を簡単に解説した。Xamarin.Formsは発表まで存在が誰にも知られていなかったこともあり、情報はまだ少ないが、今回解説した画面レイアウトと画面遷移の他にも、MVVMフレームワークとしての機能(データバインディングやコマンドパターン、サービスロケーターなど)や、ネイティブの画面との相互連携の機能など、非常に豊富な機能を持ち、これだけで「アプリケーションフレームワーク」と呼べるほどの規模だ。これらについては今後順次、解説していきたい。DevelopersのXamarin.Forms(英語)と、サンプルであるGitHubのxamarin-forms-samplesリポジトリが情報源だ。【コラム】Xamarin.Formsを利用するメリット/デメリットメリットは再度言うまでもなく「複数のプラットフォームでView層を共通化できる」ことだ。上で述べた通り、Xamarin.FormsはMVVMフレームワークとしての機能も持ち合わせるので、プラットフォーム固有の機能を使わないならば、エントリポイント以外の処理は全て共通ライブラリに任せることができるだろう。ネイティブ画面との相互連携も可能なので、既存の資産と組み合わせることも可能だ。デメリットは他のクロスプラットフォーム開発ツールと同じで、プラットフォーム間に異なる機能を共通化するため、機能が最小公倍数になってしまうことだ。お詫びして訂正させていださきます。提供されていることが分かった。PhoneのUIには、該当する機能が無いからだと、筆者は推測する。1つのデメリットは、Xamarin.Formsというフレームワークに「ロックイン」されることだ。Xamarin.iOS/Androidでは、画面の開発には、ネイティブの開発知識が利用できたが、Xamarin.Formsは新しい概念であるため、新しく学習する必要があるし、つぶしが利かない。Xamarinが、このXamarin.Formsを今後の開発方法の主軸として考えているのかは分からないが、現在のところは、ネイティブの画面開発の一部(単純な画面など)についてXamarin.Formsを採用するのが無難ではないかと思う。※以下では、本稿の前後を合わせて5回分(第3回~第7回)のみ表示しています。INDEX]を参照してください。Xamarin.iOSで画面をレイアウトするには?(Xcode利用/ビルトインiOS用UIデザイナー)iOS用の画面レイアウトを、Xcodeで行う方法を解説。StudioのビルドインUIデザイナーで行う方法も説明する。Xamarin.Androidで画面遷移を行うには?Xamarin.Androidで画面を追加する方法と、2つの画面間を遷移し、遷移先にデータを渡す方法、遷移先から返り値を得る方法を解説する。その新機能として注目されるXamarin.Formsの概要と、基本的な使い方、メリット/デメリットを解説する。Phone間で画面レイアウトも共通化しよう。Xamarin.iOSでStoryboardとXamarin.Formsを併用するには?Storyboardで作成したiOSアプリの一部の画面に、Xamarin.Formsを利用する方法を解説する。Xamarin.AndroidでActivityとXamarin.Formsを併用するには?iOSの場合と同じように、Androidアプリの一部の画面に、Xamarin.Formsを利用する方法を解説する。iOSとの挙動の違いやフラグメントとの併用についても言及する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。