Interface Builder を使用してインターフェースを作成
Interface Builder のワークフロー
Interface Builder を使用して、アプリのユーザーインターフェースを視覚的にレイアウトし、コードに接続します。
注意：Swift アプリの場合、オプションで SwiftUI を使用してインターフェースをレイアウトし、インタラクティブなプレビューを表示できます。SwiftUI を使用する iOS アプリには、Interface Builder を使用して編集する LaunchScreen.storyboard ファイルも含まれています。
ステップ 1：ストーリーボードまたは XIB プロジェクトの作成
Interface Builder を使用するには、テンプレートからプロジェクトを作成する ときに、ユーザーインターフェイスとしてストーリーボードまたは XIB (macOS) を選択します。すると、プロジェクトには、アプリが最初に起動したときに表示されるビューコントローラーとビューを含むメインユーザーインターフェイスファイル (Main.storyboard、Interface.storyboard、または MainMenu.xib ファイル) が含まれます。iOS アプリの場合、アプリの起動中に表示されるビューには、LaunchScreen.storyboard ファイルもあります。
ステップ 2：ユーザーインターフェイスファイルを開く
プロジェクトナビゲータ で、ユーザーインターフェイスファイル を選択すると、エディタエリア 内の Interface Builder でファイルが開きます。ビューがキャンバスエリア内に表示され、下にあるオブジェクトの構造体がアウトラインビューに表示されます。アウトラインビューが折りたたまれている場合は、キャンバスの下のトグル (
) をクリックして展開します。ストーリーボードファイルを初めて開くと、レイアウトはデフォルトのデバイス構成で表示され、後で変更できます。
別のウィンドウで Interface Builder を開くには、ユーザーインターフェイスファイルを Control + クリックし、ポップアップメニューから [新しいウィンドウで開く(Open in New Window)] を選択します。
ステップ 3：コントロール、画像、その他の UI オブジェクトを追加
ユーザーインターフェイスで必要なすべてのオブジェクトをライブラリからキャンバスにドラッグします。ライブラリ を開くには、ツールバーの[ライブラリ] ボタン (+) をクリックしてから、オブジェクト(
)、画像(
)、またはカラーライブラリ(
) をクリックして、ドラッグするオブジェクトを見つけます。
キャンバスでは、グリッド線を使用してオブジェクトを整列および中央揃えでき、目的の場所にオブジェクトをドラッグすることで、オブジェクトを再配置できます。テキストを変更するには (たとえば、ボタンのタイトルを編集するには) 、オブジェクトをダブルクリックして、テキストを入力します。
また、インスペクタを使用してオブジェクトを編集することもできます。キャンバス上でオブジェクトを選択し、属性インスペクタ (
) をクリックします。ビューのサイズと位置に関する情報を取得するには、サイズインスペクター (
) をクリックします。
macOS アプリの場合、項目をタッチバーに追加します。NSTouchBar オブジェクトをオブジェクトライブラリからウィンドウまたはカスタムビューにドラッグします。NSTouchBarItem オブジェクトをタッチバーにドラッグし、項目をコードに接続します。次に、NSTouchBar オブジェクトの項目をプレビュー し、Mac 上で実際のタッチバーを使用して項目をテストします。タッチバーがない場合は、タッチバーシミュレータ を使用してテストできます。
ステップ 4：ビューとコントロールをコードに接続する
ユーザーインターフェイスにオブジェクトを追加するときに、ソースエディタ でその動作を実装するコードを記述できます。ビューコントローラの実装ファイルを開くには、[自動(Automatic)] を選択してから、ジャンプバーのクラス実装ファイル名を選択します。次に、インターフェイスビルダーを使用して、ユーザーインターフェイスオブジェクトをコードに視覚的に接続します。
コード内のインターフェースオブジェクトを参照したい場合は、キャンバス上のオブジェクトからプロパティ宣言が許可されているソースエディタのコードに Control + ドラッグして、アウトレット接続を追加 します。ユーザーがコントロールと相互作用したときに呼び出される アクションメソッドを追加する には、コントロールから実装ファイルのメソッド実装セクションに Control + ドラッグします。
接続を削除したり変更する には、オブジェクトを選択して、Control + クリックして接続パネルを開くか、[表示(View)] > [インスペクタ(Inspectors)] > [接続インスペクタを表示(Show Connections Inspector)] を選択して 接続インスペクタ (
)を開きます。
ステップ 5 ：さまざまなデバイス構成を使用して UI を表示し、必要に応じてバリエーションを作成
まず、キャンバスの下にある [表示(View as)] ボタンを使用して、アプリを実行しているほとんどのユーザに想定する さまざまなデバイス構成を使用してユーザーインターフェイスを表示します。次に、必要に応じて ユーザーインターフェイスのバリエーションを作成 します。
ステップ 6：アプリのユーザーインターフェイスのレイアウト制約を定義
デバイス構成を変更したときに、キャンバス内のオブジェクトが予期した場所に表示されない場合は、[自動レイアウト(Auto Layout)] 制約を使用して、オブジェクトのスケーリングと再配置の方法に関するルールを設定します。距離と配置、サイズと位置 の制約を追加できます。次に、ツールを使用して、自動レイアウトのエラーと警告を見つけて解決 します。
ステップ 7：ストーリーボードを使用してアプリのユーザーインターフェイスを設計
シーンを接続するセグエ、およびセグエをトリガーするコントロール、シーンで構成されるストーリーボードで、アプリ内のユーザパスをグラフィカルにレイアウトします。最初に シーンとビューを追加 し、次に それらの間にセグエを追加 します。
ステップ 8：レイアウトのプレビュー
アシスタントエディタを使用して、さまざまなデバイス構成でレイアウトをプレビュー できます。iOS アプリの場合、ポートレートモードとランドスケープモードを切り替えてから、別のデバイスファミリーを選択できます。macOS アプリの場合、レイアウトをダークアピアランスとライトアピアランスでプレビューできます (ダークモードのサポート (macOS) を参照の事)。アプリにローカリゼーションを追加すると、ポップアップメニューから言語を選択できます。ローカライズをまだ行っていないが、レイアウトがさまざまな文字列の長さをどのように処理するかを確認したい場合は、メニューから[倍長の疑似言語(Double-Length Pseudolanguage)] を選択します。
以下も見よ
アウトレット接続を追加してメッセージを UI オブジェクトに送信
アクション接続を追加して UI オブジェクトからメッセージを受信
さまざまなデバイス構成を使用してユーザーインターフェイスを表示