*

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]

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


スポンサードリンク



「基礎知識と制約(Align:アライメント)の設定方法」
[制約(Pin:固定幅設定)の設定方法]
で「Auto Layout」機能の利用方法の基本的な部分を説明させていただきましたが、
上記の2エントリーでは、Xcodeで「Auto Layout」の制約の追加を行うための、画面利用方法をメインにフォーカスしておりました。

本エントリーでは、簡単な画面を実際に構成する過程を通じて
「Auto Layout」機能の実際的な利用方法を説明をさせていただきます。

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

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

  1. 構成する画面レイアウトの説明をする。
  2. 簡単な画面レイアウトを制約の新規追加だけで実際に作成する。

 

1 構成する画面レイアウトの説明をする。

構成したいレイアウトの概要

構成したいレイアウトは以下のようなものです。マージン(余白)は適当に固定値を設定するつもりです。
スクリーンショット 2014-04-29 12.23.08

見にくいですね、もっと全体的にマージン(余白)大きくすれば良かった・・・
残念!、でもこれでいかせてください。

このレイアウトの趣旨の一つ目

このレイアウトの趣旨の一つ目は、View5とView7の高さが動的に決まることです。
理由は以下の4点から説明できます。

  • Y軸上にView5、View1、View7が並んでいる。
  • View5、View1、View7とルートViweの余白が固定値で設定されている。
  • View1の高さを固定で設定されている。
  • Center Y Alignment – View – View1でView1のY座標の中心とViewのY座標の中心が一致する。

スクリーンショット 2014-04-29 13.35.46

このレイアウトの趣旨の二つ目

View3、4、5の横幅とView6、7の横幅も動的に決まることです。
考え方は「このレイアウトの趣旨の一つ目」とほぼ同じなので細かい説明は省略いたします。

2 簡単な画面レイアウトを制約の新規追加だけで実際に作成する。

繰り返しとなりますが、以下のような画面レイアウトを作成してみます。全てのコンポーネントはViewとなります。
スクリーンショット 2014-04-28 15.17.51

ざっくりと全Viewを配置しリサイズする

まずは、全てのViewを配置し、Viewを選択し目標の画面に近い形にリサイズします。
背景色の変更も行ってください。

ルートViewの背景色の変更

以下の画像の要領で背景色を変更してください。
スクリーンショット 2014-04-28 15.29.47

各Viewの追加とリサイズ

各Viewの追加とリサイズと背景色(必要なViewのみ)の変更を行ってください。
Viewの追加は以下の画像のような操作を行えばできます。
スクリーンショット 2014-04-28 15.37.43

iPhone Retina 4インチでのシュミレーターで実行した画面が以下の様になりました。
サイズはアバウトにこんな感じであればOKです。どうせ後で制約を設定しますので、
色はお好みな味付けで・・・
スクリーンショット 2014-04-28 15.45.53

各Viewの名前変更

Document Outlineで全てのViewが同じ名前で表示されると今後の説明が
困難となりますので、名前を変更してください。
変更後の名前は以下の値でお願いいたします。
スクリーンショット 2014-04-28 16.00.25

名前の変更は、Document Outline上で対象Viewを選択後、マウスの右クリックを行うと以下の様になりますので
変更後の名前を入力するだけです。
スクリーンショット 2014-04-28 16.03.50

変更後のDocument Outlineは以下の様に表示されているはずです。
スクリーンショット 2014-04-28 16.06.39

「Auto Layout」の制約を追加する。

実際に「Auto Layout」を利用して各Viewを配置していきます。

制約の追加手順の概要は記載いたしますが、操作方法の詳細につきましては
「基礎知識と制約(Align:アライメント)の設定方法」
[制約(Pin:固定幅設定)の設定方法]
をご参照ください。
今回は、真ん中のView1を基準にレイアウトを構成いこうと思います。

View1の制約追加

・View1を画面の真ん中に配置するための制約を追加します。
「Horizontal Center in Container」
「Vertical Center in Container」
スクリーンショット 2014-04-28 16.30.16

・View1の左マージン、右マージン制約を追加します。
ルートのViewとの左右のマージン(間隔)を設定します。値は左右とも10としています。
スクリーンショット 2014-04-28 17.57.50

・View1の上マージン、下マージン制約を追加します。
上下に隣接するViewとの上下のマージン(間隔)を設定します。値は上下とも8としています。
スクリーンショット 2014-04-28 18.12.56

これでView1の設定は完了です。この時点でDocument Outlineは以下のようになりました。
スクリーンショット 2014-04-28 18.18.28

もう既にお気づきの方もいるかも知れませんが、View1の設定には不備があります。
この様に制約に問題が存在する時には、Document Outlineの右上にアイコンが表示されます。
スクリーンショット 2014-04-28 18.18.28

このアイコンをクリックすると制約に関する全ての問題が一覧表示されます。
スクリーンショット 2014-04-28 18.42.08

赤いアイコンが表示されているのがエラーで、黄色が表示されているのがワーニングです。
とりあえずView1のエラー情報にフォーカスしてみます。見にくいので拡大しました。
スクリーンショット 2014-04-28 18.48.35

制約がコンフリクトしているようです。
「Horizontal Center in Container」で設定した制約
「Center X Alignment – View – View1」

「Vertical Space – (8) – View1 – View5」
「Vertical Space – (8) – View7 – View1」
と不整合になるとのエラーのようです。

確かに、間隔の指定をすれば、水平方向での位置は確定するし、
水平方向の中心に配置すると指定すれば、水平方向での位置は確定します。

たしかに、この2つの水平方向位置は同じになる可能性もありますが、たまたま同じになるだけで
明らかに片方だけで問題ありませんので、
「Center X Alignment – View – View1」
をDocument Outlineで選択して「Del」ボタンを押して削除します。
これでView1に対するエラーは無くなりました。

ちなみにですが、
「Vertical Space – (8) – View1 – View5」
「Vertical Space – (8) – View7 – View1」
の方を削除した場合は、View1に対して新たなエラーが発生します。どうなるか想像してみてください。

View1-1の制約追加

このViewはView1の中心に配置します。
View1との水平方向と垂直方向の余白に10を設定します。
スクリーンショット 2014-04-28 19.30.09

View3、View4、View5の制約追加

この3Viewは左右マージンと上マージンを指定し、高さと幅も同じ設定にします。
高さは「Vertical Space – (8) – View1 – View5」と追加する上マージンによって自動的に決定されます。
幅も(ルートViewの幅ー左右のマージン)/3の式で自動的に決定されます。

・3Viewの左右マージンと上マージンの指定
3Viewを同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 19.38.26

・3Viewの高さと幅を同じに設定
こちらも3Viewを同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 19.44.09

View6、View7の制約追加

View1とView6にAlignのLeading Edgesを指定して文頭を合わせる。
View1とView7にAlignのTrailing Edgesを指定して文末を合わせる。
View7の左マージン(対象はView6)20を指定する。
View6とView7の幅を同じ設定する。これによりView6とView7の幅が自動的に決定されます。
View7の下マージン(対象はView)10を指定する。
View6とView7の高さを同じ設定する。これによりView6とView7の高さが自動的に決定されます。

以下を図で示すと以下のようになります。
上の説明のままですが・・・
スクリーンショット 2014-04-28 21.28.23

・View1とView6にAlignのLeadingEdgesを指定
View1とView6を同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 21.10.32

・View1とView7にAlignのTrailing Edgesを指定
View1とView6を同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 21.13.56

・View6とView7の間でView7の左マージンを指定
View7を選択して制約の追加をすると勝手にView6が基準のコンポーネントになります。
スクリーンショット 2014-04-28 21.18.27

・View1とView7の幅を同じに指定
View1とView6を同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 21.37.31

・View7の下マージン(対象はBottom Layout Guide)10を指定する。
View7を選択して制約の追加してください。
スクリーンショット 2014-04-28 21.40.20

・View1とView7の高さを同じに指定
View1とView6を同時に選択し制約の追加を実施してください。
スクリーンショット 2014-04-28 21.46.57

あー、これで全部OK、エラー無くなった!、と思ったらミスってました。
確かにView6のY座標が決まりませんね。
スクリーンショット 2014-04-28 21.55.04

・View6の下マージン(対象はBottom Layout Guide)10を指定する。
View6を選択して制約の追加してください。
スクリーンショット 2014-04-28 21.58.08

View1の高さ制約追加

今度こそ!、と思ったのですが、忘れてました。
基準になる高さを持ったコンポーネントを・・・、
View1に今表示されている値で高さの属性を追加しました。
スクリーンショット 2014-04-28 22.19.48

Update Framesを実行して制約を反映

ついにエラー無くなりました。あとは「Update Frames」を行って実行です。
警告が1つ残っていますが、とりあえず無視で・・・

全てのViewを選択後に以下の画面の赤枠の部分をクリックします。
スクリーンショット 2014-04-29 17.09.17

すると以下のメニューが表示されますので、「Update Frames」をクリックします。
この作業によって、画面に表示されている各コンポーネントのサイズと位置が制約に沿ったものになります。
スクリーンショット 2014-04-29 17.08.53

やっと実行できます。
実行画面はこんな感じになりました。
スクリーンショット 2014-04-29 17.05.33

反時計回りのハードウェア操作をすると以下の画面になりました。
うんうん、思った通りのレイアウトが実現できています。
スクリーンショット 2014-04-29 13.55.48

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcode(Objective-C)のデリゲートとプロトコルの使い方[前編]

Xcode(Xcode5でも同様)でアプリ開発をしていて、少し複雑な事をしようとするとデリゲートと言

記事を読む

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

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

記事を読む

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

Xcode5の「Scheme」の作成方法や使い方のエントリーとなります。 思った以上に内容が多くな

記事を読む

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

Xcode4から導入された「Auto Layout」ですが、使いこなせるようになるのは骨が折れます。

記事を読む

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

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

記事を読む

Xcode5でUnitTest(XCTestフレームワーク)を利用してみる。

Xcode5(iOS7対応バージョンの統合開発)を利用するので、当然言語はObjective-Cです

記事を読む

no image

Xcode5のナビゲーションエリア[問題ナビゲータ]の使い方

Xcode5のナビゲーションエリアの使い方では、アプリ開発に最も不可欠は、プロジェクトとシンボルナビ

記事を読む

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 ↑