Swift

【Swift】ダミーViewを使用したレスポンシブな画面設計

こんにちは、コンジ(@pippi_kon)です。

この記事では、『SwiftのダミーView(ダミービュー)を使用したレスポンシブな画面設計』についてご紹介します。

ダミーViewとは

まずはじめに、ダミーViewは正式な部品や機能ではありません。

私が勝手にそう呼んでるだけです。

ダミーViewは、レスポンシブな画面設計をするための部品の一つ。

幅または高さを持たず、UIの比率計算のためだけに用意するViewのことです。

 

…なんのことかさっぱりですね?

実例を用いてご説明します!

 

ダミーViewの作り方

横幅用のダミーView

Viewを配置する

まずは、画面全体の横幅の比率計算をするためのダミーViewを作ります。

viewを配置する

ここではわかりやすいように色をつけていますが、本来は不要です。

Viewの名称はわかりやすいものに変更しておきましょう。

ここではDummyW(横幅のダミー)としています。

 

Viewの設定を変更する

viewの設定

Xcodeの画面下の方にある「├□┤」のようなボタンを押します。

上・左・右の欄にそれぞれ 0 を入力します。

「 エ 」のマークが点線から実線になったことを確認してください。

もし点線のままならクリックすると実戦にすることができます。

なお、下の欄の「 エ 」のマークは点線にしてください。

 

Constrain to margins」のチェックを外します。

 

Height」に0を入力します。

また、Heightにチェックが入っていることを確認してください。

 

上記の設定が完了したら「Add 4 Constraints」ボタンを押して設定変更を確定させます。

ダミーView(横)の設定完了

するとこのように先ほど設置したビューが消えます。

正確には消えたのではなく、画面上部に高さ0のビューが配置されたのです。

このビューはアプリを実行しても表示されません。高さ0なので。

以上で横幅用のダミーViewは完成です!

 

高さ用のダミーView

Viewを配置する

横幅用のダミーViewと同様に次は高さ用のダミーViewを作成します。

viewを配置する

ここではわかりやすいように色をつけていますが、本来は不要です。

Viewの名称はわかりやすいものに変更しておきましょう。

ここではDummyH(高さのダミー)としています。

 

Viewの設定を変更する

viewの設定を変更する

Xcodeの画面下の方にある「├□┤」のようなボタンを押します。

上・左・下の欄にそれぞれ 0 を入力します。

「 エ 」のマークが点線から実線になったことを確認してください。

もし点線のままならクリックすると実戦にすることができます。

なお、右の欄の「 エ 」のマークは点線にしてください。

 

Constrain to margins」のチェックを外します。

 

Width」に0を入力します。

また、Widthにチェックが入っていることを確認してください。

 

上記の設定が完了したら「Add 4 Constraints」ボタンを押して設定変更を確定させます。

ダミーView(縦)の設定完了

するとこのように先ほど設置したビューが消えます。

正確には消えたのではなく、画面左部に横幅0のビューが配置されたのです。

このビューはアプリを実行しても表示されません。幅0なので。

以上で高さ用のダミーViewは完成です!

 


レスポンシブな画面の作成

ダミーViewが完成したら、次はいよいよレスポンシブな画面の作成です。

今回は、以下のような画面を作ります。

ダミーviewを使って作るレスポンシブ画面の例
ビュー 高さの比率 横幅の比率
赤色 25% 50%
黄色 25% 50%
緑色 25% 100%
青色 50% 100%

iPhoneXやiPhone5sなど、どの端末で表示しても基本的にこの形を維持します。

端末によっては横幅と高さの比率が変わるので伸びて見えたりすることもありますが、Viewがずれたり隙間ができたりすることはありません。

赤色のビュー

赤色のビューを作成します。

画像の①は文中の(1)に対応します。

赤色のviewを配置する

(1)Viewを配置します。色は赤色に変更しました。

(2)Viewの名称をわかりやすいものに変更します。
ここではRed(赤色のビュー)としています。

 

赤色のviewの設定を変更する

(3)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。

(4)上・左の欄にそれぞれ 0 を入力します。
「 エ 」のマークが点線から実線になったことを確認してください。
もし点線のままならクリックすると実戦にすることができます。
右・下の欄の「 エ 」のマークは点線にしてください。

(5)「Constrain to margins」のチェックを外します。

(6)「Add 2 Constraints」ボタンを押します。

赤色のviewとダミーviewを関連づける

(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を活用することで図形の大きさを比率で設定することができます。

こうしておけば、画面のサイズが変わったときでも表示が崩れることはありません。

少しでもご参考になれば幸いです。

初心者向け!Swift入門にオススメの参考書_サムネ
【2020年版】初心者向け!Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ
無料体験あり!初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
ABOUT ME
コンジ
コンジ
自分のやりたいことでお金を稼げる生活に憧れて脱サラ。 アプリ開発やブログ運営をしながらのんびり暮らしています。