Xcode|StoryboardのAutoLayoutを使用してViewを比率で配置する

20160713_027

Storyboard AutoLayout 第3弾はUIViewを比率で配置する方法です。

比率?ピンときませんか?
例えば、画面サイズ違に関係なくViewを上下4:6で配置したい時ありますよね、その願いを叶える方法です。

今回は3個のViewを配置してみます。

20160713_024

動作環境

Xcode 7.3.1
iOS 9.3.2

UIViewを画面比率で分割配置する

比率を設定する場所を忘れそうですが、Xcode|StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置するとほとんど変わりませんので気楽にいきましょう。

基準となるBase Viewを配置する

比率の基準となるBase Viewを配置していきます。

20160713_001

全体にUIViewを貼り付けます。

20160713_002

Pinを押して上:0、左:0、右:0、下:20と入れてaddを押します。

これでBase Viewの配置が完了しました。

上側のView

上側40%のViewを配置していきます。

20160713_003

上側にViewをそれらしく置きます。

20160713_004

pinを押して上:0、左:0、右:0と入れてAddを押します。

20160713_005

Up View→BASE Viewの順番で複数選択します。複数選択はcommandを押しながら選択です。

20160713_006

pinを押して「Equal Heights」にチェックを入れてAddを押します。

20160713_007

Up Viewを選択します

縦方向の比率を設定していきます。

20160713_008

Size inspector→Equal Height [Edit]→Multiplierに0.4(40%)を入力

20160713_009

最後にUpdate Framesを選択して綺麗に整えば配置完了です。

さあ、次いきましょう!

下側のView

下側60%の領域に左20%右80%の2個のViewを配置します。

左下のView

左下に高さ60%、幅20%のViewを配置していきます。

20160713_010

左下の方にViewをそれらしく配置します。

20160713_011

pinを押して左:0、下:0のスペースを設定してAddを押します。

20160713_012

「Down Left view」→「BASE View」の順番で複数選択します。複数選択はcommandを押しながら選択です。

20160713_013

pinを押して[Equal Widths」と「Equal Heights」にチェックを入れてAddを押します。

20160713_028

Down Left Viewを選択します。

縦方向の比率を設定していきます。

20160713_014

Size inspectorをクリックしてProportional Heightの”Edit”をクリックしMultiplier:0.6(60%)を設定する。

横方向の比率を設定します。

20160713_015

Proportional Widthの”Edit”を押してMultiplierに0.2(20%)を設定します。

20160713_016

最後にUpdate Framesを選択して綺麗に整えば配置完了です。

右下のView

右下に高さ60%、幅80%のViewを配置していきます。

20160713_017

それらしく右下にViewを配置します。

20160713_018

pinを押して右:0、下:0のスペースを設定してAddを押します。

20160713_019

「Down Right view」→「BASE View」の順番で複数選択します。複数選択はcommandを押しながら選択です。

20160713_020

pinを押してEqual WidthtsとEqual Heightsにチェクを入れてAddを押します。

20160713_029

Down Right Viewを選択します。

横方向の比率を設定していきます。

20160713_021

Size inspector をクリックしてEqual WidthのEditを押してMultiplierに0.8()80%を設定します。

縦方向の比率を設定していきます。

20160713_022

Equal HeightのEditを押してMultiplierに0.6(60%)を設定します

20160713_023

最後にUpdate Framesを選択して綺麗に整えば配置完了です。

これで全てのViewの配置が完了しました。

うまくいきましたでしょうか?

完成画面

縦方向

20160713_025

横方向

20160713_026

まとめ

うまくいきましたでしょうか?
AutoLayout凄いでしょう!
比率の値を入れる場所を忘れてしまいそうですがStoryboardが楽しくなる機能ですね。

ぜひ、使ってみてください

サンプル

プロジェクトファイル — github

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク