読者です 読者をやめる 読者になる 読者になる

使って創ってApp

ソフトウェアを使ったり作ったりするブログです

Constraintsで柔軟なレイアウトを作成する

iOSデバイスの向きや大きさが変わっても、レイアウトが大きく崩れないアプリを作りましょう。そのために、StoryboardでConstraintsを設定します。

Constraintsの設定をしないと?

ディスプレイサイズ iPhone 4.7-inch のビューにラベルを一つ置きました。ビューの水平方向中央に置いてあります。

f:id:hitxutokun:20151207125145p:plain

ラベルを中央に配置

これを iPhone 6s Plus のシミューレータで起動します。

f:id:hitxutokun:20151207130450p:plain

iPhone 6s Plus シミューレータ 縦向き

ラベルの位置が少し左にずれてしまいました。また、横向きにすると

f:id:hitxutokun:20151207131122p:plain

iPhone 6s Plus シミューレータ 横向き

中央から大きく外れて、左に寄ってしまいました。

Constraintsを設定

ではこのラベルを、常に画面水平方向中央に表示させるようにしましょう。それはラベルに Constraints を設定することで実現できます。

Constraintsは Storyboard 上で設定します。Storyboard 画面右下の4つのボタンのうち、主に中央2つを使います。

f:id:hitxutokun:20151207132403p:plain

Constraints 設定ボタン

 順を追って設定しましょう。

  1. ラベルを選択
  2. 右から2番目を選択して、下画像のようにチェックを入れる

    f:id:hitxutokun:20151207140412p:plain

  3. Add 3 Constraints をクリック

     

  4. 左から2番目を選択して、下画像のようにチェックを入れる

    f:id:hitxutokun:20151207140850p:plain

  5. Add 1 Constraints をクリック

以上で完了です!

ラベルに設定した内容は以下の3つです。

  • 高さと幅を固定
  • 一番上のビューとの間隔を固定
  • 水平方向中央に固定

 

それではシミュレーターを起動して確認してみましょう。今度はラベルが常に水平方向中央に表示されていますね。

f:id:hitxutokun:20151207141652p:plain

Phone 6s Plus シミューレータ 縦向き

f:id:hitxutokun:20151207141706p:plain

Phone 6s Plus シミューレータ 横向き

ところで3の時に、ラベルの周りに赤い線が表示されているのに気付きましたか?

f:id:hitxutokun:20151207142825p:plain

この表示は、「この Constraints の設定だと、表示が崩れる場合があるよ」の警告です。この表示がなくなるように Constraints を上手に設定しましょう。

まとめ

Constraints を UI部品に設定することで、レイアウト崩れを防ぐことができるようになります。UI部品を選択してから、 Storyboard 画面右下のボタンで設定します。