オブジェクトと画像を追加
カスタムビューをレンダリングして検査
Interface Builder 上のキャンバスでカスタムビューを描画および検査できます。これにより、変更を視覚的に確認しながら、描画コードを段階的に調整できます。
- [ファイル(File)] > [新規(New)] > [ファイル(File)] を選択します。
- 表示されるシートで、ターゲット OS を選択します。
- [ソース(Source)] で、ユーザインターフェイスクラステンプレートを選択します。
iOS および tvOS アプリの場合は、Cocoa Touch Class (ココアタッチクラス) を選択します。watchOS アプリの場合は、WatchKit クラスを選択します。macOS アプリの場合は、Cocoa クラスを選択します。
- [次へ(Next)] をクリックします。
- [サブクラス(Subclass)] ポップアップメニューから、ビュークラスを選択します。
iOS、watchOS、tvOS アプリの場合は UIView を選択し、macOS アプリの場合は NSView を選択します。
- [クラス] フィールドに、カスタムクラスの名前を入力します。
- [言語(Language)] ポップアップメニューから言語を選択します。
- [次へ] をクリックし、[作成(Create)] をクリックします。
- [表示(View)] > [アシスタントエディタ(Assistant Editor)] > [アシスタントエディタを表示(Show Assistant Editor)] を選択して、アシスタントエディタ を開きます。
- アシスタントエディタで、ジャンプバーを使用して、カスタムビューの実装ファイルに移動します。
Interface Builder キャンバスが実装ファイルに隣接するように、メインウィンドウ を構成します。
- 実装ファイル内のクラス宣言の上に、Swiftの場合は @IBDesignable を、Objective-C の場合は IB_DESIGNABLE を入力します。
たとえば、Swift の Cocoa Touch クラスの実装ファイルは以下のようになります。
@IBDesignable
class MyView：UIView {
…
}
- カスタムビューの描画メソッドのコードを入力します。
たとえば、テンプレートによって提供される描画メソッドのコメントを外して、描画操作を入力します。
- ファイルを保存します。
Interface Builder はビューをキャンバスにレンダリングします。
- [表示(View)] > [アシスタントエディタ(Assistant Editor)] > [アシスタントエディタを表示(Show Assistant Editor)] を選択して、アシスタントエディタ を開きます。
- アシスタントの ジャンプバー を使用して、カスタムビューのヘッダーファイルに移動します。
- 検査すべきプロパティの宣言に属性 IBInspectable を追加します。
Swift の場合、プロパティ宣言は以下のようになります。
@IBInspectable var lineWidth：Double
Objective-C の場合、プロパティ宣言は以下のようになります。
@property (nonatomic) IBInspectable NSInteger lineWidth;
- 検査可能なプロパティを使用するように、描画 (draw) メソッドの実装を変更します。
- Interface Builder で、カスタムビューを選択し、[表示(View)] > [インスペクタ(Inspectors)] > [属性インスペクタを表示(Show Attributes Inspector)] を選択します。
プロパティがインスペクタに表示されます。
- プロパティの値を変更します。
Interface Builder は、ビューに加えた変更をレンダリングします。
IBInspectable 属性は、クラス宣言、クラス拡張、または型のカテゴリ (ブール値、整数または浮動小数点数、文字列、ローカル化された文字列、長方形、ポイント、サイズ、色、範囲、nil) の任意のプロパティに追加できます。
Interface Builder でのみ実行されるカスタムビューのコードを記述したい場合は、prepareForInterfaceBuilder メソッドからそのコードを呼び出します。たとえば、iPhone カメラを使用するアプリを設計するときに、カメラがキャプチャするものを表すイメージを描画したい場合があります。インターフェイスビルダは、awakeFromNib メソッドの代わりに prepareForInterfaceBuilder メソッドを呼び出します。これらのメソッド間でコードを共有したい場合は、そのコードを、これらの両方のメソッドから呼び出す別のメソッドに移動します。
Objective-C および Swift では、プリプロセッサマクロ TARGET_INTERFACE_BUILDER を使用して、カスタムビュークラスのコードを条件付きでコンパイルできます。
#if !TARGET_INTERFACE_BUILDER
// Run this code only in the app
#else
// Run this code only in Interface Builder
#endif
以下も見よ
ユーザーインターフェイスファイルにカスタムオブジェクトを追加
Interface Builder でカスタムビューをデバッグ
) を選択し、ライブラリからキャンバスにライブラリをドラッグします。
) をクリックします。