hiramatch's blog

iOSアプリ開発に目覚め、毎日勉強の日々です。

SizeクラスでiPhoneの縦横別でレイアウトの異なる画面を作る

今回はXcodeのSizeクラスでiPhoneの縦横別でレイアウトが異なる画面を作ってみました。
SizeクラスとはXcodeの機能で画面サイズ、画面の縦横別に画面のデザインを対応できるもので以下の画面のチェックボックスをONになっていると利用可能です(デフォルトはON)
f:id:hiramatch:20150307130749p:plain

まずは共通のレイアウト(Any Width Any Height)になります。
f:id:hiramatch:20150307124910p:plain

ここでは画像をAutoLayoutで画面中央に表示させる制約を追加しています。
f:id:hiramatch:20150307125148p:plain


次はiPhone横向きのレイアウト(Any Width Compact Height)です。
f:id:hiramatch:20150307125354p:plain

画面横向き時、画像を画面右下に表示させる制約を追加し、更に画面横向き時のみ表示させるラベルを追加しています。
f:id:hiramatch:20150307125557p:plain

以下はプレビューです。
iPhoneの縦向き,横向きでレイアウトが異なることを確認しました。
f:id:hiramatch:20150307125808p:plain