AutoLayoutでUIScrollViewのPagingを画面の回転に対応させる

Written by じび on 7月 18th, 2014

UIScrollViewでPagingをONに設定している場合、制約のかけかたによっては、画面を回転させてUIScrollViewの大きさが変化すると、Paging時の移動量も変化してしまいます。そのため、中のコンテンツのページの幅が固定されていると、ページの区切り位置が合わなくなってしまいます。

縦画面だと2ページ目の位置が正しいけど・・・

iOSシミュレータのスクリーンショット 2014.07.18 21.32.03

iOSシミュレータのスクリーンショット 2014.07.18 21.32.14

横画面にすると2ページ目の位置がずれてしまう
iOSシミュレータのスクリーンショット 2014.07.18 21.46.15

iOSシミュレータのスクリーンショット 2014.07.18 21.46.22

この場合の解決方法としては、以下の2通りの方法が考えられます。

  1. 中のコンテンツのページの幅を、UIScrollViewの幅に連動して変化させる。
  2. UIScrollViewの幅を固定する。

今回は中身を変えずに済む2番の方法で考えてみました。

UIScrollViewに対して、幅を固定する制約、Y座標を画面の真ん中に固定する制約を付けます。
スクリーンショット 2014-07-18 21.51.32

スクリーンショット 2014-07-18 21.51.12

横画面にしても2ページ目がちゃんと画面の真ん中に表示されました。
iOSシミュレータのスクリーンショット 2014.07.18 21.32.24

iOSシミュレータのスクリーンショット 2014.07.18 21.32.29

サンプルコードはこちら

 

Leave a Comment