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

前回の記事では、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エリアから選択して配置します。

Properties とUtilites の種類について

PropertiesとUtilitiesには以下のようなものがあります。

File Inspector

File Inspectorは編集中のxibファイルの名前やファイルの保存場所などを編集することができます。

Quick Help Inspector

Quick Help Inspectorは選択されている項目の説明を表示します。

Identity Inspector

Identity Inspectorは選択されたビューやUI部品の様々な属性を提供します。

Attribute Inspector

Attribute Inspectorは選択したビューやUI部品の様々な属性を編集することができます。

Size Inspector

Size Inspectorは選択されたUI部品の位置やサイズ、リサイズの設定を行うことができます。

Connections Inspector

Connections Inspectorは、選択したUI部品のアウトレットやアクションの接続を管理します。

Bindings Inspector

Bindings Inspectorは自動的にデータモデルをバインディングするように編集ができます。

Effects Inspector

Effects Inspectorを使用すると、アニメーションなどのコントロールにエフェクトを設定することができます。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です