*

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

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


スポンサードリンク



Xcode4から導入された「Auto Layout」ですが、使いこなせるようになるのは骨が折れます。
Xcode5ではかなり使いやすくなったとは言え、まだまだ学習コストが高いです。

本エントリーは、できるだけ簡単に「Auto Layout」を使いこなせしていただけるようにと思い作成しています。
一気に多くの内容を記載すると分かりにくなりますので、まずは、基礎知識と、
レイアウトを指定する上で必要となるAlign(アライメント系)の制約の説明をいたします。

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

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

  1. 「Auto Layout」を理解するための基礎知識
  2. Xcode5で制約を設定する方法(Align:アライメント)

 

1 「Auto Layout」を理解するための基礎知識

動作検証用のプロジェクトの作成

テンプレート:「Single View Application」
プロジェクト名:AutoLayoutSample
でプロジェクトを作成してください。

「Auto Layout」で指定可能な値

「Auto Layout」で指定可能な値の種類は以下の通りです。

  • 他のUIコンポーネントからの相対位置
  • 他のUIコンポーネントを基準とした自身のサイズ
  • 自身のサイズ

実際には「制約」という括りで各値は、「Interface Builder」で設定できます。
「Interface Builder」を利用しなくてもNSLayoutConstraintクラスを利用してコーディングで設定することも可能です。
その時には当然「Objective-C」の出番ですが、NSLayoutConstraintクラスを利用しないのであれば「Interface Builder」だけで完結します。

基準になる1つのコンポーネントのサイズの指定、
各コンポーネントを相対位置で指定、
各コンポーネントのサイズは、任意のコンポーネントの相対サイズ

との作り方をすればiPhone向けアプリが1つのレイアウトで対応可能ですね。
さすがに次期iPhone(iPhone6か?)では画面が大きくなることが予想されますよね。

最悪でも数個の値がデバイス固定で、それ以外は相対値でとの画面設計が可能そうですね。
当然ですが、ランドスケープ(横向き)も対応できそうです。

制約とFrameの矛盾

任意のオブジェクトに、位置に関わる制約が追加されたからといってCanvas(ストリーボード)上の位置は自動的に追随しません。

ボタンを以下の様に追加します。この時点ではFrame情報(位置情報、サイズ情報)とCanvas上のコンポーネントの情報は一致しています。
スクリーンショット 2014-04-14 15.05.02

制約追加後の状態

追加したボタンを垂直方向にセンターリングする制約を追加します。
細かい方法はのちほど説明しますので、まずは何も考えずにそのまま操作してください。
初めの赤枠をクリックし、次のチェックボックスをチェック、最後に「Add 1 Constraint」ボタンをクリックしてください。
スクリーンショット 2014-04-14 15.35.39

すると画面は以下のようになります。
すこし見にくいですが黄色い四角がシュミレータの真ん中にあります。
これが制約適用後のボタンのあるべき位置となります。
それに加えて制約インジケータが黄色くなっており、Frameと制約で矛盾が起こっていることを意味しています。
スクリーンショット 2014-04-14 15.39.39

この矛盾を制約に会わす場合は
以下のメニューの「update Frames」をクリックしてください。
スクリーンショット 2014-04-14 15.49.09

ボタンが垂直方向にセンターリングされました。
スクリーンショット 2014-04-14 15.57.05

水平方向は予想外の所に行ってしまいました。
確かに水平方法の制約がないので、Xcodeがランダムに値を決めて配置します。

ちなみにですが、「update Frames」を行わなくても、制約追加画面で同じ事ができます。
制約追加時に以下の画面の赤枠の部分をクリックすると
スクリーンショット 2014-04-15 17.23.18

選択肢が表示されます。ので「Items of New Constraints」を選択し、制約を追加すると、制約の追加後に「update Frames」を行ってくれます。
スクリーンショット 2014-04-15 17.24.16

最後に、Document OutlineのConstraints配下に「Center Y Alignment – View – Button – Button」が追加されていることを確認してください。
スクリーンショット 2014-04-14 16.05.14

制約が追加される毎に、この様に対応するノードが追加されます。
このノードを選択後に「Del」ボタンを押すと制約を削除できます。

3つのコンポーネントを選択して制約を追加した場合は、
このノードが2つ追加されます。
(例えばボタンAとボタンBの制約とボタンBとボタンCの制約)

制約の優先順位

制約には優先順位があって、全ての制約が指定した通りに適用されるわけではないです。
詳細は他のエントリーで取り扱わせていただきますが、制約と言っても結局ルールですので
利用時に注意が必要であると記載したかっただけです。

制約において左右を表す方法

2種類あって、デフォルトは「Leading to Trailing」です。

  • Leading to Trailing
  • Left to Right

他言語対応を行う場合に、文字が右からはじまる言語への対応を行う必要があることがあります。
こんな場合に「Leading to Trailing」を制約に利用しておくと自動的に左右が逆転してくれ、ローカライズが楽になります。
デフォルトを「Left to Right」から変更する方法が分かりません。分かり次第更新しておきます。

うまく表現できているか不明ですが、
右が文頭のアラビア語だと右のボタンの位置に、
左が文頭の日本語だと左のボタンの位置に
自動的になるとのイメージです。
スクリーンショット 2014-04-14 17.55.25

2 Xcode5で制約を設定する方法(Align:アライメント)

制約を設定する時に利用するボタン名は以下の通りです。
スクリーンショット 2014-04-14 19.34.45

Alignでの設定項目

Alignで設定する制約は、
複数コンポーネントのX座標を会わせる。
親コンポーネントの高さの真ん中に任意のコンポーネントを会わせる。
等の調整系の物となります。

設定画面

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

なお、各制約を設定(チェック)した時に指定可能な値は、制約適応後の各コンポーネントの位置関係を指定できます。
「Leading Edges」の場合は垂直方向に指定した値分だけコンポーネントの先頭がずれて整列します。
特に「Use Current Canvas Value」を指定した場合は全てのコンポーネントの現時点での位置関係分だけ先頭がずれて整列します。
スクリーンショット 2014-04-14 20.44.18

・Buttonが3つが以下の様にならんでいる時に
Button1:(90,125)、Button2:(130,160)、Button3:(110,190)
スクリーンショット 2014-04-14 21.19.20

3つのボタンを対象に「Leading Edges」で「Use Current Canvas Value」
を指定して制約を追加後に「Update Frames」を行った時の各ボタンの位置は以下の様になりました。
スクリーンショット 2014-04-14 21.22.34

各ボタンの座標は、Button1:(8,38)、Button2:(58,26)、Button3:(28,52)
とX座標の位置関係は、Canvasの値が反映されています。

もう1つ発見なのですが、「Update Frames」処理は、やはり水平方向の位置関係だけの制約で、
「Update Frames」を実行するたびにY座標は毎回変わるんですね。まあY方向の制約はなんもないもんなー。

Alignで設定できる制約の項目説明

制約名 指定可能条件 説明
Leading Edges 複数コンポーネント選択時 水平位置(文頭)を揃える制約
Trailing Edges 複数コンポーネント選択時 水平位置(文末)を揃える制約
Top Edges 複数コンポーネント選択時 垂直位置(Top)を揃える制約
Bottom Edges 複数コンポーネント選択時 垂直位置(コンポーネントのBottom)を揃える制約
Horizontal Centers 複数コンポーネント選択時 複数のコンポーネントの水平方向の中心位置を揃える制約
Vertical Centers 複数コンポーネント選択時 複数のコンポーネントの垂直方向の中心位置を揃える制約
Baselines 複数コンポーネント選択時 各コンポーネントが横並びで配置された時に奇麗に見えるようにBaselineをそろえる制約
Horizontal Center in Container コンポーネント選択時(複数も可) 親コンテナの横の中心(水平方向の中心位置)と選択コンポーネントの横の中心をそろえる制約
Vertical Center in Container コンポーネント選択時(複数も可) 親コンテナの縦の中心(垂直方向の中心位置)と選択コンポーネントの縦の中心をそろえる制約

 

Alignで設定できる制約(「Horizontal Center in Container」、「Vertical Center in Container」以外)をまとめた図は以下の通りです。
表形式で見るよりこちらの方が分かりやすいと思います。
スクリーンショット 2014-04-15 17.55.48

もう1つ確認していただきたい部分があります。「Baselines」は3つのコンポーネントに対して制約を追加しています。
「「Auto Layout」を理解するための基礎知識」でも説明させていただきましたが、
この場合、Baselinesの制約が2つ存在しているはずです。

画面を見ると、やはり「Baselines」の制約が2つありました。
スクリーンショット 2014-04-16 16.23.40

Alignで設定できる制約(「Horizontal Center in Container」と「Vertical Center in Container」)の説明が残っています。
元々Viewの小要素としてViewを配置し、その小要素に各種コンポーネントを追加していました。
「Horizontal Center in Container」はコンポーネントとその親コンテナの水平方向の中心位置を揃え、
「Vertical Center in Container」はコンポーネントとその親コンテナの垂直方向の中心位置を揃えます。

とっても分かりやすい制約なので、制約を2つ追加した時の例として、
この小要素のViewに両方(「Horizontal Center in Container」と「Vertical Center in Container」)の制約を追加後、
Viewを選択した状態が以下の画面となります。
スクリーンショット 2014-04-15 17.59.52

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

「Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]」も是非ご覧ください。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcode5でSchemeを利用する。[後編]

「Xcode5でSchemeを利用する。」の続きの「Xcode5でSchemeを利用する。[後編]」

記事を読む

Xcode5で画面コンポーネント(UIコンポーネント)配置して利用するための基本

iOSアプリケーションは当然ですが、画面がありますよね。 言わずもがなですが、iOS向けのアプ

記事を読む

iOS(Xcode6)におけるマルチスレッド処理の実装方法[iOSのマルチスレッド処理の概要]

iOSにおけるマルチスレッド処理の実装方法を数回に分けて説明させていただきます。 開発環境のXco

記事を読む

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

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 ↑