Storyboardだけでページング可能なScrollViewを定義 〜僕の場合〜


##はじめに
[この記事](http://qiita.com/hedjirog/items/a85a18ee8fcfbfab56c2)を読んで、自分とは大分やり方が違ったので紹介します。
簡単さは同じぐらいだと思うので、こういうやり方もあるんだな、と考えていただければ幸いです。

作る物は、上の記事と同じものにしており、記事の構成も、分かりやすいように元記事と似せています。

[GitHub](https://github.com/malt03/ScrollViewDemo)です。
Xcode7で作っています。

[こっち](http://qiita.com/malt/items/6468921e57a30594d037)にScrollViewにおけるAutoLayoutの仕組みまとめました。

##手順
元記事と同じように、水平方向にページング可能なScrollViewを、AutoLayoutだけを使って定義します。
この記事のStoryboardの最終形は、上の記事とは違い、以下のようになります。

![スクリーンショット 2015-08-07 20.13.36.png](https://qiita-image-store.s3.amazonaws.com/0/44356/a0c44c68-2e92-c4d1-a528-eafe2acd9887.png "スクリーンショット 2015-08-07 20.13.36.png")

2ページ目が見えていない分メンテナンスしづらいですが、制約はシンプルなことが分かるかと思います。

###1. ScrollViewを配置する
大本のViewと同じサイズのScrollViewを配置します。

![スクリーンショット 2015-08-07 20.23.35.png](https://qiita-image-store.s3.amazonaws.com/0/44356/07352346-cf23-f158-befb-b9e121441f68.png "スクリーンショット 2015-08-07 20.23.35.png")

また、ページングを有効にしておきます。

###2. ScrollViewに制約をつける
親Viewと同じサイズになるように、
上下左右の制約を0にします。

![スクリーンショット 2015-08-07 20.26.19.png](https://qiita-image-store.s3.amazonaws.com/0/44356/a8ab1ad7-a2fe-3dad-5f5a-8a7b505282f1.png "スクリーンショット 2015-08-07 20.26.19.png")

###3. ScrollView内に、親Viewを配置する
ScrollView内に、ScrollViewの中のView全てを入れるためのViewを配置します。
今後ScrollViewに子Viewを配置する場合は、このViewに配置し、ScrollView直下にはこのViewのみになるようにします。

![スクリーンショット 2015-08-07 20.31.04.png](https://qiita-image-store.s3.amazonaws.com/0/44356/e9832188-0859-6203-ebbb-d54a153565c2.png "スクリーンショット 2015-08-07 20.31.04.png")

ScrollViewと重なるように配置します。
エラーが出ますが気にしないでください。

###4. 親Viewに制約をつける
親Viewの上下左右の制約を0にします。

![スクリーンショット 2015-08-07 20.35.32.png](https://qiita-image-store.s3.amazonaws.com/0/44356/a258497a-bc65-3bd6-59b7-7764b91d849e.png "スクリーンショット 2015-08-07 20.35.32.png")

これにより、ScrollViewのContentSize=親ViewのSizeになります。
この時点では親Viewのサイズは決まりませんので、エラーは出たままです。

###5. 親Viewのheightを決める
今回は横スクロールだけなので、親ViewはScrollView自体と同じ高さになります。
なので、親ViewとScrollViewにEqual Heightsの制約をつけます。

![スクリーンショット 2015-08-07 21.06.32.png](https://qiita-image-store.s3.amazonaws.com/0/44356/6524d439-eef4-e120-d339-2defc6819fdd.png "スクリーンショット 2015-08-07 21.06.32.png")


###6. 各ページのViewを配置する
こんな感じで各ページのViewを配置します。

![スクリーンショット 2015-08-07 21.02.31.png](https://qiita-image-store.s3.amazonaws.com/0/44356/196e80a4-47d6-50a8-ee64-b649936c2b9f.png "スクリーンショット 2015-08-07 21.02.31.png")

制約をつけた後にUpdate Framesで直すので適当で良いです。
各ページの中身については、分かりやすいように表示しているだけですので、こんな良い感じにはなりません。
実際には背景色だけ変えて試してみると良いと思います。

###7. 各ページのViewに幅の制約をつける
各ページの幅は、ScrollViewと同じになるので、ScrollViewと各ページのViewにEqual Widthsの制約をそれぞれつけます。

![スクリーンショット 2015-08-07 21.10.59.png](https://qiita-image-store.s3.amazonaws.com/0/44356/f1ba3610-b769-97d2-a380-b23bec272d44.png "スクリーンショット 2015-08-07 21.10.59.png")

###8. 各ページのViewに上下左右の制約をつける
- 1ページ目と2ページ目との間に0ptの制約
- 1ページ目と親Viewに上下左0ptの制約
- 2ページ目と親Viewに上下右0ptの制約

をそれぞれ付けます。

1ページ目の制約は下の画像のようになります。

![スクリーンショット 2015-08-07 21.13.51.png](https://qiita-image-store.s3.amazonaws.com/0/44356/b45936ed-4f1d-1106-884d-115794e5d904.png "スクリーンショット 2015-08-07 21.13.51.png")

これで全ての制約がついたので、エラーがワーニングに変わるはずです。

###9. Update Framesを実行する

![スクリーンショット 2015-08-07 21.15.20.png](https://qiita-image-store.s3.amazonaws.com/0/44356/704f73e1-e844-acc7-25ef-877f144e1157.png "スクリーンショット 2015-08-07 21.15.20.png")

![スクリーンショット 2015-08-07 21.19.17.png](https://qiita-image-store.s3.amazonaws.com/0/44356/fc314372-f103-bc94-1c33-976d2ac11bb4.png "スクリーンショット 2015-08-07 21.19.17.png")


これで実行すれば、正しく動くはずです。

##まとめ
メンテナンスのしやすさを考えると、元記事のほうが良いと思います。
ただ、この記事のやり方では不要なViewや制約を付ける必要が無いので、混乱は招きづらいのではないでしょうか。

分かってしまえば簡単なのですが、ScrollView内のAutoLayoutは特殊でとても理解しづらいので、[別の記事](http://qiita.com/malt/items/6468921e57a30594d037)にまとめました。