[Xamarin.Mac] Visual Studio for MacでInterface Builderを使用する

Xamarin.Mac

2017.07.23

前回の記事では、Visual Studio for Macを使用してMac用アプリの新規プロジェクト作成方法を確認しました。

Visual Studio for Macは画面を編集する専用のエディタは持っていません。その代わり、XcodeのInterface Builderとシームレスに連携して画面のデザインを行うことができます。

Interface BuilderはXcodeに付属するユーザーインターフェスデザイナーでSwiftやObject-Cを使用して開発をしているユーザーにとってはなじみ深いものです。

VS for MacからInterface Builderを使うには

VS for Macのソリューションエクスプローラーで、拡張子が.storyboardというファイルをダブルクリックすると、Interface Builderが起動します。

一番左側がProject Navigation、その隣がInterface Hierarchy、続いてInterface Builder、Properties & Utilitesの4つのエリアから構成されています。

Project Navigation

このエリアでは、プロジェクトのファイルを確認することができ。.storyboardファイルを選択したときには、Interface Editorでデザインの編集を行うことができます。

Interface Hierarchy

このエリアでは各ビュー（ウィンドウ）に配置されている、コントロールの階層を確認および変更することができます。Interface Builder上でビューに配置されたコントロールをクリックして選択することもできますが、このエリアでコントロールを選択状態にすることもできます。

Interface Builder

ビュー（画面）のデザインを行うことができます。様々なUI部品を貼り付けて、サイズを変更したり、配置位置を設定することができます。

Properties & Utilities

このエリアはVisual Studioのプロパティウィンドウとツールボックスに似ています。Interface Editorで選択したUI部品のプロパティの変更や、選択しているファイル設定の変更を行うことができます。また、ビューに貼り付ける様々なUI部品はUtilitesエリアから選択して配置します。