Autolayout＋UIScrollView＋UINavigationBarで 不要な余白

ハマったことシリーズ No16.

今回は、Stroryboardで UIScrollViewを貼ったときに 不要な余白が入っちゃったお話です。

ヘルプ的なものを縦に長い画像で作り、それを縦スクロールで見てもらうことにしました。　このくらいはコード不要で出来るかなと調べると、とても参考になる記事が！　ありがたや。

　[iOS]　Storyboard上で UIScrollViewを設定する

基本的には　このとおりやれば出来ます。　少し悩んだのが、UIImageViewの"高さ"の制約。　画像は事前に用意したものですが、参考記事のように高さの制約を絶対値で入れると、画像のアスペクト比が狂ってしまいます。UIImageViewにAspectFillを設定してもAutolayoutの計算には使ってくれないようで、UIImageViewのAspect比の制約を自分でちゃんと設定する必要があります。

これで出来上がりと思ったら、上部に不思議な余白が。。。　　UIScrollViewの地色が見えていました。

UIScrollViewの上部制約をいつもの調子で Top Layout Guideに合わせたのが原因でした。　ただ、storyboard画面では綺麗にレイアウトされて見えるし、というか逆にSuperviewの上部に合わせると　下図のように 画像の上部が見えないし・・・、しばらく悩みました。

余白の高さは　ナビゲーションバーの高さっぽいところでピンッと来て、試しにUIScrollViewの上部制約をSuperviewの上部に合わせてみると解決しました。

ナビバーがあるとUIViewControllerのルートに乗ってるUIViewが、縮み　さらにTop Layout Guideの位置が、すなわち UIScrollViewの上部が下がるのでしょうかね？　　　っと言っても…、スクロールビューが下がり　ルートViewが見えてるわけでもなく。。。。　ちょっと意味不明。　　contentSizeとかがズレるのでしょうか。。。
ちょっと疑問点が残りますが、上手く行ったということでｗｗｗ

Read More