Storyboard AutoLayout 第３弾はUIViewを比率で配置する方法です。
比率？ピンときませんか？
例えば、画面サイズ違に関係なくViewを上下4：6で配置したい時ありますよね、その願いを叶える方法です。
今回は３個のViewを配置してみます。
動作環境
Xcode 7.3.1
iOS 9.3.2
UIViewを画面比率で分割配置する
比率を設定する場所を忘れそうですが、Xcode|StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置するとほとんど変わりませんので気楽にいきましょう。
基準となるBase Viewを配置する
比率の基準となるBase Viewを配置していきます。
全体にUIViewを貼り付けます。
Pinを押して上:0、左:0、右:0、下:20と入れてaddを押します。
これでBase Viewの配置が完了しました。
上側のView
上側40%のViewを配置していきます。
上側にViewをそれらしく置きます。
pinを押して上:0、左:0、右:0と入れてAddを押します。
Up View→BASE Viewの順番で複数選択します。複数選択はcommandを押しながら選択です。
pinを押して「Equal Heights」にチェックを入れてAddを押します。
Up Viewを選択します
縦方向の比率を設定していきます。
Size inspector→Equal Height [Edit]→Multiplierに0.4(40%)を入力
最後にUpdate Framesを選択して綺麗に整えば配置完了です。
さあ、次いきましょう！
下側のView
下側60%の領域に左20%右80%の２個のViewを配置します。
左下のView
左下に高さ60%、幅20%のViewを配置していきます。
左下の方にViewをそれらしく配置します。
pinを押して左:0、下:0のスペースを設定してAddを押します。
「Down Left view」→「BASE View」の順番で複数選択します。複数選択はcommandを押しながら選択です。
pinを押して[Equal Widths」と「Equal Heights」にチェックを入れてAddを押します。
Down Left Viewを選択します。
縦方向の比率を設定していきます。
Size inspectorをクリックしてProportional Heightの”Edit”をクリックしMultiplier：0.6(60%)を設定する。
横方向の比率を設定します。
Proportional Widthの”Edit”を押してMultiplierに0.2(20%)を設定します。
最後にUpdate Framesを選択して綺麗に整えば配置完了です。
右下のView
右下に高さ60%、幅80%のViewを配置していきます。
それらしく右下にViewを配置します。
pinを押して右:0、下:0のスペースを設定してAddを押します。
「Down Right view」→「BASE View」の順番で複数選択します。複数選択はcommandを押しながら選択です。
pinを押してEqual WidthtsとEqual Heightsにチェクを入れてAddを押します。
Down Right Viewを選択します。
横方向の比率を設定していきます。
Size inspector をクリックしてEqual WidthのEditを押してMultiplierに0.8()80%を設定します。
縦方向の比率を設定していきます。
Equal HeightのEditを押してMultiplierに0.6(60%)を設定します
最後にUpdate Framesを選択して綺麗に整えば配置完了です。
これで全てのViewの配置が完了しました。
うまくいきましたでしょうか？
完成画面
縦方向
横方向
まとめ
うまくいきましたでしょうか？
AutoLayout凄いでしょう！
比率の値を入れる場所を忘れてしまいそうですがStoryboardが楽しくなる機能ですね。
ぜひ、使ってみてください
サンプル
プロジェクトファイル — github
コメント