公開日：
Swiftアプリ開発の「マルチデバイス対応」についての記事です。
様々な方法があるとは思いますが、私はメンテナンスのことを考え、AutoLayoutの制約(Constraints)を使用することとしました。
XcodeのConstraints設定は独特なため、CSSを仕事で使っていた方でも最初は理解するのに時間がかかるのではないでしょうか。
「レスポンシブ設定、CSSのFlexBoxやmarginの%設定などはXcodeではどうやったらいいの！？」
に対して1つの例をまとめました。
今回は複数パーツを横一列に均等に並べるを例にしています。
基本は画像のように|-■-|マークをクリックしてConstraintsを設定していきます。
つまり上部、左部、width,heightを設定すれば特定可能なので、
右側、下部は設定不要です。
どのパーツからの距離を設定するかを選択できます
CSSではおなじみのmarginの最小値を設定したいと考えました。
結論:こちらは実現できませんでした。
一度、値を設定した後、右メニューの四角で囲った部分をクリックすると
Equal以外のLess Than/Greater Thanが選択できます。
上の画像のように以上、以下の値を両者設定しても、Xcodeが位置を認識できないようで、エラーが発生し、適用されません。
（margin-left:が最大値79px;最小値2pxが適用されることを期待したのですが、実現できませんでした）
実現できた方法を次に紹介します。
marginは固定値しか設定できませんが、width,heightであれば、別のパーツを基準として、割合で設定が可能です。
これができればCSSでは以下で表現するFlexBoxが実現できます。
（横方向に均等にパーツを配置する。）
display: flex; justify-content: space-around;
設定したい対象を選択状態にし、基準にしたい対象に向けて、Ctrlを押しながらドラッグアンドドロップをします。
すると、選択肢が出るので今回はwidthをいじるのでequal widthを選択します。
すると上の画像のように右メニューにPropartional Width to …というボタンが現れるのでダブルクリックします。
するとこのような画面が現れます。
Multiplierが基準パーツのWidthに対する現在の割合です。
0.08は基準の横幅に対して8%という意味です。
ここをプレビューでSEや11での見た目を確認しながら値を変更していきましょう。
(これがmarginを含めたWidthとなります)
今回は横幅に対して17%に設定しました。
この時点ではエラーが出ますが、無視して大丈夫です。
横幅以外の情報を入れていきます。高さ、上部、左部のみ入れました。
ポイント：marginを含めたwidthを割合で決定したため、左部の値は０としています。
プレビューでiphoneSE~11を確認してみると、先ほどまで画面外にはみ出ていたチェックマークが、まるでFlexBoxを設定したように、整いました！
CSSで以下のように表現する中央を基準とした配置においては
display: flex;
justify-content: center;
簡単で、Xcode上で1つのパーツだけ「horizontally in container」で中央線を基準として固定し、
後は相対距離ポチポチとConstraints設定していけば実現できます。
こちらはCtrl＋ドラッグの方法は使用しません。
この度は、画像において均等配置を行いましたが、UILabelなどであってもUIViewに入れ子にすることで、marginを含めたWidthとして設定できます。
HTML/CSSがバッチリな方でもSwiftの設定方法は特殊なため、初めての方はマルチデバイス対応で困惑するのではないでしょうか。
私はConstraintsをオリジナルアプリに設定する際、数日間いじってて発見しましたが、これはかなり応用が効きそうだと思いました。
以上
