前回のつづき。

特定のSize ClassごとにConstraintを設定する方法も、前回のViewの表示・非表示とほとんど変わりません。

説明の前に

前回書いたのと同じ内容ですが、この記事から見始めた人のためにもう一度書きます。

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

imgg001

 

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

imgg05

 

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

imgg001-1

特定のSize ClassでConstraintを変更する

  • 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

Size Class選択ボタンからサイズの組み合わせを変えてみましょう。w:Compact h:Compact、w:Regular h:Regularなど、どの組み合わせであれ、左上のマージンは同じで表示されるはずです。

※ Constrain to marginをチェックしてConstraintを追加したので、Constraintのマージン値は0pxですが実際は16pxの間隔が空いています。

これをw:Regular h:Regular(iPad)のときのみ左上32pxマージンとなるように変更してみましょう。

Label上のConstraintを選択します。

img001

Size Inspectorを選択すると、Constraintという項目と左側にプラスボタンがあるのを確認できるはずです。

プラスボタンを押して、Regular Width > Regular Heightを選択します。

img03

w:Regular h:RegularのConstraintが追加されるので、値を16にします。Constrain to marginをチェックしているので16pxのマージンは自動でつくので、実際のマージンは32pxになります。

img05

Size Class選択ボタンからw:Regular h:Regularを選択すると、Labelの上端のマージンが変わるのがわかるはずです。他のサイズの組み合わせでは従来通りのマージンのはずです。

img11

特性のサイズでConstraintそのものを切り替えたい場合

以下の様なことを実現しようとします。

  • TextFieldを配置する
  • w:Regular h:Regularの時は幅300pxで水平方向中心に配置されるようにConstraintを設定する
  • それ以外のサイズの時は左右マージン16pxで可能な限り幅を広く表示する

w:Regular h:Regularの時。

img13

それ以外の時。

img12

まずはSize Class選択ボタンでw:Any h:Anyを選択します。

imgg001

TextFieldを上端に配置し、青線のガイドに従って幅を広げます。

img15

Constraintを以下のように設定します。

img17

全ての画面サイズで左右上マージン固定、幅は伸縮するように動作するConstraintが設定されました。

img12

TextField左右のマージン固定となるConstraintはRegularでは適用されないようにする必要があります。左のConstraintを選択してください。

img18

Size InspectorでInstalledチェックボックスと左側にプラスボタンがあるのを確認して下さい。

img21

プラスボタンを押してRegular Width > Regular Heightを選択します。

img03

w:Regular h:RegularのInstalledが追加されるのでチェックを外します。これでRegularの時、このConstraintは無効になります。

img22

TextField右のConstraintを選択してください。

img20

Size Inspectorで、先程と同様にプラスボタン > Regular Width > Regular Heightを選択して、Installedを追加したら、そのチェックを外します。

img24

これでw:Regular h:Regularでの左右のConstraintが無効になりました。

次に水平方向中心配置のConstraintを設定します。

img27

Size InspectorのInstalledの左にあるプラスボタンを押し、Regular Width > Regular Heightを選択。Installedを追加します。

img28

このConstraintはw:Regular h:Regularのときのみ有効にしたいので、デフォルトのInstalledのチェックを外します。

img29

次に幅300px固定のConstraintを追加します。TextFieldを選択してPinボタンを押して以下のようにConstraintを設定します。

img30

View上のConstraintが不整合により赤く表示されると思いますが無視して下さい。

次にこのConstraintのSize Inspectorを開き、Installedチェック左のプラスボタンからRegular Width > Regular Heightを選択します。そしてデフォルトのInstalledのチェックを外します。

img29

この時点で先ほどのConstraintが赤い表示はなくなるはずです。

Size Class選択ボタンでw:Regular h:Regularを選択してください。以下のように表示されるはずです。

img32

TextFieldがおかしくなってますね。ただConstraintの設定は正しくされています。View上の見栄えを調整すればよいだけです。

TextFieldを選択して、Resolve Auto Layout IssuesボタンからUpdate Framesを選択します。

img25

以下のように意図した表示になるはずです。

img13

これで完了です。Size Class選択ボタンでサイズの組み合わせを色々変更してみてください。w:Regular h:RegularのみTextFieldが幅固定の水平方向中心表示になっているはずです。SimulatorでiPadやiPhone 5などで起動して試してみるのもよいでしょう。