Xcode6でiPhoneアプリを作ろうとした時にレイアウト周りでハマったこと


Xcode6が正式にリリースされたので、Swiftを利用して早速アプリを0から作ってみました。
自分はXcode5からiPhoneアプリを作り始めたのですが、レイアウト周りで幾つかハマった点があったのでまとめておきます。

#### スプラッシュ画面を消すと、iPhone5s以下で起動した時に上下に黒い帯ができてしまう

新しいプロジェクトを作成する際に、Xcode5ではなかったスプラッシュ画面がデフォルトで挿入されているようになってます。

デフォルトのスプラッシュ画面はプロジェクト名がUILabelで記載されています。（非常にダサいので）自前のもので置き換えないのであればProjectのGeneral->App Icons and Launch Images->Launch Screen Fileから項目を削除されると思います。

![スクリーンショット 2014-11-02 10.42.31.png](https://qiita-image-store.s3.amazonaws.com/0/36593/83a6d85e-4df2-7469-b6a1-4c882b29cfde.png "スクリーンショット 2014-11-02 10.42.31.png")

削除だけしてiPhone5s以下で起動すると(OSは8, 7関係なし)以下のように上下に黒い帯が出来てしまいフルスクリーンでの起動ができなくなります。

![スクリーンショット 2014-11-02 10.43.13.png](https://qiita-image-store.s3.amazonaws.com/0/36593/a14b3731-affa-7933-08a1-65894017ac1c.png "スクリーンショット 2014-11-02 10.43.13.png")

原因としては起動画面のリソースを見てアプリの表示サイズを決定していることのようです。

Qiitaにも関連する記事がありましたが、スプラッシュ画面を残す対応方法のようでした。

[Xcode 6 で新規作成したプロジェクトを iPhone 5 or 5s w/ iOS 7 上で実行すると上下に黒帯が入る](http://qiita.com/laishin17@github/items/ec8f336ab86e1bf87b65)

スプラッシュ画面を取り除いた状態での解決方法としては、App Icons and Launch Images->Launch Image Sourceから「Images」を選択することです。

![スクリーンショット 2014-11-02 10.44.07.png](https://qiita-image-store.s3.amazonaws.com/0/36593/4cb08af3-2586-82c9-5ed9-eb8a3d0f46f6.png "スクリーンショット 2014-11-02 10.44.07.png")

#### AutoLayoutで画面幅に合わせてConstraintを追加すると、iOS7以下でめり込む

次はstoryboard上でAutoLayoutを利用してUIパーツを組み込んでいく際にハマったことです。

UILabelをこちらの画像のように、画面幅いっぱいに配置します。

![スクリーンショット 2014-11-02 11.19.54.png](https://qiita-image-store.s3.amazonaws.com/0/36593/321a0bcf-8b26-71d0-5080-df0cad865f70.png "スクリーンショット 2014-11-02 11.19.54.png")

設定の際、Constraintsの画面は以下のように表示されました。

![スクリーンショット 2014-11-02 11.11.38.png](https://qiita-image-store.s3.amazonaws.com/0/36593/c53aff36-3871-588b-e55f-96865ba429f0.png "スクリーンショット 2014-11-02 11.11.38.png")

画面最大の幅に合わせたのになぜか「-16」という表記になっています。
この状態でSimulatorで起動すると、iOS8(左)とiOS7(右)で以下のように表示が異なってしまいます。

![][スクリーンショット 2014-11-02 11.13.12.png] ![][スクリーンショット 2014-11-02 11.13.35.png]

[スクリーンショット 2014-11-02 11.13.12.png]:https://qiita-image-store.s3.amazonaws.com/0/36593/5f6b307e-3f9c-3104-7071-3ff051c9ef9d.png "スクリーンショット 2014-11-02 11.13.12.png"
[スクリーンショット 2014-11-02 11.13.35.png]:https://qiita-image-store.s3.amazonaws.com/0/36593/4809d96f-466a-405f-53b8-38c7c6dabf84.png "スクリーンショット 2014-11-02 11.13.35.png"

原因としては、Xcode6のデフォルトの設定で画面の両端から内側へMarginを16ptとった位置と比較して-16ptの位置におく、という回りくどいconstraintsになっていることのようです。

この謎の-16pt問題については、Qiitaにもいくつか記事が上がっているようです。
[SizeClassesとXcode6でのAutoLayoutの謎マージン](http://qiita.com/uskiita/items/c643f5868f60b496911e)
[Auto LayoutとSize Classesで謎の-16ptの記事を読んでもわからない人向けの説明](http://qiita.com/yimajo/items/10f16629200f1beb7852)


![スクリーンショット 2014-11-02 11.40.28.png](https://qiita-image-store.s3.amazonaws.com/0/36593/f8fb726c-e526-5426-dc13-257b2a5b3f4c.png "スクリーンショット 2014-11-02 11.40.28.png")

右端のConstraintsのプロパティを見てみます。UILabelのConstraintsのプロパティをダブルクリックしてみると確かにConstraintsの比較対象にMarginが追加されてしまっていることが確認できます。

ここの「Relative to margin」のチェックを外し、Constraintの値を0にしましょう。

![スクリーンショット 2014-11-02 11.41.16.png](https://qiita-image-store.s3.amazonaws.com/0/36593/27ac9cd5-3ffb-393d-83b4-b9b61233ec90.png "スクリーンショット 2014-11-02 11.41.16.png")


この状態になれば余計なMarginを入れた状態でのConstraintsではなくなり、iOS7でも先ほどのiOS8と同じように両端が切れることなく表示されます。

![スクリーンショット 2014-11-02 11.50.17.png](https://qiita-image-store.s3.amazonaws.com/0/36593/199b948f-4a0b-df37-11d9-e994400e7bea.png "スクリーンショット 2014-11-02 11.50.17.png")

UILabelのプロパティをもう一度見てみると、先ほどの画像と比較して幅のConstraintsが「Trailing Space to Superview」「Leading Space to Superview」と変化しているのがわかります。

![スクリーンショット 2014-11-02 11.51.56.png](https://qiita-image-store.s3.amazonaws.com/0/36593/4bbda71d-420d-e006-de25-b646b7121308.png "スクリーンショット 2014-11-02 11.51.56.png")