UIScrollViewとUINavigationBarがずれた時の対応

  • 33
    Like
  • 1
    Comment
More than 1 year has passed since last update.

現象

UINavigationBarがあるViewControllerにScrollViewを全画面で置いて、
UIコンポーネントを置いていきました。
しかしStoryBoadの表示位置とビルドした時のiPhoneの画面がどうしてもずれる。
その解決方法を調べました。

UIコンポーネントの階層は

  • View(rootView)
    • ScrollView
      • View(コンテンツビュー)
        • IBコンポーネント(実際に配置するコンポーネント)

(20150719日追記)

AutoLayoutの設定はVisual Format Languageで表すと

  • H:|-(-16)-[ScrollView]-(-16)|
    • ScrollViewの水平位置はrootViewの左右の端(左右は16ポイントのマージンがあるので-16を指定)
  • V:|-[ScrollView]-|
    • ScrollViewの垂直位置はrootViewの上下の端
  • |-[View(600)]-|
    • コンテンツビューはScrollViewの上下左右の端。そして高さ横幅600ポイント
  • H:|-8-[Label]|
    • ラベルは左端から8ポイント離れる
  • V:|-153-[Label]|
    • ラベルは上から153ポイント離れる

スクリーンショット 2015-07-13 17.50.25.png

Storyboad上ではナビゲーションのすぐ下にラベル「IBと表示位置が違う」を配置しました。

アプリを実行した際の表示

iOS Simulator Screen Shot 2015.07.13 17.54.47.png

実行した際のレイアウトはラベルがナビゲーションのかなり下に来てしまいました。
(ナビゲーションと同じ距離離れている??)

解決方法

ViewControllerのAttributesInspectorにある
Layout > Adust Scroll View Insets
をオフにするとIBでの表示と同じになりました。

スクリーンショット 2015-07-13 18.12.29.png

 Adust Scroll View Insetsをオフにしてのアプリ実行表示

iOS Simulator Screen Shot 2015.07.13 17.54.33.png

仕組み

Adjust Scroll View InsetsとUnder Top Barsの両方にチェックをした場合に
contentInsets.topが調整されて
UIScrollはナビゲーションバーの下から始まるようです。
なので、Adjust Scroll View Insetsはオフにしたほうがいいようです。

参考

やはりお前らのiOS7対応は間違っている(解説編)
http://qiita.com/yimajo/items/254c7cebab7864678246