*

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」Inspector]

公開日: : Objective-C


スポンサードリンク



本エントリーでは、「Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「File」,「Quick Help」,「Identity」]」に引き続き、「ストーリーボード」表示時の「ユーティリティエリア」に表示される「Attributes」,「Size」,「Connections」の各Inspectorの使い方を説明させていただきます。

ストーリーボード表示時のユーティリティエリアの使い方

Attributes Inspector

このインスペクタには
選択している画面コンポーネントに対応する

  1. 「オブジェクト属性」
  2. 「View」属性
  3. 「Control」属性

の3つが基本的には表示されます。

基本的にはとの前提を記載したのは。例外があるからです。
View(UIView)には「オブジェクト属性」の「View」属性しか存在しませんし、
ViewControllerには「Simulated Metrics」と「オブジェクト属性」である「View Controller」が存在します。

View選択時のAttributes Inspector

スクリーンショット 2014-06-11 18.10.45

・Mode

Modeは以下の値を指定可能です。

スクリーンショット 2014-06-11 19.25.36

 「Xcode5でイメージ(画像)を表示&操作する[前編]」で説明させていただいた値と同じです。

いろいろ調べてみたのですが、UIIMageViewにしかModeを設定する意味が見いだせません・・・

・Tag

プロパティのtagにセットされる値を指定します。各コンポーネントで同じ値を設定することも可能ですし、
一意な値を設定することも可能です。要は、プログラムで各コンポーネントをどのように識別したいかを考え、その考えた値をセットする項目です。
もちろんデフォルトのままでも問題ありません。

・InterAction
「User Interaction Enabled」をチェックするとユーザーからの動作を受け付けることができます。
「Multiple Touch」をチェックするとユーザーからのマルチタップを前提とするジェスチャーを受け付けることができます。

・Alpha
Alpha=0.0fを指定することで、背景色を透明にできます。

・Background
背景色を指定します。

・Tint
ボタン等に表示するテキストの色を指定します。しかしViewなのにボタン?と思いますよね。
これはオブジェクト指向の継承のような考え方になります。まあ実際はコピー(ViewのTintがButtonのTint)なんですけど・・・
スクリーンショット 2014-06-15 19.20.03

ViewのTintに自アプリケーションのキーカラーを設定しておけば、
個別のボタン等で同じようにTintを変更する必要がなくなり便利です

・Drawing
Drawingは複数の設定が指定可能です。指定可能な設定は以下の通りです。

設定 説明
Opaque ビューを透明化する必要が無い場合はチェックする。
Hidden ビューを非表示にするオプション
Clear Context Before Drawing 実際の描画前に以前の内容をクリアするオプション、非同期描画のリフレッシュ対応?
Clip Subviews 親ビューからサブビューがはみ出る場合、親ビューの領域を無視してサブビューを描画or親ビューからはみ出た領域を描画しない(クリッピング)かを指定するオプション
Autoresize Subviews 親ビューからはみ出る場合は、親ビュー内に収まるように縮小するよう指定するオプション

 

・Stratching
非推奨の古い機能です。

Buttton選択時のAttributes Inspector

「オブジェクト属性」である「Button」属性、「View」属性、「Control」属性が存在しています。
スクリーンショット 2014-06-15 20.55.53

「オブジェクト属性」属性につきましては説明するときりがないですので、省略させていただきます。

・Control属性

「Alignment」 テキストをコンポーネントのどの位置に配置するかを指定します。
「Content」の「Selected」 チェックするとテキストと背景の色が逆転したボタンになります。
「Content」の「Enabled」 チェックを外すと無効なボタンになります。
「Content」の「Highlighted」 チェックするとハイライトされたボタンになります。

Size Inspector

「View」項目のみが「Size Inspector」に表示されるのが一般的です。

例外としては、ルートView、「Segmented Control」等があります。
普通の「View」とルートViewで表示される内容が異なっている事は非常に面白いです。

Text Field選択時「Size Inspector」

Text Field選択時「Size Inspector」に表示される内容は以下の通りです。
スクリーンショット 2014-06-15 21.36.32

・Show
「Frame Rectangle」と「Layout Rectangle」が選択可能です。
「Frame Rectangle」を選択した場合は、影を含むオブジェクトの矩形サイズが「Width」と「Height」に表示されます。
逆に「Layout Rectangle」を選択した場合は、オブジェクト自体の矩形サイズが「Width」と「Height」に表示されます。

と言っても、iOS7はフラットデザインなのでどちらを選択しても同じ値になります。
iOS6以前のデバイスへの互換性を担保するためには考慮する必要があり、「Layout Rectangle」を選択して表示されているサイズを利用して、コンポーネントをぎっしり並べるような画面を作成するために、各コンポーネントの座標位置を計算し、配置すると、予想通りにならないので注意が必要です。

・Origin
選択しているコンポーネントの位置情報の基準点をどこにするかを指定します。
なお、位置情報はそのコンポーネントの親コンポーネントが基準となります。

以降では、以下の画像の一番上にあるボタンを例として説明させていただきます。
スクリーンショット 2014-06-16 15.08.27

上記画像のボタンの位置は変更せずに、「Origin」だけ変えた時にどうなるかを説明します。

デフォルト値は、コンポーネントの中心となっています。
スクリーンショット 2014-06-16 15.05.06

「Origin」を左に水平移動します。真ん中の赤い記号をドラッグして、左に移動しドロップします。
スクリーンショット 2014-06-16 15.05.06

するとサイズインスペクタは以下のように変化しました。予想通りX値がWidthの半分だけ減りました。
スクリーンショット 2014-06-16 15.23.28

再度、「Origin」を上に垂直移動してみました。
するとサイズインスペクタは以下のように変化しました。今度も予想通りY値がHeightの半分だけ減りました。
スクリーンショット 2014-06-16 15.28.10

・Intrinsic Size
「Default(System Defined)」と「Placeholder」が選択可能です。
「Placeholder」を選択すると、「Interface Builder」のCanvas上で表示される時にのみ適用される
WidthとHeightが指定できます。

「Default(System Defined)」選択時の画面
スクリーンショット 2014-06-16 15.40.33

「Placeholder」選択時の画面
スクリーンショット 2014-06-16 15.41.13

・Constraints
制約の情報が表示される領域です。
制約が設定されいない場合は以下のような表示内容となります。
スクリーンショット 2014-06-16 15.48.28

制約が設定されている場合は、「Size Inspector」で参照、削除、変更が可能となります。
またこの場合は、「Content Hugging Priority」と「Content Compression Resistance Priority」
が表示されるようになります。
スクリーンショット 2014-06-16 15.53.01

・「Content Hugging Priority」
推奨サイズを持つコンポーネントにおいて、その推奨サイズと、制約で決定されるサイズで矛盾が起こった場合の優先順位を指定します。「Content Hugging Priority」は、制約によって推奨サイズより大きくなる際の、大きくなりづらさを決める値です。

・「Content Compression Resistance Priority」
「Content Hugging Priority」とよくにていますが、制約によって推奨サイズより小さくなる際の、小さくなりづらさを決める値です。

「Content Hugging Priority」と「Content Compression Resistance Priority」は本当に分かりずらい設定です。制約と推奨サイズの優先順位であれば数値にする必要ないですよね・・・
間違いなく数値にする必要があるから数値なんでしょうが・・・
他のコンポーネントと領域を奪い合った時に、値の小さい方の勝ち、みたいな動きができるのでしょうか・・・

この点については別エントリーで検証したいと思います。
まずは「Developers.IO」様の「[iOS 7] Xcode 5 で始める Auto Layout 入門 #6 – 補足編」
の「Content Hugging Priority」と「Content Compression Resistance Priority」説明をご覧ください。

・制約の編集
表示されている制約の「設定」ボタンをクリックし、表示されたメニューの「Select and Edit…」をクリックします。すると以下のように画面が表示されます。
スクリーンショット 2014-06-16 19.00.20

結局は、「Document Outline」で編集したい制約を選択し、「Attributes Inspector」を表示したのと同じです。
「Attributes Inspector」の一番上には制約の種類が表示されます。

制約選択時のInspectorの説明は、別エントリー「Xcodeのユーティリティエリアの使い方[制約選択時のInspector]」
で詳しく説明させていただきますが、
制約の設定項目の「Priority」が、先ほど説明させていただいた「Content Hugging Priority」と「Content Compression Resistance Priority」の各値と優先順位を決める時に利用される値となります。

・制約の削除
選択されている制約が削除されます。

ルートView選択時「Size Inspector」

ルートView選択時の「Size Inspector」の表示は以下のようになります。
スクリーンショット 2014-06-18 13.48.26

ルートViewの場合は、制約が存在しなくても「Content Hugging Priority」と「Content Compression Resistance Priority」が表示されます。

View選択時「Size Inspector」

iew選択時の「Size Inspector」の表示は以下のようになります。
スクリーンショット 2014-06-18 13.51.40

Connections Inspector

選択している画面コンポーネントの「Interface Builder」の接続情報が一覧で参照可能で、切断、接続も実行できます。

Switch選択時に表示される内容な以下の通りです。
スクリーンショット 2014-06-18 14.01.32

「Connections Inspector」に表示される内容につきましては、画面コンポーネント選択後に、右クリックで表示される画面と同じ内容となります。

詳細は「Xcode5でInterface Builderの接続状態の確認と切断を行う。」をご覧ください。

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」]は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5でイメージ(画像)を表示&操作する[後編]

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示とイメージ操作時のイベント処理は必須とまでは

記事を読む

Xcode5のプロジェクトへのファイルやフォルダの追加方法

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示は必須な処理であると言えます。 本エントリ

記事を読む

Xcode6&Objective-Cにおけるブロック構文(Blocks記法)の利用方法

Xcode&Objective-CにおけるBlock構文の説明のエントリーとなります。 B

記事を読む

Xcode&Objective-Cのまとめエントリー

エントリーもまずまず揃ってきたので、まとめのエントリーを作成しておこうと思います。 基本的には、各

記事を読む

Xcode5で画面にツールバーを配置して利用する。

「ナビゲーションバー」と同様に「ツールバー」もナビゲーションコントローラ(UINavigationC

記事を読む

Xcode6からはProjectName-Prefix.pchは自動的に生成されませんが、それでもpchファイルを利用したい時の利用方法

小ネタですが、Xcode6からはProjectName-Prefix.pchは自動的に生成されなくな

記事を読む

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド(非同期)処理の実装方法その2[GCD(Grand Central Dispatch)の利用]

本エントリーではGCD(Grand Central Dispatch)を利用したiOSのマルチスレッ

記事を読む

Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

本エントリーでは、Xcode5のテーブルビューにUINibを使ったカスタムセル(UITableVie

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringの比較]

前回は、NSStringの定義、分割、検索の各処理を確認しました。 二回目は、NSStringの比

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑