はじめに

大学生向けに勉強会を行ったものを記事化したものです。

対象

今回のレベル：1.0
Storyboard を利用したアプリの画面レイアウト作成における制約の付け方を勉強していきます！初回の続きになりますので、初回も合わせてみると良いかもしれません。

作るアプリ

GitHub（直ダウンロード）

前回、最後に工夫したいことを考えてみました。今回は、その中で、以下の内容にチャレンジしてみたいと思います。その中で、 Storyboard を使用したレイアウト方法を学んでいきます。

ボタンの配置場所を変えたい
複数キャラクターに対応させたい

開発

初めに、前回配置した ボタンの配置場所を変える ことから始めていきましょう！
Main.storyboard と、それに対応する MainViewController.swift を表示しておきます。まずは、上記画像のような手順で操作していきます。
1番目ですが、対象のボタンを選択した状態にしておきます。

次に、右側の定規マーク（Size inspector）を選択状態にします。

View 項目でボタンの x 座標、 y 座標、幅、高さをそれぞれ設定することができます。今回使用している練習用のアプリでは、 幅と高さを80に設定 してみてください。設計画面上のボタンのサイズが変わったのがわかると思います。

ここで AutoLayout と呼ばれる仕組みを使ってみましょう！「 iPhone4s でも iPhone X でも画面の中央に 『スクリーン横幅 : ボタン = 3 : 1』のボタンを配置してください といった制約を設定できます。
今回も、上記画像のような順番で操作していきます。まず、はじめに対象のボタンを選択した状態にしておきます。

上記画像の赤い四角で囲った部分から Add new constraints メニューを呼び出します。ここでは、 パーツのサイズ・配置位置等の制約を設定する ことができます。先程、幅と高さを80に設定したときと 設定できる内容が異なることに注意 してください。

まずはじめに、 幅と高さを固定するという制約 をつけてみましょう！意味合いとしては液晶の大きい iPad でも液晶の小さい iPhone でも同じサイズで表示されるように制約をつけるということです。なので、結果として iPad ではすごく小さいパーツになるので見にくくなることが想像できますね。
上記画像の 赤枠内のチェックボックスにチェック することで、幅と高さを80に固定する制約が追加される準備が整いました。最後に Add 2 Constraints と書かれたボタンをクリックすれば、制約が追加されます。

さて、何やら怪しげな雰囲気ですね。ボタンの周りが赤く表示されたり、赤いバッジが表示されていませんか？そう！このままではエラーが出てしまうのです。何故か考えてみましょう！

エラーが出ていた原因ですが、英語に抵抗がない人はエラー分を読んでみてください。ということで、答えですが、 x 座標と y 座標が決まらない ことが原因です。なので、制約を追加していきましょう！

上記画像のような順番で操作していきます。まず、はじめに対象のボタンを選択した状態にしておきます。

上記画像の赤枠部分から Alignment constraints メニューを呼び出します。ここでは、 水平・垂直などの制約を設定する ことができます。

上記画像の赤枠部分のチェックボックスにチェックすることで、横方向に中央・縦方向に中央にパーツが配置されるようになり、結果として 画面の中心に配置される制約 が追加されたことになります。
ここで、 x 座標と y 座標が決まった ことはわかりますか？

最後に、 複数キャラクターに対応させる ためにボタンを増やしておきましょう！ボタンの追加方法は初回と同様ですが、コードとの接続まではまだしなくても構いません。
上記画像のような順番で操作していきます。1番目は今まで通りです。

今回は、横方向に中央にする訳にはいきませんね！ということで、 左右にある障害物との距離比率を保つ制約 をつけてみましょう！幅と高さを設定したところの赤枠部分で設定ができます。うっすら赤い、左右に伸びる線をクリックすると制約を追加する準備が整います。
注意しなければならないのは、 比率が保たれる ということです。上記画像にあるように、左障害物との距離が10で右障害物との距離が20なら、別の端末で左障害物との距離が20のとき、右障害物との距離が40となるような位置に表示されます。

最後に、縦方向に中央にする制約を追加して Add Constraints をクリックしましょう！

AutoLayout について軽くまとめてみました。
多くの便利機能があるため、一度に覚えて使えるようになるのは難しいですが、使っているうちに仲良くなれます！少しずつでも使うことを意識するといいかもしれませんね！

次回は、 たった2行追加するだけでカメラアプリが動くようになってしまうカラクリ を解説しながら Swift を使ったプログラミングの世界を紹介します！

最後まで見ていただき、ありがとうございます。

Swiftを使った挫折しないiOSアプリ開発入門シリーズ

【2行で完成】Swiftを使った挫折しないiOSアプリ開発入門 #1
【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2
【継承とは】Swiftを使った挫折しないiOSアプリ開発入門 #3

以後、記事化中…