AutoLayoutSizeの学習に必要なサイトと、まとめメモ

xcode6でのUniversalアプリ開発にて、

iPhoneiPadの全画面サイズに適合させるためAutoLayoutを使おうとするのですが、

なかなか理解できなかったので、

自分なりのメモと、まとめサイトを整理したので備忘として登録。

(今後も改訂していく予定です。) 


①まずは、動画で言われたとおりにやる
(ドットインストールの「iPhoneアプリ開発入門」)

iPhoneアプリ開発入門 (全13回) - プログラミングならドットインストール
→ まずはなんとなくでもいいので、AutoLayout等に関して動画通りやってみる

②AutoLayoutに関する解説を読む
 ※ここは熟読することをおすすめします
◯以下3つは文法学習てきなもの

Auto Layout 入門 #1 – 基礎知識編
Auto Layout 入門 #2 – Interface Builder 編
Auto Layout 入門 #3 – 制約編

◯以下3つは文法学習に対する、練習問題のようなもの

Auto Layout 入門 #4 – 基本操作編
Auto Layout 入門 #5 – 実践編
Auto Layout 入門 #6 – 補足編

③さらに学習されたい方。

Autolayout に対応した画面で UIScrollView を使う時のコツ
→ UIScrollViewを絡めた学習

Xcode5のAuto Layout動作検証 - Add Missing Constraints


→ AddMissing Vonstraintsに関して

■ポイント
・Constrains(制約)は、
 【「自分View」と「親View」】・【「自分View」と「自分と同じ階層のview」()】に関する関係性を設定している

Auto Layout 入門 #2 – Interface Builder 編


・作成手順は、
 ②で学んだことをベースに自分で制約を追加
 → Add Missing Constraintsを使用して足りないものを追加してもらう
 → xcode6のPreview機能を利用し、各端末での表示内容をチェックして細かい部分の調整 (プレビューは必ずちゃんとうつるわけではないので、シミュレータor実機で必ず確認するべき)

 

 


こうして一つ一つ制約を見て行くと数が多くて覚えるのが大変だと感じるかと思います。しかし、メニューの項目ではなく、実際に適用されている制約に注目してみると、以下の4種類に分類できます。

アライメントに関する制約(7種類)

Leading(Left or Right) Alignment
Trailing(Right or Left) Alignment
Center X Alignment
Top Alignment
Bottom Alignment
Center Y Alignment
Baseline Alignment
相対位置に関する制約(2種類)

Horizontal Space
Vertical Space
サイズに関する制約(2種類)

Width
Height
サイズの連動に関する制約(2種類)

Equal Widths
Equal Heights
これらの制約の分類と、制約の適用対象のバリエーションの組み合わせを抑えると制約の種類を把握しやすいかと思います。制約の適用対象のバリエーションは以下の3種類です。

親ビューとその子コンポーネント
兄弟コンポーネント同士
対象コンポーネントのみ

 

(追記:2014/10/16)

写真の表示モードでハマってしまいました。

とりあえず、写真はAspectFitモードにしておくことをおすすめします。

理由はまた別の機会にでも。