複数のスクリーンサイズでビルド


iOS と watchOS デバイスは、複数のスクリーンサイズで発表され、Split View (分割表示) と iPad でのマルチタスキングはさらにバリエーションを追加しました。これらの組み合わせのアプリのデザインとレイアウトは3つの技術で簡単になります。


これらの技術の組み合わせで、サイズや向きを変更するコードを書く代わりにユーザー・インターフェースをビルドするのに集中できます。


UIStackView の詳しい情報については、UIStackView クラスリファレンス (リンク切れ) を参照してください。


サイズクラスの使用


サイズクラス を使用すると、スクリーンのすべての異なるサイズのため1つのストーリーボードを使用することができます。それがほとんどのデバイス上で見えるようにインターフェイスをビルドした後、利用可能なスクリーンサイズが変更する必要があるオブジェクトのみを更新します。


サイズクラスは、高さと幅の表示領域の相対的な量を特定します。サイズは、高さまたは幅のどちらかが コンパクト または 通常 にできます。コンパクトの例としては、ポートレイトでは、iPhone のスクリーンの幅と、ランドスケープのスクリーンの高さです。通常の例としては、ランドスケープの iPhone のスクリーンの高さと、iPad のスクリーンの高さです。スクリーン上の点の具体的な数は問題でなく、利用可能なスペースの相対量だけが問題です。


あなたのインターフェイスのほとんどは、おそらく、コンパクトまたは通常と同じであるため、追加のサイズクラス、any があります。任意の幅と高さでインターフェイス要素のほとんどをレイアウトでき、その後、いずれかの軸のコンパクトなまたは通常のサイズに変更し、インターフェイスの任意の部分をレイアウトできます。


サイズクラスを意識した属性は次のとおりです:


これらの属性を変更することで有効にされるユーザーインターフェイスの変更の一部を以下に示します。


ビューまたは制約が現在のサイズクラスにインストールされていな九ても、それはまだ割り当てられていることに注意してください。そのビューまたは制約へのすべての参照は、有効なオブジェクトを返します。ビューはスーパービューがありません。ビューをアンインストールすると、Xcode は、関連するすべての制約をアンインストールします。


プロジェクトナビゲータでストーリーボードを選択して、ファイルインスペクタを表示し、また[サイズクラスの使用(Use Size Classes)] のチェックボックスを選択して、ストーリーボードのサイズクラスを有効にして下さい。Xcode はあなたがストーリーボードを変換したいかどうかを尋ねます。サイズクラスをオンにすると自動レイアウトもオンにします。



IB_SizeClassesEnableBefore_2x


サイズクラスを有効にした後、Xcode はキャンバスを正方形としてにあなたの全てのトップレベル・ビューコントローラを表示します。キャンバス中央の下部にあるサイズクラスコントロール (wAny hAny) もあります。コントロールは、幅 (W) および高さ (h) の現在のサイズクラスを示します。この場合には、any/any です。



IB_SizeClassesEnableAfter_2x


サイズクラスを変更するには、サイズクラスのコントロールをクリックします。表示されるポップアップで、必要な水平および垂直方向のサイズクラスのポップアップで象限にポインタを移動します。


IB_SizeClassesPicker_2x


新しいサイズクラスを選択した後、全てのビューコントローラは、新しいサイズクラスを反映するようにサイズが変更されます。下のバーは、もはや any/any を編集していないことを思い出させるために青色で表示されます。


IB_SizeClassesBlueBar_2x


特定のサイズクラスで、制約、ビュー、そしてフォントに加えた変更は、そのクラスに特異的になります。制約またはビューをアンインストールするには、制約を選択するか、表示して Command - Delete キーを押します。ビューをオフにすると、通常、そのビューに接続されているすべての制約をオフにします。


特定のサイズクラスでアクティブな物を確認する方法の詳細ヘルプについて、およびオブジェクトを操作するための他の方法については、サイズクラス・デザインのヘルプ を参照してください。



自動サイズ変更と配置の自動レイアウトを使用


自動レイアウトは異なるウィンドウ・サイズ、スクリーンサイズ、およびデバイスの向きに適応するアプリを可能にします。ユーザインターフェースの要素間の関係の 制約 を定義してこれを行います。例えば、イメージとそのコンテナ間の水平方向で中央の関係を作成します。ユーザーが iOS デバイスを回転させると、イメージはデバイスのランドスケープやポートレート向きの両方で中央にされたままです。


自動レイアウトの制約は、レイアウトを支配し、ユーザーインターフェイスのオブジェクトは自動的にサイズを変更し、いつでも以下の時自分自身を再配置します:


2つのユーザー・インターフェース・オブジェクト間で Control - ドラッグする場合、Interface Builder は、適切な制約のリストを提示します。このリストから選択して、オブジェクトに制約を追加します。以下のスクリーンショットは、コントローラのメインビューにメインロゴのイメージビューから Control - ドラッグした結果を表示しています。ポップアップメニューは、イメージビューとそのコンテナ間の2つの制約を表示しています。"コンテナのトップスペース" は、イメージビューの上部とコンテナの上部との間の制約です。もう一つはそのコンテナ内のイメージビューを水平に中央に配置します。


AddingConstraint_2x


オブジェクトの制約を確認するには、Interface Builder のドックでのアウトラインビューからオブジェクトを選択するか、キャンバス上のオブジェクトを選択します。制約は、青い実線で表されています。サイズインスペクタ (IB_H_inspector_size_button_2x) を選択して、制約のリストを表示できます。


IB_Constraints_View_2x


制約セクションの上部では、選択したオブジェクトの制約の型のグラフィカルな表現を示しています。各々の青色水平または垂直の線は、その型の制約が1つ以上あることを示しています。 1つ以上の行を選択すると、選択した型と一致する制約のリストをフィルタリングします。



IB_Constraints_Filter_2x


キャンバス上で制約を選択したり、サイズインスペクタで制約をダブルクリックしてインスペクタで制約を表示し、編集します。また、最も頻繁に編集された属性をポップアップエディタで表示するには、制約をダブルクリックして下さい。



IB_Constraints_Edit_2x


キャンバスの右下にあるボタン (IB_Constraints_Buttons_2x) の使用を含む、制約の追加と編集の方法がまだあります。自動レイアウトと制約の使用方法の詳細については、自動レイアウトガイド (リンク切れ) および 自動レイアウトのヘルプ を参照してください。







前:オブジェクトをコードに接続

次:オブジェクトの文書を表示
目次
目次
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:さらなる学習
    実地の紹介を取得

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














    トップへ 














    トップへ














    トップへ 














    トップへ 














    トップへ 














    トップへ 














    トップへ














    トップへ 














    トップへ