2019/04/03スポンサーリンクこんにちは!こんちゃ(@pippi_kon)です。この記事では、SwiftのダミーView(ダミービュー)を使用したレスポンシブな画面設計についてご紹介します。バージョン情報この記事は以下のバージョンで記載しています。青色のビューまとめダミーViewとはまずはじめに、ダミーViewは正式な部品や機能ではありません。私が勝手にそう呼んでるだけです。ダミーViewは、レスポンシブな画面設計をするための部品の一つ。幅または高さを持たず、UIの比率計算のためだけに用意するViewのことです。横幅用のダミーViewまずは、画面全体の横幅の比率計算をするためのダミーViewを作ります。Viewを配置します。ここではわかりやすいように色をつけていますが、本来は不要です。Viewの名称をわかりやすいものに変更します。ここではDummyW(横幅のダミー)としています。Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。」のマークは点線にしてください。margins」のチェックを外します。「Height」に0を入力します。チェックが入っていることを確認してください。Constraints」ボタンを押します。するとこのように先ほど設置したビューが消えます。正確には消えたのではなく、画面上部に高さ0のビューが配置されたのです。このビューはアプリを実行しても表示されません。以上で横幅用のダミーViewは完成です!高さ用のダミーView横幅用のダミーViewと同様に次は高さ用のダミーViewを作成します。Viewを配置します。ここではわかりやすいように色をつけていますが、本来は不要です。Viewの名称をわかりやすいものに変更します。ここではDummyH(高さのダミー)としています。Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。」のマークは点線にしてください。margins」のチェックを外します。「Width」に0を入力します。チェックが入っていることを確認してください。Constraints」ボタンを押します。するとこのように先ほど設置したビューが消えます。正確には消えたのではなく、画面左部に横幅0のビューが配置されたのです。このビューはアプリを実行しても表示されません。以上で高さ用のダミーViewは完成です!スポンサーリンクレスポンシブな画面の作成ダミーViewが完成したら、次はいよいよレスポンシブな画面の作成です。今回は、以下のような画面を作ります。100%iPhoneXやiPhone5sなど、どの端末で表示しても基本的にこの形を維持します。端末によっては横幅と高さの比率が変わるので伸びて見えたりすることもありますが、Viewがずれたり隙間ができたりすることはありません。赤色のビューを作成します。画像の1は文中の(1)に対応します。(まる11以降が存在しなかったので()形式に変更しました...)(1)Viewを配置します。色は赤色に変更しました。(2)Viewの名称をわかりやすいものに変更します。ここではRed(赤色のビュー)としています。(3)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。」のマークは点線にしてください。margins」のチェックを外します。Constraints」ボタンを押します。(7)まずRedを選択し、その後commandキーを押しながらDummyWを選択します。2つ選択状態になったことを確認してください。(8)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。Widths」にチェックを入れます。Constraints」ボタンを押します。(11)まずRedを選択し、その後commandキーを押しながらDummyHを選択します。2つ選択状態になったことを確認してください。(12)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。Heights」にチェックを入れます。Constraints」ボタンを押します。(15)Redのみを選択します。inspector」のアイコンを選択します。DummyW」の「Edit」を選択します。(18)「Multiplier」に0.5を入力し、Enterキーを押します。1が100%を意味します。今回Redは横幅50%にしたいので0.5と入力します。DummyH」の「Edit」を選択します。(20)「Multiplier」に0.25を入力し、Enterキーを押します。1が100%を意味します。今回Redは高さ25%にしたいので0.25と入力します。黄色のビューを作成します。(1)赤色のViewの横にViewを配置します。色は黄色に変更しました。この時、黄色のビューが赤色のビューに重ならないようにしてください。必要であれば黄色のビューを手動でサイズ調整してください。(2)Viewの名称をわかりやすいものに変更します。ここではYellow(黄色のビュー)としています。(3)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。」のマークは点線にしてください。margins」のチェックを外します。Constraints」ボタンを押します。(7)まずYellowを選択し、その後commandキーを押しながらDummyHを選択します。2つ選択状態になったことを確認してください。(8)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。Heights」にチェックを入れます。Constraints」ボタンを押します。(11)Yellowのみを選択します。inspector」のアイコンを選択します。DummyH」の「Edit」を選択します。(14)「Multiplier」に0.25を入力し、Enterキーを押します。1が100%を意味します。今回Yellowは高さ25%にしたいので0.25と入力します。緑色のビューを作成します。(1)赤色と黄色のViewの下にViewを配置します。色は緑色に変更しました。この時、緑色のビューが赤色や黄色のビューに重ならないようにしてください。(2)Viewの名称をわかりやすいものに変更します。ここではGreen(緑色のビュー)としています。(3)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。」のマークは点線にしてください。margins」のチェックを外します。Constraints」ボタンを押します。(7)まずGreenを選択し、その後commandキーを押しながらDummyHを選択します。2つ選択状態になったことを確認してください。(8)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。Heights」にチェックを入れます。Constraints」ボタンを押します。(11)Greenのみを選択します。inspector」のアイコンを選択します。DummyH」の「Edit」を選択します。(14)「Multiplier」に0.25を入力し、Enterキーを押します。1が100%を意味します。今回Greenは高さ25%にしたいので0.25と入力します。最後に青色のビューです。青色はとても簡単です。比率計算の必要がなく、ただ上下左右に広げればいいだけです。(1)緑色のViewの下にViewを配置します。色は青色に変更しました。この時、青色のビューが赤色や黄色、緑色のビューに重ならないようにしてください。(2)Viewの名称をわかりやすいものに変更します。ここではBlue(青色のビュー)としています。(3)Xcodeの画面下の方にある「├□┤」のようなボタンを押します。」のマークが点線から実線になったことを確認してください。点線のままならクリックすると実戦にすることができます。margins」のチェックを外します。Constraints」ボタンを押します。以上で青色のビューの設定が完了しました!とっても簡単!まとめいかがだったでしょうか?今回は、SwiftのダミーViewを使用したレスポンシブな画面設計についてご紹介しました。高さ用・横幅用のダミーViewを活用することで図形の大きさを比率で設定することができます。しておけば、画面のサイズが変わったときでも表示が崩れることはありません。ご参考になれば幸いです。iPhoneやiPadをターゲットとしたアプリを作る場合、画面サイズを意識しないと端末によっては表示が崩れてしまいますよね。MEこんちゃ自分のやりたいことでお金を稼げる生活に憧れて脱サラ。アプリ開発やブログ運営をしながらのんびり暮らしています。【2019年版】Swift入門にオススメの参考書ベスト3iPhoneアプリ・PCソフト開発プログラマーこんちゃ自分のやりたいことでお金を稼げる生活に憧れて脱サラ。↓アフィリエイトで稼ごうとするも思うように伸びず貯金枯渇。↓フリーランスに転身。