*

Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]

公開日: : 最終更新日:2014/06/20 Objective-C ,


スポンサードリンク



「基礎知識と制約(Align:アライメント)の設定方法」に引き続き、「Auto Layout」に必要不可欠な
Pin制約の設定方法の説明をさせていただきます。

利用しているXcodeはXcode5(5.1)となります。

本エントリーの内容は以下のようになります。

  1. Xcode5で制約を設定する方法(Pin:固定幅設定)

 

Xcode5で制約を設定する方法(Pin:固定幅設定)

Pin「制約」のボタン

Pin「制約」のボタンは以下の画像の赤枠部分です。
スクリーンショット 2014-04-16 16.44.29

Pinで設定可能な「制約」

画面を見ていただいて分かる通りですが、コンポーネントのサイズや、
親コンポーネントとの位置情報の制約が設定可能です。

設定画面

設定画面は以下の通りです。
スクリーンショット 2014-04-16 16.46.01

各設定の説明を以降で記載させていただきます。

「Spacing to nearest neighbor」の設定方法

この設定を行うのは設定画面の赤枠の部分です。
画面の上から左周りに以下の設定となります。z

  • 水平方向の上からの距離
  • 垂直方向(Leading)からの距離
  • 水平方向の下からの距離
  • 垂直方向(Trailing)からの距離

距離、距離と書いてますが、どこからの距離になるかは、制約の基準になるコンポーネントによって変わります。
「Titanium Mobile」のコンポーネントの配置の方が理にかなっているように思えます。
これについては後ほど説明させていただきます。

数値が4個入力されていますが、これはこのコンポーネントの現在のCanvas上の距離です。
スクリーンショット 2014-04-16 17.27.24

値は入力されていますが、制約は有効になっていません。
例えば、水平方向の距離の制約を有効にするには以下の部分をクリックします。
また、値を変更後にリターンキーを叩くことでも有効になります。この動きは、Pin設定画面全てで通用します。
スクリーンショット 2014-04-16 17.39.08

クリックすると少し太い線になります。これで制約が有効になりました。
スクリーンショット 2014-04-16 17.35.36

「Spacing to nearest neighbor」の設定値の評価方法

先ほども少し言及しましたが、例として、垂直方向(Leading)からの距離の制約を設定する時の
距離の評価方法(制約の基準となるコンポーネント)を説明させていただきます。
なお、他の3制約も考え方は同じとなります。

距離の基本的な考え方としては以下の4つがあります。

1.同一階層に設定対象以外のコンポーネントが存在しない時または左側に
設定対象が移動して重なるコンポーネントが存在しない場合は、親コンポーネントからの距離
2.同一階層のコンポーネントで、設定対象のコンポーネントが一番左側の時は、親コンポーネントからの距離
3.同一階層にコンポーネントが左側に存在する場合は、そのコンポーネントの右端からの距離(実際は1と同じ問題がある)
4.Xcodeの制約は基本的には、静的な設定、「Interface Builder」で設定された制約は、動的に追加されたコンポーネントに対してはが有効にはならない

「考え方1」
「設定対象が移動(Leading)して重なるコンポーネントが存在しない場合は」とは、
以下の様な状態の時です。
スクリーンショット 2014-04-16 19.47.32
“Leadingで100の制約”とのテキストのTextViewと同一階層、
それも左側にコンポーネントが存在していますが
画面の制約は親のViewを基準としています。

前述のコンポーネントの相関関係の状態で制約を設定すればこうなってしまうのですが、
“関係ない”とのテキストのTextViewをY軸方向に上部に移動した以下の画像の状態で、制約を追加すると
制約の対象が”関係ない”TextViewに変わります。
スクリーンショット 2014-04-16 20.48.14

上記の画像の状態が「考え方3」になります。

当然、一度制約を追加した後に”関係ない”TextViewを下に移動しても制約の対象は変わりません。
Document Outlineを見れば「Horizontal Space – (100) – Text View – Text View」
との名前なので分かりますが、要らぬ誤解を生む仕様のような気がします。
スクリーンショット 2014-04-16 20.50.35

「考え方2」
これは特に説明は不要と思います。
スクリーンショット 2014-04-16 21.47.15

「Spacing to nearest neighbor」の設定方法はご理解いただけたと思います。
なんでやねん!、って方は是非コメントを残していただきたいです。
コメントもうだいぶないなー・・・

「Width」と「Height」

これについては、特に問題ないかと思います。対象コンポーネントの幅or高さを固定値で設定したい時に利用します。

「Equal Widths」と「Equal Heights」

複数のコンポーネントの幅や高さを同じにする制約です。これもイメージしやすいと思います。

「Equal Widths」と「Equal Heights」の説明のために以下の様な画面を作成しました。
スクリーンショット 2014-04-17 13.40.23

ルートViewの配下にChildView1とChildView2が存在しています。
ChildView1、ChildView2を識別するためにそれぞれにLabelを配置し
LabelのテキストにChildView1、ChildView2を指定しています。

スクリーンショット 2014-04-17 14.29.54
まず注目していただきたいのは、ChildView1に対する
Height – (130) – ChildView1
Width – (130) – ChildView1
の制約です。「基礎知識と制約(Align:アライメント)の設定方法」の基礎知識で説明させていただきましたが、
制約がない値は「update Frames」でランダム(完全にそうかは不明)に決定されてしまいますので、まずはChildView1のサイズを固定としました。

いよいよ「Equal Widths」を「ChildView2」に設定してみました。Widthは揃いました。
スクリーンショット 2014-04-17 14.33.35

「Equal Heights」も設定してみました。Heightも揃いました。
スクリーンショット 2014-04-17 14.39.13

「Aspect Ratio」

Xcodeの5.1から「Interface Builder」でも設定できるようになった「制約」です。
以前のバージョンでは、Objective-Cのコードで「NSConstraints」を利用して指定しないと利用できませんでした。

制約の内容は、言葉の通りですが、面の比率の指定です。
iPhoneアプリは基本的に2次元なので、任意のコンポーネントの横(Width)と縦(Height)の比率を指定します。
縦横比率の方が馴染みがあるような気がするのは私だけでしょうか・・・

実際に、先ほどの画面のChildView1に「Aspect Ratio」を追加してみようと思うのですが、
追加する前に、ChildView1の「Height」制約を削除します。
どう考えても、

  • 「Height」と「Width」の値を指定
  • 「Height」を「Width」の比率を指定

は矛盾しますよね、この矛盾については、他のエントリーで取り扱う予定です。

いよいよ「Aspect Ratio」を設定してみます。
あれ!?、チェックボックスしかないです。比率はどうやって設定するの?

とりあえずチェックして制約を追加してみました。
追加後の画面は以下の様になりました。
スクリーンショット 2014-04-17 16.42.42

制約追加後のChildView1の縦横比は変化していませんので、Canvasに表示されている値の比率がデフォルトとして適用される仕様のようです。

追加した制約を選択すると、ユーティリティエリアに制約の設定が表示されます。
この「multiplier」で実際の縦横比が変更できます。
スクリーンショット 2014-04-17 15.35.00

縦横比に3:4(画面では横縦比を指定なので4:3)に変更後で、ChildView1、ChildView2を選択後し「update Frames」を行いました。
すると画面は以下の様になりました。(繰り返しになりますが、制約の無い値はランダムになりますので、それらの値は調整してます。)
スクリーンショット 2014-04-17 16.54.08

設定されている制約は以下の4つです。

  1. Width – (130) – ChildView1
  2. Aspect Ratio – ChildView1 – ChildView1
  3. Equal Heights – ChildView1 – ChildView2
  4. Equal Widths – ChildView1 – ChildView2

 

1つ目の制約からChildView1のWidth=130が確定

2つ目の制約からChildView1のHeightが確定
実際の値は130*3/4=97.5で、端数切り捨てられて97

3つめの制約からChildView2のHeightは97

4つめの制約からChildView2のWidthsは130

となります。

「Align」の設定方法

「Pin」の設定画面からでも「Align」の制約が設定できます。
スクリーンショット 2014-04-17 17.14.11

Alignの右側にあるコンボボックスをクリックすると以下の様な選択肢が表示されますので、追加したい制約を選ぶだけです。
スクリーンショット 2014-04-17 17.20.23

「Xcode5でAuto Layout 機能を利用する[制約(Pin:固定幅設定)の設定方法]」は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Xcodeの使い方[エディタエリアのテキストエディタ]

「Xcodeの使い方」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド処理の実装方法その1[NSThreadクラスの簡単な利用例]

「iOS(Xcode6)におけるマルチスレッド処理の実装方法その1」に引き続きiOSに置けるマルチス

記事を読む

Xcode5のナビゲーションエリア[プロジェクト、シンボル、検索]の使い方

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

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]

iPhoneアプリの画面遷移と言えば、真っ先に挙がるのが「ナビゲーションコントローラ」なのですが

記事を読む

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

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

記事を読む

Objective-C(Xcode)でイメージのアニメーション表示を行う。

「Xcode5でイメージ(画像)を表示&操作する」では画面に表示されているイメージをタップし

記事を読む

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

「Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認

記事を読む

Xcode5のEmpty Application templateでStoryboardを利用する。

Xcode5のEmpty Application templateでStoryboardを利用する方

記事を読む

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

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

記事を読む

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 ↑