今やiOSもさまざまな端末のサイズがあり今後も増えるかもしれません。Interface Builderもそれに対応してSize Classesという概念が導入されました。

Compact、Regularという表現でサイズを抽象化

Size Classesとは端末のサイズを抽象化したものです。縦横サイズをCompact、Regularの組み合わせで表現します。

以下、AppleのDocumentより引用し説明します。

iPadの場合

縦画面(Portrait)、横画面(Landscape)どちらも幅、高さ共にRegularとなります。

sizeclasses-ipad
画像引用元: Adaptivity and Layout

iPhone 6 Plusの場合

縦画面は幅Compact、高さRegular。横画面は幅Regular、高さCompact。

sizeclasses-iphone6
画像引用元: Adaptivity and Layout

その他、iPhoneの場合

縦画面は幅Compact、高さRegular。横画面は幅Compact、高さCompact。

sizeclasses-iphone
画像引用元: Adaptivity and Layout

iPad/iPhone 6の組み合わせは理解しやすいですが、iPhoneの横だけ両方Compactになるのは難があるかもしれません。

Interface BuilderでSize Classごとの表示を確認する

ViewControllerが配置されたStoryboardを開きましょう。下の方にデフォルト状態では以下の様に表示されているはずです。

anyany

 

タップすると以下のようにサイズ選択のポップアップが表示されます。

img001

 

このように選択すると幅Compact、高さAnyになります。

img02

 

選択後はViewControllerの表示もそれに合わせた縦長の形になります。

img06-1

 

複数端末対応を前提とすると、View配置は以下のパターンが考えられます。

  • どんな端末サイズであれ表示しConstraintも同じ
  • 特定の幅、高さサイズの組み合わせによって表示したりConstraintを変更する

どんな端末サイズであれというのがAnyに相当します。幅と高さの組み合わせは、w:Any x h:Any、w:Compact x h:Regular、w:Regular x h:Compact、w:Any x h:Compactなど様々な組み合わせが考えられます。さきほど説明したように下の方にあるw:Any x h:Any(デフォルト)ボタンを押して、サイズの組み合わせを変えることで、配置したViewがどのように表示されるか確認できます。

次の記事では、w:Regular x h:Regular(iPad)のときのみ表示、もしくはマージンを大きめ取るといった、特定のサイズで表示したりConstraintを変更する方法を説明します。