この記事ではSwiftのStoryboard上で、Viewを指定の倍率で縦横に配置する方法を解説します。
スマホ向けのアプリを作っていると、「画面の30%のサイズのViewを配置したい！」なんてことありますよね。
この記事は、そんな疑問に対して、Storyboardの画像付きで、解説しています。
また、記事の後半では、Viewだけでなく、ボタンやラベルを指定の倍率で配置する方法も紹介しています。
指定の倍率でViewを配置してみる
まずは指定の倍率で、Viewを配置してみます。
今回は、以下の手順で、Viewを縦に4つ並べてみます。
各Viewのサイズは、それぞれ、画面縦サイズの40%、30%、20%、10%で配置してみます。
- Viewを縦に4つ並べる
- 各Viewに倍率を指定する
Viewを縦に4つ並べる
Viewを縦に並べるには、Vertical Stack Viewを使います。
使い方はこちらの記事で解説していますので、使い方が分からない方は、是非、こちらの記事も参照して下さい。
それでは、Vertical Stack Viewを使用して、UIViewを縦に4つ並べてみましょう。
まず、Vertical Stack ViewをStoryboardに配置しましょう。
配置できたら、Vertical Stack Viewの下にUIViewを4つ配置しましょう。
Vertical Stack Viewは、VStackViewと名前をつけておきましょう。
また、UIViewは上から順に、View1、View2、View3、View4と名前をつけ、それぞれ、背景色に赤・青・緑・黄色を設定しましょう。
設置した各要素に制約を設定しましょう。
以下の位置関係になるように、制約を設定していきます。なお、各UIViewの高さは、この後、倍率で指定するため、まずは、高さの制約以外を設定しましょう。
Vertical Stack Viewは、画面いっぱいに広げる制約を設定します。
Vertical Stack Viewを選択し、Add New Constraintsをクリック、Safe Areaに対する上下左右のスペースを全て 0 に設定しましょう。
UIViewはView1からView4まで順に制約を設定します。
まずは、View1を選択し、Add New Constraintsをクリック、VStackViewに対して、上・左・右のスペースが0になるように、制約を設定します。
次に、View2を選択し、Add New Constrainsをクリック、VStackViewに対して、左・右のスペースが0、View1に対して、上のスペースが0になるように、制約を設定します。
次に、View3を選択し、Add New Constrainsをクリック、VStackViewに対して、左・右のスペースが0、View2に対して、上のスペースが0になるように、制約を設定します。
最後に、View4を選択し、Add New Constrainsをクリック、VStackViewに対して、左・右のスペースが0、View3に対して、上のスペースが0になるように、制約を設定します。
各Viewに倍率を指定する
それでは、いよいよ、各Viewの倍率を指定していきましょう。
View1から順に倍率を設定していきます。
View1の高さをVStackViewの40%に設定しましょう。
エディターでVStackViewとView1を選択した状態で、Add New Constraintsをクリックします。
Add New Constraintsの画面で、Equal Heightsをクリックし、制約を設定します。
この制約を設定することで、VStackViewと、View1が同じ高さになります。
続いて、View1を選択した状態で、Size Inspectorを開きます。
Equal Height to Superviewを見つけ、Editをクリックします。
Multiplierが、VStackViewに対する高さの比率を指定する箇所です。
ここに0.4を入力し、エンターをすることで、View1の高さを、VStackViewの40%のサイズにすることができます。
View1と同じ方法で、View2〜View4の高さも設定しましょう。
View2はVStackViewの30%の高さに設定しましょう。
View3はVStackViewの20%の高さに、View4はVStackViewの10%の高さに設定しましょう。
これで、各Viewを指定の倍率の高さに設定することができました。
View以外の要素を指定の倍率で配置してみる
次に、Labelや、Buttonの高さを指定の倍率に設定してみましょう。
要素が変わるだけで、設定するための手順は、先ほどの手順と同様です。今回は、LabelとButtonを上下に半々の比率で配置してみましょう。
- LabelとButtonを配置する
- LabelとButtonに倍率を指定する
LabelとButtonを配置する
まずは、Storyboard上にLabelとButtonを配置しましょう。
まず、LibraryからLabelとButtonを探し、Storyboard上に、LabelとButtonを配置しましょう。
Labelは、タイトルを「ラベル」に、文字サイズを50、背景色を赤に、変更しましょう。
Buttonは、タイトルを「ボタン」に、文字サイズを50、背景色を緑に、変更しましょう。
配置したLabelとButtonに、制約を設定しましょう。
今回も、先ほどと同様、高さは後ほど倍率で指定するため、高さ以外の制約を設定していきます。
まずは、Labelを選択し、Add New Constraintsをクリック、Safe Areaに対する上・左・右のスペースを全て 0 に設定しましょう。
次に、Buttonを選択し、Add New Constraintsをクリック、Safe Areaに対する下・左・右のスペースを全て 0 に設定しましょう。
LabelとButtonに倍率を指定する
それでは、LabelとButtonの倍率を指定しましょう。
それぞれ、Safe Areaに対して、高さ50%の設定をします。
今度は、Safe Areaに対するLabelの高さを 50% に設定します。
Safe AreaとLabelを選択した状態で、Add New Constraintsをクリックし、Equal Heightsの制約をつけます。
続いて、Labelを選択した状態で、Size Inspectorを開き、Equal Height to Superviewの、Editをクリックします。
Multiplierに0.5を設定します。
先ほどと同様の手順で、Safe Areaに対するButtonの高さも 50% に設定します。
これで、View以外の要素も、指定の倍率で配置することができました。
最後に
この記事では、高さの倍率に絞って解説しましたが、Equal Heightsではなく、Equal Widthsを指定することで、幅の倍率も設定できます。
高さや幅を任意の倍率に指定することで、より柔軟なレイアウトを作れるようになりますので、是非いろんなパターンを試してみてください！
