*

Xcode5の「Auto Layout」機能の使い方[制約の編集方法]

公開日: : Objective-C ,


スポンサードリンク




Xcode5の「Auto Layout」機能の使い方[基礎知識と制約(Align)の設定方法]

Xcode5の「Auto Layout機能」の使い方[Pin制約の設定方法]では、制約の新規追加のみで「Auto Layout」機能を利用する説明をさせていただきました。

今回は、既に追加されている制約の編集方法の説明をさせていただきます。

既に追加されている制約の編集方法

既に追加されている制約を編集するには、「Attributes Inspector」を利用します。

実際に存在している「Horizontal Space – (112)」制約を選択した時の「Attributes Inspector」の表示は
以下の画面のようになります。
スクリーンショット 2014-06-20 10.07.55

制約を選択する方法は、「Document Outline」で選択する方法と
制約が設定されているコンポーネントの「Size Inspector」で「Select and Edit…」を選択する方法があります。
スクリーンショット 2014-06-16 18.53.34

「Attributes Inspector」に表示される内容の説明

制約選択時の「Attributes Inspector」には
制約名(制約の種別の名称)、「First item」、「Relation」、「Second Item」、
「Multiplier」、「Constant」、「Priority」、「Placeholder」の各項目が存在します。
スクリーンショット 2014-06-20 10.21.39

制約名

制約名(制約の種別の名称)には以下の名称が表示されます。

Attributes Inspectorでの表示名 制約追加画面での制約名 説明
Leading Alignment Leading Edges 水平位置(文頭)を揃える制約
Trailing Alignment Trailing Edges 水平位置(文末)を揃える制約
Top Alignment Top Edges 垂直位置(Top)を揃える制約
Bottom Alignment Bottom Edges 垂直位置(コンポーネントのBottom)を揃える制約
Horizontal Alignment Horizontal Centers< 複数のコンポーネントの水平方向の中心位置を揃える制約
Vertical Alignment Vertical Centers 複数のコンポーネントの垂直方向の中心位置を揃える制約
Baseline Alignment Baselines 各コンポーネントが横並びで配置された時に奇麗に見えるようにBaselineをそろえる制約
Center X Alignment Horizontal Center in Container 親コンテナの横の中心(水平方向の中心位置)と選択コンポーネントの横の中心をそろえる制約
Center Y Alignmen Vertical Center in Container 親コンテナの縦の中心(垂直方向の中心位置)と選択コンポーネントの縦の中心をそろえる制約
Horizontal Space Spacing to nearest neighborの左右 対象コンポーネントの垂直方向(Leading)の距離、または垂直方向(Trailing)の距離を指定する制約
Vertical Space Spacing to nearest neighborの上下 対象コンポーネントの水平方向の上からの距離、または水平方向の下からの距離を指定する制約
Width Width 対象コンポーネントの幅を指定する制約
Height Height 対象コンポーネントの高さを指定する制約
Equal Widths Equal Widths 2つのコンポーネントの幅を同じにする制約
Equal Heights Equal Heights 2つのコンポーネントの高さを同じにする制約
Aspect Ratio Aspect Ratio 対象コンポーネントの横縦比率を指定する制約

 

First itemとSecond Item

「First item」と「Second Item」は制約の対象となるアイテムです。

・表示内容の説明
対象アイテムが単一である制約の「Attributes Inspector」には「Second Item」は表示されません。
この制約の例は「Width」制約です。
スクリーンショット 2014-06-20 14.43.18

「First item」には、Round Style…Text1.Widthとなっています。
正確には、「Document Outline」上で表示されたコンポーネントの名称の略称+”.Width”が表示されていると言えます。

逆に、両アイテムが表示される制約の例は「Leading Edges」制約です。
スクリーンショット 2014-06-20 14.47.13

「First item」には、Text2.Leadingとなっています。
「Second item」には、Text3.Leadingとなっています。

コンポーネントの左端をそろえる制約ですから納得できます。
なお、「Document Outline」上での名称をできるだけitemに反映するかどうかは、
その制約に複数コンポーネントが関係しているかに依存します。
単一コンポーネントの場合は、できるだけ「Document Outline」上の名前を利用しようという仕様です。

・選択時に表示されるコンボの選択肢
表示している制約によって、コンボに表示される選択肢も変わります。

Text1のWidth制約が表示されている場合は、選択肢は以下の画像のようになります。
Width制約は、Height制約に変更可能なことがこの選択肢から分かります。
スクリーンショット 2014-06-20 15.06.08

Text2とText3の「Leading Edges」制約が表示されている場合は、「First item」の選択肢は以下の画像のようになります。
スクリーンショット 2014-06-20 15.10.56

同じ状態での「Second item」の選択肢は以下の画像のようになります。
スクリーンショット 2014-06-20 15.14.03

当然ですが、Text2とText3の「Leading Edges」制約表示時の「First item」と「Second item」の選択肢は同じでした。
どの選択肢も、一方のコンポーネントのX座標の先頭または終端、及び真ん中を他方のコンポーネントの3つの選択肢のどこかに
変更する物となっています。

この2つの例が理解できていれば、「First item」と「Second item」に表示される項目で悩むことはないと思います。

Relation

「Less Than or Equal」、「Equal」、「Greater Than or Equal」が選択可能です。
スクリーンショット 2014-06-20 17.47.59

Constantで指定された値をどう評価するかを指定します。
「Less Than or Equal」は以下、
「Equal」は同じ、
「Greater Than or Equal」は以上と評価します。

Multiplier

「Equal Widths」制約、「Equal Heights」制約を設定した後で、「Multiplier」に任意の値を設定すると
幅がMultiplier倍、高さがMultiplier倍となる制約とすることが可能です。
基準は「Second item」になります。

以下の画像の様に、「Equal Widths」制約を「First item」をText1.Width、「Second item」をText3.Width
とし、Multiplierに0.5を設定します。
スクリーンショット 2014-06-20 18.26.08

すると、Text3.WidthがText1.Widthの2倍になります。なんか逆になるのが自然な感じがするのですが・・・

「Aspect Ratio」制約の場合は、横縦比を変更できます。
スクリーンショット 2014-06-20 18.17.04

Constant

制約の具体的な値を指定する項目です。

以下の設定画面は、「Round Style Text Field – Text3.Height」にHeight属性、値は40が設定されていることを意味します。
スクリーンショット 2014-06-20 18.43.49

なお、この値は先に説明させていただいた「Relation」に影響を受けます。
「Less Than or Equal」を指定した場合は、Text3.Heightは40以下、
「Equal」を指定した場合は、ピッタリ40
「Greater Than or Equal」を指定した場合は、Text3.Heightは40以上
との制約になります。

Priority

制約の優先順位の数値を指定します。
どの数値と優先順位を比較するかとの疑問が残ると思います。

これは、制約の対象となっている画面コンポーネント選択時の「Size Inspector」の「Content Hugging Priority」と「Content Compression Resistance Priority」の値となります。

「Content Hugging Priority」と「Content Compression Resistance Priority」の
詳細は、Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」Inspector]をご覧下さい。

Placeholder

チェックボックスの右側のテキストに「Remove at build time」と書いてあるとおり
この設定を有効にすると、ビルド時に制約が削除されます。

「Xcode5の「Auto Layout」機能の使い方[制約の編集方法]」は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcodeの使い方

Objective-Cでコーディングを行うための統合開発環境のXcodeの利用方法のエントリーです。

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcode5で画面にナビゲーションバーを配置して利用する。

今回は「ナビゲーションバー」をiPhoneアプリの画面に配置して利用する方法を記載させていただきます

記事を読む

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

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

記事を読む

Xcodeの使い方[エディタエリアのJump BarのThe related items menu]

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

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「File」,「Quick Help」,「Identity」]

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

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

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

記事を読む

Objective-Cでコールバック処理を@Selectorで実現する方法

最近はSwiftばっかり読み書きしていますが、既存のライブラリをカスタマイズして使うことも多いので

記事を読む

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

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

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 ↑