BLOG

2015年1月18日/ AutoLayout, Constraints, StoryBoard

[iOS] StoryBoardでAutoLayoutを使ってViewコンポーネントのサイズを比率指定する方法

こんにちは。最近はもっぱらアプリ開発に没頭している佐々木です。
開発はコード書いたりしている時は何気に楽しかったりもするんですが、リリースまで漕ぎ着けるのは大変ですよね・・・

 

特に最近ではiOSでもデバイスの種類が増えてきたので、以前に比べて品質保障が難しくなってきました。

 

私はiOSアプリを開発する時、iPhone6が発売される以前はStoryBoardを使わずにすべてコードでレイアウトも作っていたのですが、”iPhone6” や “iPhone6 Plus” が発売されてからというもの、メンテナンス性も考えて使用言語をObjective-CからSwiftに変えたり、レイアウトにはStoryBoardを使うようにシフトしています。

今回はその中でもAutoLayoutのサイズ指定(比率:%)のテクニックについてご紹介したいと思います。

 

目次

  • StoryBoardでは比率(%)指定ができない!?
  • おさらい:UIViewの等間隔(50%)指定
  • 比率指定するにはダミーViewを配置します
  • おわりに

 

StoryBoardでは比率(%)指定ができない!?

StoryBoardでは、UIViewやUIImageViewなどUIコンポーネントのサイズを指定するには幅や高さなどConstraintsでポイント指定できます。
ですが、比率(%)指定のUIがないので、以前はそもそもStoryBoardでは比率(%)指定が出来ず、コードでカスタマイズしないといけないと思っていました。

 

書籍なども詳しく書いてあるものを見かけたことがなかったので、StoryBoardでは実現できないと勝手に理解していた時期もあったのですが、実は簡単に指定できるんです!

 

autolayout_01

上記はUIView3:7で上下に配置してプレビューで表示させたものです。
基本的な指定方法が分かればあとは応用で対処できるので、上記のような簡単なUIの作り方を解説したいと思います。

 

おさらい:UIViewの等間隔(50%)指定

autolayout_02

まずは等間隔にコンポーネントを設置する方法をおさらいです。
上のキャプチャーは2つのUIView(BlueView・RedView)をただ並べたもの。

 

autolayout_03

上記のようにBlueView・RedViewそれぞれにConstraintsを設定します。

 

autolayout_05

あとは、二つのViewを同時選択して”Equal Heights“を指定することで高さが同じ2つのViewが出来上がります。

 

autolayout_06
要するにこんな感じで等間隔(50%)で設定できていることがわかると思います。

 

autolayout_07
プレビューで見ても正常に等間隔で表示されていますね!

 

比率指定するにはダミーViewを配置します

等間隔でViewを配置する方法をおさらいしたところで、ここからが本題。

 

比率でViewを配置するためには画面一杯のダミーViewを作って、そのダミーViewに対して比率を指定していく流れになります。
その比率の指定は先ほど設定した “Equal Heights” を使うので、おさらいをご紹介しました。

 

autolayout_08
まずは、ダミーViewを設置し設定を行います。
(わかりやすく色を緑色、Viewの名前を”VerticalDummyView”にしました)

 

autolayout_09
ダミーViewには上記のようにConstraintsを設定します。
Widthを”0“にしているのに注目してください。
これが”ダミー”とする所以です。

 

autolayout_10
ダミーViewを設置してFrameを更新したところ。
左端に画面一杯で張り付いているのがわかるかと思います。

 

autolayout_11
今度は冒頭で見せた比率(3:7)のうち、上部の30%の高さのViewを作っていきます。
一旦適当にView(PinkViewとしました)を配置します。

 

autolayout_12
上記のようにPinkViewにConstraintsを設定します。

 

autolayout_13
次に”PinkView”と”VerticalDummyView”を複数選択し、Constraintsに”Equal Heights“を設定します。

 

autolayout_14
Equal Heights“を設定した直後の状態です。
Frameをアップデートしていませんが、PinkViewのHeightが画面の高さ一杯になっているのがわかるかと思います。

 

このままではまずいので、PinkViewに”30%”という比率を設定します。
StoryBoardのエクスプローラーからConstraintsの”Equal Heights”を選択します。

 

autolayout_15
Equal Heights“の”Attribute Inspector“にて”Multiplier“という設定があるので、これに”0.3“を設定してください。
この0.3が”VerticalDummyView”の高さに対する”PinkView”の比率になります。

 

※ この時、”First Item“に”PinkView”が選択されていることに注意してください。逆だとおかしくなります。

 

autolayout_16
Equal Heights“を0.3に設定してFrameをアップデートしたものがこちら。

 

autolayout_17
プレビューで見ても正常に30%の高さでPinkViewが表示されています。

 

autolayout_18
あとはPinkViewと同じです。
適当にView(BlueView)を配置します。

 

autolayout_19
BlueViewに対してConstraintsを設定します。

 

autolayout_21
Constraintsを設定した直後のものがこちら。
Frameはアップデートしていません。

 

autolayout_22
あとは、”VerticalDummyView”との”Equal Heights”の”Multipier“を”0.7“に設定します。

 

autolayout_23
Frameをアップデートしたものがこちら。
BlueViewのHeightが画面高さに対して70%になったのがわかると思います。

 

おわりに

いかがでしたでしょうか?

StoryBoardよりコードで書いた方が早いし簡単だと思っていましたが、AutoLayoutもかなり進化していて、上記のテクニックを使えば概ねどんなレイアウトでも組めると思います。
メンテナンス性も考えて、今コードでレイアウトしている方も今後はStoryBoardを検討してみてはいかがでしょうか?

 

Resent Posts

Category