こんにちは、コン（@pippi_kon）です。
この記事では、『SwiftのダミーView（ダミービュー）を使用したレスポンシブな画面設計』についてご紹介します。
ダミーViewとは
まずはじめに、ダミーViewは正式な部品や機能ではありません。
私が勝手にそう呼んでるだけです。
ダミーViewは、レスポンシブな画面設計をするための部品の一つ。
幅または高さを持たず、UIの比率計算のためだけに用意するViewのことです。
…なんのことかさっぱりですね？
実例を用いてご説明します！
ダミーViewの作り方
横幅用のダミーView
Viewを配置する
まずは、画面全体の横幅の比率計算をするためのダミーViewを作ります。
ここではわかりやすいように色をつけていますが、本来は不要です。
Viewの名称はわかりやすいものに変更しておきましょう。
ここではDummyW（横幅のダミー）としています。
Viewの設定を変更する
Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
上・左・右の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
なお、下の欄の「 ｴ 」のマークは点線にしてください。
「Constrain to margins」のチェックを外します。
「Height」に0を入力します。
また、Heightにチェックが入っていることを確認してください。
上記の設定が完了したら「Add 4 Constraints」ボタンを押して設定変更を確定させます。
するとこのように先ほど設置したビューが消えます。
正確には消えたのではなく、画面上部に高さ0のビューが配置されたのです。
このビューはアプリを実行しても表示されません。高さ0なので。
以上で横幅用のダミーViewは完成です！
高さ用のダミーView
Viewを配置する
横幅用のダミーViewと同様に次は高さ用のダミーViewを作成します。
ここではわかりやすいように色をつけていますが、本来は不要です。
Viewの名称はわかりやすいものに変更しておきましょう。
ここではDummyH（高さのダミー）としています。
Viewの設定を変更する
Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
上・左・下の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
なお、右の欄の「 ｴ 」のマークは点線にしてください。
「Constrain to margins」のチェックを外します。
「Width」に0を入力します。
また、Widthにチェックが入っていることを確認してください。
上記の設定が完了したら「Add 4 Constraints」ボタンを押して設定変更を確定させます。
するとこのように先ほど設置したビューが消えます。
正確には消えたのではなく、画面左部に横幅0のビューが配置されたのです。
このビューはアプリを実行しても表示されません。幅0なので。
以上で高さ用のダミーViewは完成です！
レスポンシブな画面の作成
ダミーViewが完成したら、次はいよいよレスポンシブな画面の作成です。
今回は、以下のような画面を作ります。
| ビュー | 高さの比率 | 横幅の比率 |
|---|---|---|
| 赤色 | 25% | 50% |
| 黄色 | 25% | 50% |
| 緑色 | 25% | 100% |
| 青色 | 50% | 100% |
iPhoneXやiPhone5sなど、どの端末で表示しても基本的にこの形を維持します。
端末によっては横幅と高さの比率が変わるので伸びて見えたりすることもありますが、Viewがずれたり隙間ができたりすることはありません。
赤色のビュー
赤色のビューを作成します。
画像の①は文中の（１）に対応します。
（1）Viewを配置します。色は赤色に変更しました。
（2）Viewの名称をわかりやすいものに変更します。
ここではRed（赤色のビュー）としています。
（3）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（4）上・左の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
右・下の欄の「 ｴ 」のマークは点線にしてください。
（5）「Constrain to margins」のチェックを外します。
（6）「Add 2 Constraints」ボタンを押します。
（7）まずRedを選択し、その後commandキーを押しながらDummyWを選択します。
2つ選択状態になったことを確認してください。
（8）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（9）「Equal Widths」にチェックを入れます。
（10）「Add 1 Constraints」ボタンを押します。
（11）まずRedを選択し、その後commandキーを押しながらDummyHを選択します。
2つ選択状態になったことを確認してください。
（12）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（13）「Equal Heights」にチェックを入れます。
（14）「Add 1 Constraints」ボタンを押します。
（15）Redのみを選択します。
（16）Xcodeの画面右上にある「size inspector」のアイコンを選択します。
（17）「Equal Width to: DummyW」の「Edit」を選択します。
（18）「Multiplier」に0.5を入力し、Enterキーを押します。
1が100%を意味します。今回Redは横幅50%にしたいので0.5と入力します。
（19）「Equal Height to: DummyH」の「Edit」を選択します。
（20）「Multiplier」に0.25を入力し、Enterキーを押します。
1が100%を意味します。今回Redは高さ25%にしたいので0.25と入力します。
以上で赤いViewの設定が完了しました！
黄色のビュー
黄色のビューを作成します。
（1）赤色のViewの横にViewを配置します。色は黄色に変更しました。
この時、黄色のビューが赤色のビューに重ならないようにしてください。
必要であれば黄色のビューを手動でサイズ調整してください。
（2）Viewの名称をわかりやすいものに変更します。
ここではYellow（黄色のビュー）としています。
（3）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（4）上・左・右の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
下の欄の「 ｴ 」のマークは点線にしてください。
（5）「Constrain to margins」のチェックを外します。
（6）「Add 3 Constraints」ボタンを押します。
（7）まずYellowを選択し、その後commandキーを押しながらDummyHを選択します。
2つ選択状態になったことを確認してください。
（8）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（9）「Equal Heights」にチェックを入れます。
（10）「Add 1 Constraints」ボタンを押します。
（11）Yellowのみを選択します。
（12）Xcodeの画面右上にある「size inspector」のアイコンを選択します。
（13）「Equal Height to: DummyH」の「Edit」を選択します。
（14）「Multiplier」に0.25を入力し、Enterキーを押します。
1が100%を意味します。今回Yellowは高さ25%にしたいので0.25と入力します。
以上で黄色いビューの設定が完了しました！
緑色のビュー
緑色のビューを作成します。
（1）赤色と黄色のViewの下にViewを配置します。色は緑色に変更しました。
この時、緑色のビューが赤色や黄色のビューに重ならないようにしてください。
（2）Viewの名称をわかりやすいものに変更します。
ここではGreen（緑色のビュー）としています。
（3）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（4）上・左・右の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
下の欄の「 ｴ 」のマークは点線にしてください。
（5）「Constrain to margins」のチェックを外します。
（6）「Add 3 Constraints」ボタンを押します。
（7）まずGreenを選択し、その後commandキーを押しながらDummyHを選択します。
2つ選択状態になったことを確認してください。
（8）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（9）「Equal Heights」にチェックを入れます。
（10）「Add 1 Constraints」ボタンを押します。
（11）Greenのみを選択します。
（12）Xcodeの画面右上にある「size inspector」のアイコンを選択します。
（13）「Equal Height to: DummyH」の「Edit」を選択します。
（14）「Multiplier」に0.25を入力し、Enterキーを押します。
1が100%を意味します。今回Greenは高さ25%にしたいので0.25と入力します。
以上で緑色のビューの設定が完了しました！
青色のビュー
最後に青色のビューです。
青色はとても簡単です。比率計算の必要がなく、ただ上下左右に広げればいいだけです。
（1）緑色のViewの下にViewを配置します。色は青色に変更しました。
この時、青色のビューが赤色や黄色、緑色のビューに重ならないようにしてください。
（2）Viewの名称をわかりやすいものに変更します。
ここではBlue（青色のビュー）としています。
（3）Xcodeの画面下の方にある「├□┤」のようなボタンを押します。
（4）上・左・右・下の欄にそれぞれ 0 を入力します。
「 ｴ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
（5）「Constrain to margins」のチェックを外します。
（6）「Add 4 Constraints」ボタンを押します。
以上で青色のビューの設定が完了しました！とっても簡単！
最後に
今回は、『SwiftのダミーView（ダミービュー）を使用したレスポンシブな画面設計』についてご紹介しました。
高さ用・横幅用のダミーViewを活用することで図形の大きさを比率で設定することができます。
こうしておけば、画面のサイズが変わったときでも表示が崩れることはありません。
少しでもご参考になれば幸いです。
