【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2

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

## 対象
今回のレベル：1.0
Storyboard を利用したアプリの画面レイアウト作成における制約の付け方を勉強していきます！初回の続きになりますので、[初回](https://qiita.com/AkkeyLab/items/7da71535ac868917f010)も合わせてみると良いかもしれません。

## 作るアプリ
![ios_ study02.002.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/638d1d45-66bc-ebfe-e1d3-b34238c3d364.jpeg)
[GitHub（直ダウンロード）](https://github.com/AkkeyLab/PhotoGurashi/archive/sample01.zip)

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

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

## 開発
![ios_ study02.028.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/996288c7-95a5-9d0f-617a-76877ab5e481.jpeg)

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

![ios_ study02.029.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/3d4e55cf-30fa-7a38-197f-79a23d1b892c.jpeg)

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

![ios_ study02.031.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/b8e6ac5b-598e-b2e2-1432-6331180c954a.jpeg)

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

![ios_ study02.032.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/d55ddf10-ac12-3d8f-ce02-758be25e8f25.jpeg)

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

![ios_ study02.033.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/1314bde1-8828-a5d3-d5a4-545bb48a2cc1.jpeg)

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

![ios_ study02.035.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/99407b50-7c4e-bada-f787-a0d8451438ee.jpeg)

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

![ios_ study02.036.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/86c6e6cc-3807-2eae-fa65-c3f9ea60bae7.jpeg)

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

![ios_ study02.037.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/aec457ef-9b8b-9ad5-ff7c-8629d27f0a95.jpeg)

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

![ios_ study02.038.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/c402b8a6-39b7-f9dc-aee7-367280a993fb.jpeg)

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

![ios_ study02.039.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/6201eee4-17a4-058d-23ed-e41d9486bd41.jpeg)

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

![ios_ study02.040.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/c11a38c6-03c5-ec83-6e78-6f3917aa2149.jpeg)

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

![ios_ study02.041.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/896c2bc2-3303-b735-e8fb-45e563a91831.jpeg)

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

![ios_ study02.042.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/36ee0a28-ad74-d7e8-f9af-def26d0a8e07.jpeg)

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

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

![ios_ study02.043.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/d520951d-84cf-829b-562d-ad5a75c1b44c.jpeg)

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

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

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

### Swiftを使った挫折しないiOSアプリ開発入門シリーズ
- [【2行で完成】Swiftを使った挫折しないiOSアプリ開発入門 #1](https://qiita.com/AkkeyLab/items/7da71535ac868917f010)
- **【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2**
- [【継承とは】Swiftを使った挫折しないiOSアプリ開発入門 #3](https://qiita.com/AkkeyLab/items/43f827f1622859fdf206)

以後、記事化中…