ユーザーインターフェースのビルド


重要: これは、開発中の API や技術の予備的な文書です。Apple は、Apple ブランドの製品で使用するために、この文書に記載の技術やプログラミング・インターフェースの採用を計画するのに役立つ、この情報を供給します。この情報は変更される可能性があり、この文書に従って実装されるソフトウェアは、最終的なオペレーティング・システム・ソフトウェアと最終文書でテストする必要があります。この文書の新しいバージョンは、API または技術の将来のベータで提供されるかもしれません。


視覚的に Interface Builder で、アプリのユーザー・インターフェースをレイアウトします。


StoryboardIB_2x


ワークスペースウィンドウの編集領域で、プロジェクトナビゲータでユーザー・インターフェース・ファイルと、Interface Builder で開いたファイルの内容を選択します。(ユーザー・インターフェース・ファイルは、ファイル名の拡張子 .storyboard または .xib があります。組み込みテンプレートから新規プロジェクトを作成するとき、デフォルトのユーザー・インターフェース・ファイルは Xcode に供給されます。) Interface Builder の設計キャンバスで、ユーザーインターフェースのビュー、コントロール、および他の要素を組み立てます。


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


あなたのアプリに、コントロール、グラフィックス、アイコン、録音されたオーディオ、および他のユーザインタフェース要素を追加します。 Interface Builder のオブジェクトとメディアのヘルプ で述べたように、Interface Builder にワークスペースウィンドウのユーティリティ領域から、オブジェクトとメディアをドラッグします。


DragButton_2x


コードにユーザーインターフェイス要素を接続します。 Interface Builder でアプリのユーザーインターフェイス要素をレイアウトすると、アシスタントエディタでその動作を実装するコードを書くことができます。Interface Builder の接続のヘルプ で述べたように、あなたのコードにユーザインターフェイス要素を接続して、Interface Builder を視覚的に使用してください。


insert_action_2x


アプリのユーザインターフェイスのレイアウトの制約を定義します。 ユーザー・インターフェース内のオブジェクトは、そのサイズや位置を変更すると、レイアウト上の制約は、そのオブジェクトとその隣接するオブジェクトを自動的にそのサイズおよび位置を調整させます。レイアウト制約は Interface Builder のキャンバス上で青い線で表されます。レイアウト制約の作成および編集の詳細については、自動レイアウトヘルプ を参照してください。


ViewConstraints_2x


ストーリーボードを使用して、アプリのユーザーインターフェイスを設計します。 シーンから成るストーリーボードであなたのアプリを介してユーザのパスをグラフィカルにレイアウトし、シーンをセグエに接続し、またセグエをトリガするために制御します。詳細については、ストーリーボードのヘルプ を参照してください。


interface_builder-storyboard_2x


様々なサイズと向きで、任意の iOS デバイスのユーザーインターフェースを自動的に適応させる、単一の iOS アプリを作成します。 サイズクラスのデザインヘルプ で述べたように、汎用デバイスの場合であるかのように、抽象的にデザインをレイアウトすることから始めます。より具体的な形式の要素に合わせて、適切なサイズのクラスを選択し、ビューを追加・削除し、または必要に応じて制約を追加、削除・編集します。例えば、アプリは、狭い iPhone と広い iPad の両方のために設計できます。


SC_H_preview_2x


ドックやキャンバスから Interface Builder のオブジェクトにアクセスします。 ドックは、インターフェイスビルダーエディタウィンドウの左側の列で、キャンバスは、右側のデザイン領域です。ドックは、ユーザー・インタフェース・ファイルに含まれているオブジェクトをリスト表示しています。以下のスクリーンショットに示すドック内の アウトラインビュー は、より高いレベルのオブジェクトの中にネストされたすべてのオブジェクトを表示しています。キャンバスは、アプリのユーザーインターフェイスでこれらのオブジェクトをレイアウトする所です。


DockAndCanvas_2x


アウトラインを表示/隠すには、[エディタ(Editor)] > [文書アウトラインとエディタを隠す(Hide Document and Editor)] > [ドキュメントアウトラインを表示(Show Document Outline)] を選択します。(または文書のアウトライン非表示/表示コントロール (XC_O_area_button_navigator_2x) を使用します。)


ストーリーボード内の個々のシーンも、シーンの最上部にシーンドックがあります。以下に示すシーンドックは、アイコンビュー でオブジェクトを表示します。


SceneDock_2x


ストーリーボードファイルの場合、アウトラインビューだけが、キャンバスの左側にドックに表示されます。xib ファイルの場合、以下のスクリーンショットに示すように、アイコンビューでドックに高レベルのオブジェクトも表示できます。xib ファイルのアイコンとアウトラインビューを切り替えるには、[エディタ(Editor)] > [文書アウトラインとエディタを隠す(Hide Document Outline and Editor)] と、[エディタ(Editor)] > [文書アウトライン表示(Show Document Outline)] を選択します。(または、キャンバスの左下隅にある文書のアウトライン非表示/表示コントロール (XC_O_area_button_navigator_2x) を使用します。


IconDock_2x


関連記事


ストーリーボードと Xib ファイルの作成






目次
Xcode 9 の新機能

★ヘルプ項目総索引★

ユーザーインターフェース索引
ユーザーインターフェースのビルド
ストーリーボードと Xib ファイルの作成
Interface Builder ファイルの検査と構成
別のローカライズ、iOS デバイス、そして iOS バージョン用のレイアウトのプレビュー
分割画面でアプリのプレビュー
ビューにガイドの追加
Apple TVのグリッドのためのガイドを追加
ユーザー定義ランタイム属性の追加
状態と上下のバーのシミュレーション
スクリーンサイズや向きのシミュレーション
文字列の検索と置換
ストーリーボードの拡大率を変更
プレースホルダの背景の切り替え












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ