Interface Builder を使用


Interface Builder で、アプリのユーザーインターフェイスを作成します。ワークスペースウィンドウの編集領域で、Interface Builder で開いたファイルの内容と、プロジェクトナビゲータ内のユーザー・インタフェースファイルを選択します。ユーザー・インターフェース・ファイルには、ファイル名の拡張子 .storyboard または .xib があります。xib ファイルは、通常、1つのビューコントローラまたはメニューバーを指定します。ストーリーボードは、ビューコントローラのセットを指定し、これらのコントローラ間のセグエを指定します。xib とは異なり、ストーリーボードは、多くのビューコントローラと、それらの間の遷移を含めることができます。その組み込みテンプレートから新規プロジェクトを作成するときに、デフォルトのユーザー・インターフェース・ファイルが Xcode によって与えられます。



IB_H_selected_ib_file_2x


.xib.storyboard ファイルの内容は XML 形式で Xcode によって保存されます。ビルド時に、Xcode は nibs として知られるバイナリファイルに .xib.storyboard ファイルをコンパイルします。実行時には、nibs はロードされ、新しいビューを作成するためにインスタンス化されます。


ユーザーインターフェイス要素を追加するには、要素を配置する Interface Builder のキャンバス上にユーティリティエリアから、オブジェクトをドラッグし、その属性を設定し、ソースファイルでそれらとコードの間の接続を確立します。Interface Builder で、アプリのユーザーインターフェイス要素をレイアウトすると、アシスタントエディタでその動作を実装するコードを書くことができます。



StoryboardIB_2x


ユーザー・インターフェースをビルドし、インターフェイスビルダーファイルを作成し、構成するプロセスについての詳細は、Interface Builder のヘルプ を参照してください。



Interface Builder の部品


Interface Builder には、2つの主要な領域があります:(左側) ドックと、(右) キャンバスです。ドックは、ユーザー・インタフェース・ファイルに含まれているオブジェクトを示しています。アプリのユーザーインターフェイスでこれらのオブジェクトをレイアウトするのはキャンバスです。



DockAndCanvas_2x


ドックでの アウトラインビュー は、より高いレベルのオブジェクトの中にネストされたすべてのオブジェクトを表示します。


OutlineView_2x


xib ファイルの場合は、Interface Builder のキャンバスの (DockViewControl_2x) 左下隅の[文書アウトライン表示/非表示コントロール]をクリックすることで、アウトラインビューの代わりにアイコン表示で、高レベルのオブジェクトを表示できます。



IconDock_2x


ストーリーボードファイルでは、アウトラインビューのトップレベルの項目は、キャンバス上で、トップレベルのビューコントローラ、またはシーンに対応しています。アウトラインビューが隠されている時にストーリーボードファイルは、アイコンビューを表示しません。ストーリーボードの各場面は、以下に示すように、高レベルのオブジェクトビューを示すドックを有します。左から始めると、アイコンビューの項目は、シーンに対応しており、シーンの最初の応答者、およびそのシーンの終了セグエに対応します。ビューコントローラの本体に追加したものに加えて、シーンドックに独自のビューを追加できます。シーンの詳細については、ストーリーボードでのデザイン を参照してください。



SceneDock_2x


インタフェースオブジェクトの追加


アプリのユーザインタフェースにオブジェクトを追加するには、XC_O_area_button_utilities_2x(ツールバーのワークスペース構成ボタンの一つ)をクリックして、ワークスペースウィンドウのユーティリティエリアを開きます。ライブラリーバーのオブジェクトボタン XC_O_library_objects_button_2x をクリックして、ライブラリペインからオブジェクトライブラリを選択して下さい。オブジェクトを表すアイコンをクリックして、キャンバス上に、またはビューコントローラのドックに、ドックのアウトラインビューにライブラリからドラッグします。ドックにドラッグしたビューは、セグエによってのみ開ける事ができ、アプリが動作しているときに API で呼び出す事ができます。以下のスクリーンショットは、キャンバス上にビューコントローラをドラッグしている所を示しています。



SB_H_add_scene_2x-1


Interface Builder にオブジェクトを追加すると、それらのハンドルでサイズを変更し、ドラッグしてそれらを再配置できます。項目を移動すると、青い破線が現れ、ビュー内の項目を整列し、配置するのに役立ちます。


ユーティリティエリア内のライブラリバーの上に Interface Builder のインスペクタがあります。インターフェイスオブジェクトの外観と動作の一部を指定するために、これらのインスペクタを使用します。下のスクリーンショットでは、属性のインスペクタボタン (AttributesInspectorSelected_2x) は、ボタン型のカスタムを指定するために使用されます。



ArcherButton_2x


オブジェクトとその他の項目を追加することについてのヘルプについては、Interface Builder のオブジェクトとメディアのヘルプ を参照してください。



文字列の検索と置換


組み込みの検索コマンドを使用して、ストーリーボードと xib ファイル内の文字列を検索し、置換できます。これは、ユーザーインターフェイス要素内のシンボルや文字列の検索を含みます。プロジェクトの広い検索は xib とストーリーボードファイルを含んでいます。


Interface Builder で検索する方法の詳細については、文字列を検索し置換 を参照して下さい。







前:エディタのヘルプの検索

次ストーリーボードでのデザイン
目次
Xcode 9 の新機能

  • Part I:Xcode 概観
  • 一目見て
  • シングル・ウィンドウ・インターフェイス
    ソースコードの編集を支援
    グラフィカルな UI デザイン
    統合されたデバッグ
    テストと継続的統合
    自動保存とソース制御管理
    統合ドキュメント
    テスターと App Store にアプリを配布
    Xcode の取得
  • Part II:ワークスペースウインドウ
  • ワークスペース・ウィンドウ概観
    ワークスペースをナビゲート
  • ファイルの編集
  • 編集領域の構成
    ジャンプバーを使用
    リソースにアクセスし要素を検査
    ワークスペースツールバーを使用
  • 複数のワークスペースを使用
  • タブの使用
  • Part III:アプリの作成
  • プロジェクトの操作
  • プロジェクトは、ビルドするアプリのファイルおよびリソースのリポジトリ
    プロジェクトまたはワークスペースを閉じて開く
  • ターゲットでの作業
  • アプリ固有のターゲット設定の適用
    ターゲットに技術機能の追加
    ターゲットにオンデマンドリソースタグの追加
    ターゲットにファイル型とサービス情報の追加
    ターゲットのオーバーライドビルド設定
    関連したプロジェクトの操作
  • 代替ツールチェインの使用
  • 代替ツールチェインのインストール
  • インストールしたツールチェインの表示と管理
  • ツールチェインの表示および切り替え
    代替ツールチェインの検証、暴露、および削除
  • Part IV:コードを書く
  • ファイルを開き追加
  • テンプレートからのソースファイルの作成
    素早くファイルを開く
  • エディタを分割して関連コンテンツを表示
  • ソースコードの編集
  • 入力時にエラーを修正
    コード補完で入力スピードアップ
    中括弧、括弧のペアの一致、自動的に括弧でくくる
    ファイルにコードスニペットをドロップ
  • 検索と置き換え
  • ファイル内の検索
    すべてのシンボルを編集
    プロジェクトを検索
    ワイルドカードの使用
  • シンボルの操作
  • シンボルの定義を表示
    文書でシンボルの検索
  • コードの分析
  • コード折りたたみでコードの構造を調べる
    静的コード分析実行
  • エディタのカスタマイズ
  • 構文を意識したフォントとテキストの色を選択
    編集とインデントのオプションをカスタマイズ
    エディタのヘルプの検索
  • Part V:ユーザーインターフェースをビルド
  • Inteface Builder を使用
  • Interface Builder の部品
    インタフェースオブジェクトの追加
    文字列の検索と置換
    ストーリーボードでのデザイン
  • オブジェクトをコードに接続
  • コードにコントロールからアクションメッセージを送信
    アウトレットを通ってユーザインタフェースオブジェクトにメッセージを送信
  • 複数のスクリーンサイズでビルド
  • サイズクラスの使用
    自動サイズ変更と配置の自動レイアウトを使用
    オブジェクトの文書を表示
    ユーザーインタフェースのプレビュー
    カスタムビュークラスの作成とレンダリング
    Interface Builder のヘルプを検索
  • Part VI:アセットの追加
  • イメージの追加
  • アプリアイコンと起動イメージを追加
  • アセットカタログでイのメージアセットとの作業
    iOS の起動スクリーンファイル作成と設定
    パーティクルエミッタ効果の追加
  • 3Dシーンを追加
    その他のヘルプを探す
  • データセットの追加
  • データセットとファイルの追加
  • Watch 複合体の追加
    複合体の追加
  • Part VII:アプリの実行
  • アプリのビルド
  • アプリをビルドするスキームを選択
    アプリを実行する目的先の選択
  • シミュレーターで実行
    カスタムシミュレータ構成の作成
    実行目的先メニューでシミュレータ、デバイスの表示
  • デバイス上で実行
    実行目的先のデバイスを選択
    スキームの管理
  • Part VIII:デバッグ
  • デバッガーの使用
  • 実行の制御
    状態情報の表示
    メモリ破損の検索
    メタルのデバッグ
    OpenGL のデバッグ
    ビュー階層の調査
    システムへの影響を調査
    パフォーマンスの測定
    問題のシミュレーション
    ワークフローのカスタマイズ
  • Part IX:テスト
  • ユニットテストの使用
    継続的統合のテストの使用
    コード適用範囲の使用
    UI テストの記録
    テストの記録
  • Part X:変更の管理
  • ファイル保存の使用
    最後に保存したファイルのバージョンに戻す
    取り消しの使用
    ソースコード制御の使用
    ファイルの状態の表示
    ファイルのバージョンをコードの元の行と比較
    危険な変更を分離するため分岐を作成
    Part XI:さらなる学習
    実地の紹介を取得

  • ヘルプメニュー
  • 詳細なユーザー・ガイドから学ぶ
  • タブの使用
    内容の目次を表示
    ドキュメントのブラウズ
    ドキュメントの検索
    ドキュメントをブックマーク
    最新の状態のまま
    文書改訂履歴












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ
    











    トップへ
    











    トップへ
    











    トップへ