前回はSize Classesについて説明しました。

Interface Builder(以下、IB)上で、特定のSize ClassでのみViewを表示したり、Constraintを変更したりできます。これによりプログラムを書かなくても、複数端末で表示状態を変更することができます。

説明の前に

Storyboardの下部にあるボタンをSize Class選択ボタンと呼ぶことにします。

imgg001

 

各種Auto Layout関係のボタンは以下のように呼ぶことにします。

imgg05

 

右サイドのViewの各種設定を行うボタンを以下のように呼ぶことにします。

imgg001-1

特定のSize Classでのみ表示する

  • ViewControllerが配置されたStoryboardを開きます。
  • 画面下部の表示中のSize Class選択ボタンをw:Any h:Anyにします。

ここで注意すべきなのは、w:Any h:Any以外の状態でViewを配置すると、そのSize Classの組み合わせでのみ表示するものとして配置されてしまいます。それはそれで便利ですが、今は基礎から理解するためにw:Any h:Anyで始めてください。

Labelを青線のガイドにしたがって、Viewの左上(StatusBar下)に配置します。

imgg04

Constraintを以下のように設定し、左上に固定するようにします。

imgg07

同様に右下にLabelを配置します。

imgg08

Constraintを以下のように配置し、右下に固定するようにします。

imgg09

Size Class変更ボタンを押して、w:Compact h:Regular、w:Regular h:Regularなどサイズの組み合わせを切り替えてみてください。どのサイズであれ2つのLabelが左上、右下に固定されて表示されるのを確認できるはずです。これが意味するところは全ての端末サイズで2つのLabelが同じように表示されるということです。

では、w:Compact h:Compactのときは右下のLabelを表示しないようにしてみましょう。

右下のLabelを選択した状態で、Attributes Inspectorボタンを押し、Viewセクションの下の方にInstalledというチェックボタンと、その左にプラスボタンがあるのを確認してください。

imgg10

プラスボタンを押してポップアップからCompact Width > Compact Heightを選択してください。

imgg11

以下のようにw:C h:C(幅Compact、高さCompactの意味)でInstalledが追加されました。

imgg12

Installedにチェックが入っているので、これを外します。

imgg14

Class Size選択ボタンでw:Compact h:Compactにしてみましょう。右下のLabelが非表示になるはずです。w:Compact h:Compact以外の組み合わせでは表示されるはずです。

imgg15

次にw:Compact h:Regularの組み合わせでも非表示となるようにしてみます。またプラスボタンを押して、今度はCompact Width > Regular Heightを選択肢て下さい。

imgg16

w:C h:R(幅Compact、高さRegularの意味)でInstalledが追加されるので、チェックをオフにします。

imgg17

Size Class選択ボタンでw:Compact h:Regularにすると、右下のLabelが非表示になるはずです。

imgg18

ちなみにこの場合は幅がCompactの時は高さが何であれ表示しないという意図なので、Installedは1つ追加するだけで同様のことができます。

バツボタンを押して追加した2つのInstalledを削除します。

imgg20

プラスボタンを押して今度はCompact Width > Any Heightを選択し、Installedのチェックを外します。

imgg22

これで幅Compactで高さが何であれ表示しないという設定になります。実際にSize Class選択ボタンでサイズを変更してそれが確認できるはずです。

補足ですが、幅がRegularの時のみ(高さはなんでも良い)Viewを表示したい場合は、以下のようにします。

img23

  • デフォルトのInstalledをオフにする。
  • w:Regular h:AnyのInstalledを追加してオンにする。

まとめ

  • 特定の端末サイズでViewを表示・非表示にするには、そのサイズのInstalledを追加しチェックを入れる、もしくは外す。
  • Size Classes選択ボタンでサイズを変更することで、実際の表示をIB上で確認できる。

次回は端末サイズによってConstraintを変更する方法を説明します。