ストーリーボードでのデザイン


グラフィカルに、iOS、watchOS、または OS X のアプリ全体を通してユーザのパスをレイアウトするためにストーリーボードを使用して下さい。以下の面でユーザーインターフェイスを指定するには、Interface Builder を使用して下さい。


シーン(scene) は、画面上の内容の領域を表します。 iPhone や iPod touch 上では、スクリーンは、一般的に、単一のシーンを含みます。 iPad と Mac では、スクリーンは、一つのシーン以上で構成できます。セグエ(segue) は、1つのシーンが別のものの上をスライドするときのように、一つのシーンから次のシーンへの遷移を表します。また、関連するシーンにインターフェイスを分割できるようにする、ストーリーボードの間のセグエを作成することもできます。


以下のスクリーンショットは、iOS プロジェクト内のマスター・ディテール・パターンのためのストーリーボードを示しています。このストーリーボードは、3つのシーンと2つのセグエを含んでいます。一番左のシーンは、マスターとディテールシーン間のユーザーナビゲーションを管理するナビゲーションコントローラを表します。このテンプレートから作業する場合、キャンバスにオブジェクトライブラリからビューコントローラをドラッグし、必要なシーンを追加し、アイデンティティインスペクタ(IB_H_inspector_identity_button_2x) でビューコントローラを構成します。オブジェクトライブラリからオブジェクトをドラッグして、各シーンをレイアウトします。属性インスペクタ(IB_H_inspector_attributes_button_2x) を使用してオブジェクトとセグエを構成します。


interface_builder-storyboard_2x


あなたのマスターシーンは、例えば、複数の項目を一覧にする表を含んでいる場合があります。マスターシーン内の各アイテムには、アイテムに関する追加情報を提供するそれぞれの詳細シーンがあります。ナビゲーションコントローラは、すべての詳細シーンからマスターシーンにユーザーを戻す[戻る(Back)] ボタンを用意しています。


MasterDetailViews_2x


ストーリーボードの詳細については、ストーリーボードのヘルプ を参照してください。







前: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:さらなる学習
    実地の紹介を取得

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