size class 20150521
TRANSCRIPT
【朝活】 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