本サイトからスピンオフした姉妹サイトです。Xcode2014年5月21日iOS用の画面レイアウトを、Xcodeで行う方法を解説。StudioのビルドインUIデザイナーで行う方法も説明する。→Xamarin.iOSでの画面のレイアウトについては、先日大きな進展があった。Studio自体にiOS用のUIデザイナーが搭載されたのだ。StudioのビルドインUIデザイナー」の両方について説明する。いずれの場合も、Xamarin.iOSで画面レイアウトを行うには、Macが必要になる。Studio(5/15時点の最新版)を利用することを前提としているので注意してほしい。画面に関連するファイル群まずは、Xamarin.iOSのプロジェクトを作成し、その構成ファイルを見ていこう。Application]で(「HelloWorld」という名前で)プロジェクトを作成した直後のファイルツリーである。Xamarin.iOSのプロジェクトファイルツリー1HelloWorldViewController.csiOSにおける画面(ViewController)の実装クラスである。下記のようなUIViewControllerクラスから派生したコードとなっており、ネイティブの開発者には見慣れたメソッドが並んでいるのが分かるだろう。Studioによって自動的に生成されるファイルだ。このファイルは開発者が改変してはいけない。参考までに(UIレイアウト後との比較のために)現時点でのファイルの内容を下記に示しておく。ReleaseDesignerOutlets(){}}}画面の実装クラスに対して自動生成されるコード(HelloWorldViewController.designer.cs)3MainStoryboard.storyboard画面のレイアウトを定義したファイル。Xamarin.Androidにおけるactivity_main.xmlとMain.axmlの関係と同じく、iOSのネイティブ開発(以下、「ネイティブ」と表記)で使用するファイルと同一仕様のファイルだ。Xcodeによる画面レイアウト[MainStoryboard.storyboard]をダブルクリックなどで実行すると、既定の動作ではXcodeが別途起動する。Studioは、Xcodeでのファイルの変更を監視し、HelloWorldViewController.designer.csに必要なコードを自動追加する。その動きを見てみよう。Builder)を起動する図2のようにXcodeが別アプリとして起動する。inspector])をクリックしてみよう。Class]に「HelloWorldViewController」と表示されており、このビューコントローラーとHelloWorldViewControllerが関連付いていることが確認できる。Builderで画面をレイアウトする画面上にテキスト入力用のテキストフィールドと、ボタンを追加してみよう。Field]と[Button]を画面上にドラッグ&ドロップする。Inspector]を開いて、その[Title]欄で編集できる)。Navigatorから、[HelloWorldViewController.h]を、[Option]キーを押しながらマウスでクリックする。BuilderとHelloWorldViewController.hが横並びに表示される。右側のサイドバーが邪魔な場合はツールバーのアイコンで非表示にできる。BuilderのテキストフィールドをControlキーを押しながらHelloWorldViewController.hの@endの前にドラッグ&ドロップする(図5)。Xcodeでアウトレットを作成する(2)ドロップ後表示されるポップアップで[Connection]を「Outlet」、[Name]を「textMyNumber」として、[Connect]ボタンを押す。アウトレット作成のポップアップ画面ボタンに対しても同じ手順で[Name]を「buttonEnter」としてアウトレットを作成すると、HelloWorldViewController.hファイルは以下のようになる。Studioに戻ろう。Xcodeはそのまま放置しても、閉じても構わない。Studioに戻ったら、HelloWorldViewController.designer.csファイルを開いてみよう。以下のように、Xcodeで作成したアウトレットがC#のコードとして再現されているはずだ(反映されていない場合、同期が失敗しているので、Xcodeで保存し直したり、Xcodeを終了したりしてみよう)。null;}}}}作成したアウトレットがC#コードとして自動生成される(HelloWorldViewController.designer.cs)これで、Xamarin.iOS側でもアウトレットが使用できることが分かる。あとはHelloWorldViewController.csファイルで、これらを使って処理を実装するだけだ。5Viewを利用するコードを記述するHelloWorldViewController.csファイルのViewDidLoadメソッドに以下のように実装する。null);alertView.Show();};}Viewを利用するコードを記述する(HelloWorldViewController.cs)Xamarin.iOSもdelegateを使用するAPIは可能な限りイベントになっている。上記のコードでは、TouchUpInsideがそれだ。ネイティブのObjective-C言語では、delegateによるコールバックはたいていの場合、別のメソッドに分離して記述する必要があり、「ボタンAを押した時の処理」という関連が分かりにくい。Xamarin.iOSの「イベント+ラムダ式」による記述は、アクションとコールバックの関連が視認でき、またイベントハンドラーのスコープが最小に保てるため、見やすく保守のしやすいコードとなる。出来上がったプログラムを実行すると、図7のようになる。Studioに搭載されたiOSデザイナーを使った画面レイアウトを行う方法を説明する。Designer]にチェックを入れる。experimentalを冠している通り、この機能はまだ実験的なものであることに注意が必要だ(筆者が試した範囲では十分に実用できるものであったが)。Studioで[MainStoryboard.storyboard]をダブルクリックすると、iOSデザイナーが起動する(ちなみにマウスの右クリックをすることで、従来どおりXcodeも起動できる)。Builderとよく似たルック&フィールになっている。Builderで作成したレイアウトも正しく反映されており、相互利用が可能であることが分かる。3iOSデザイナーで画面をレイアウトするテキストフィールドとボタンが配置されている画面に、さらにラベルを追加してみよう。Builderと同じように右上のToolboxから「Label」を画面上にドラッグ&ドロップする。Builderのアウトレットを作る手順に相当する)。追加したラベルを選択して、右下の[プロパティ]パッドの[Name]に「lableMyNumber」と入力してEnterキーを押そう(図11)。iOSデザイナーでプロパティを設定するこれでHelloWorldViewController.designer.csファイルにlableMyNumberが生成されたはずだ。Builderを使う方法に比べて、ずいぶん手順が簡単になっている。4Viewを利用するコードを記述するあとはラベルを使った実装をするだけだ。HelloWorldViewController.csファイルのViewDidLoadメソッドの実装を以下のように変更してみよう。textMyNumber.Text;}Viewを利用するコード(HelloWorldViewController.cs)このコードを実行すると、図12のようになる。StudioのiOSデザイナーで使う手順を解説した。Xcodeに慣れている開発者は前者を、そうでない開発者は後者を使うとよいだろう。StudioのiOSデザイナーはまだ実験段階の機能なので、その旨、了解して利用する必要がある。Studioを使った方が、圧倒的に手順が少ないので、早く正式版となることを期待したい。StudioがXcodeを完全に代替できるかは現時点では未知数だ。Overview(英語)」で確認してほしい。Studioアドインにも搭載される見込みであるようなので、Windowsを主に使う開発者は待ち遠しいだろう。アルファ版ならすぐに試すことができるようだ。【コラム】XIBについてiOSでの画面レイアウト定義ファイルは.xibファイルも存在する。Xamarin.iOSのプロジェクト作成テンプレートの中には、これを使用するものは用意されていないようだが、プロジェクトに.xibを追加する方法は用意されている。Definition」を選択する。StudioのiOSデザイナーは対応していないようだ。次回は、画面遷移について解説する予定だ。※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。INDEX]を参照してください。Xamarin.Android/Xamarin.iOSを利用するには?C#でAndroid/iOSアプリを開発できるXamarinの実践TIPSの連載がスタート。TIPSの方向性や読者対象を示し、Xamarinの概要やインストールについて解説する。Xamarin.Androidで画面をレイアウトするには?Xamarin.Androidでの画面のレイアウトの仕組みは、ネイティブのAndroidとほぼ同じ。そのレイアウト方法をネイティブでの手順と比較しながら解説する。Xamarin.iOSで画面をレイアウトするには?(Xcode利用/ビルトインiOS用UIデザイナー)iOS用の画面レイアウトを、Xcodeで行う方法を解説。StudioのビルドインUIデザイナーで行う方法も説明する。Xamarin.Androidで画面遷移を行うには?Xamarin.Androidで画面を追加する方法と、2つの画面間を遷移し、遷移先にデータを渡す方法、遷移先から返り値を得る方法を解説する。その新機能として注目されるXamarin.Formsの概要と、基本的な使い方、メリット/デメリットを解説する。Phone間で画面レイアウトも共通化しよう。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。2023最適なビューへの切り替えを推奨します:スマートフォン用表示に。