Size class 20150521

【朝活】 iOS開発会議 in beez渋谷 17回目

2015年5月21日 佐藤剛士

自己紹介【名前】 佐藤剛士

【肩書】 コンセプトづくりから相談できるフリーエンジニア。

【お仕事】 昨年10月に独立。 前は受託IT企業でインフラの保守運用業務 今は知り合いのスタートアップのお手伝い。

【できること】 ruby,iOS,apatch,linux(サーバー周り）

【今年の目標。】 iOSのアプリを定期リリース。今年こそ作る( ・ω・)

こうだったのか！Size Class

Size Classとは• XCode5まではiPhone, iPad両方に対応するにはStoryboardを2つ用意する必要があった。

• XCode6ではSize Classが導入され、1つのStoryboardで複数のデバイス・デバイスの向きに対応できるようになった

• iPhone,iPadのサイズを「Compact」「Regular」「Any(Compact,Regularどちらでも)」にわけて、AutoLayoutを指定できる

Size Class Portrait(縦)の対応表

Portrait Width

Portrait Height

iPhone4s iPhone5/5s iPhone6

Compact Regular

iPhone6 plus Compact Regular

iPad Regular Regular

iPhoneは幅がCompactで高さがRegular iPadは幅も高さもRegular

Size Class Landscape(横)の対応表

Landscape Width

Landscape Height

iPhone4s iPhone5/5s iPhone6

Compact Compact

iPhone6 plus Regular Compact

iPad Regular Regular

iPhone4s-6は幅がCompactで高さがCompact iPhone6 plusは幅がRegularで高さがCompact iPadは幅も高さもRegular

設定してみる

Size Class Portrait プレビュー

Size Class Portrait プレビュー【iPhone緑のViewの制約】 高さ200 右：-16 上：0 左：-16

【iPhoneボタン1の制約】 高さ80 幅：80 上：30 左：30 LabelFontサイズ：15

Size Class Portrait プレビュー【iPad緑のViewの制約】 高さ:300 右：-16 上：0 左：-16

【iPadボタン1の制約】 高さ:120 幅：120 上：30 左：30

LabelFontサイズ：24iPadのみのラベルを表示

Size Class Landscape プレビュー

Size Class Landscape プレビュー

iPhoneはUIの配置を変える

Size Class Landscape プレビュー

iPadはそのまま

各Size Classの指定方法

AutoLayoutを指定する

wAny hAnyをクリックして指定したいサイズクラスにする (ここではRegular width , Regular Heightにする）

AutoLayoutを指定する

1.変更したい制約を選択する 2.左の「+」ボタンをクリック 3.ポップアップの「Regular Width | Regular Height(current)を選択 4.「wR hR」に新しい制約を入れる

ボタンのフォントを指定する

1.変更したいボタンを選択 2.アトリビュートインスペクターでFontの左「+」を選択 3.wR hRを選択してFontサイズを指定

特定のサイズクラスのみ表示するラベルを追加

1.ライブラリからラベルをはりつける 2.アトリビュートインスペクターからwR hR のinstalledにチェックを入れる

サンプルコードURLhttps://github.com/SatoTakeshiX/AutoLayoutSample/tree/master/2-Size_Classes_Sample

参考URL小学生でも分かった気になるiOS8のSize classhttp://www.slideshare.net/YoshinoriImajo/ios8size-class

Size Classについて調べた http://qiita.com/pirosikick/items/665a212d9cf1d6b3991b

Xcode 6 時代のマルチデバイス対応 ～Size Classとベクター画像～ http://qiita.com/shu223/items/b4fad50a35183fbda3af