LoginSignup
11
11

More than 5 years have passed since last update.

storyboardだけ:iOS6/7、3.5インチ/4インチ対応

Last updated at Posted at 2014-09-04

はじめに

AutoLayout機能はiOS6以上でサポートされています。

コード書きたくないでござる、な方に

  • 3.5インチと4インチ両方に対応
  • UIScrollViewを使う

上記場合の一番簡単な設定方法です。
iPhoneアプリとしての設定、また、iPadで表示したときにどう見えるかも確認しています。

環境

  • Xcode5

Xcode

プロジェクトを新規作成します。
今回は Single View Applicationを選びました。

スクリーンショット 2014-09-04 8.20.23.png

  • Deployment target iOS6
  • iPhoneのみ で作ります

storyboard

構成は、Viewの直下にScrollViewをしいて領域の判定のためにViewを重ねます。

スクリーンショット 2014-09-04 8.34.50.png

statusBar

UIScrollViewはStatusBarの表示分をあけます

スクリーンショット 2014-09-04 8.41.58.png

端末の表示領域

Viewは3.5インチ表示だとはみ出て、4インチ表示だと短いくらいに
下の画像は4インチです。

スクリーンショット 2014-09-04 8.46.47.png

こちらは3.5インチです。

スクリーンショット 2014-09-04 8.47.09.png

画面全体のサイズでなく、Viewの伸縮に寄って表示領域が切り取られています。

AutoLayout

ScrollView

Constrainsを設定します。
さわるのは縦横、上下のSpaceのみです。Add 4 Constrains ボタンで追加。
スクリーンショット 2014-09-04 9.03.12.png

ScrollView内のView

同じく、縦横、上下の間隔を設定し、加えてViewのwidth、heightも追加。
Add 6 Constrains ボタンで追加。
スクリーンショット 2014-09-04 9.07.47.png

Constrainsの設定を確認

ScrollView

  • ScrollViewの設定(画面上の青枠)
  • ScrollViewに含まれるViewの情報(画面上の緑枠)

が一緒に表示されています。

スクリーンショット 2014-09-04 9.32.04のコピー.png

ScrollView内のView

設定が全部入っています。
width:幅やheight:高さの設定もこちらで確認できます。

スクリーンショット 2014-09-04 9.45.49.png

これでワーニング、エラーがない状態です。

シミュレーター、実機で確認

今回はシミュレータだけなんですが、実機でもするべきです・・・。
総じて、3.5インチはスクロールしますが、4インチはViewの高さがScrollViewより小さい値なのでスクロールしません。

iOS6系

非Retina - 3.5インチ
スクリーンショット 2014-09-04 9.23.18.png

Retina - 3.5インチ
スクリーンショット 2014-09-04 9.24.13.png

Retina - 4インチ
スクリーンショット 2014-09-04 9.25.47.png

iOS7系

非Retina - 3.5インチ
スクリーンショット 2014-09-04 9.19.35.png

Retina - 3.5インチ
スクリーンショット 2014-09-04 9.56.27.png

Retina - 4インチ
スクリーンショット 2014-09-04 9.19.58.png

iPad

スクリーンショット 2014-09-04 9.26.36.png

スクリーンショット 2014-09-04 9.27.14.png

スクリーンショット 2014-09-04 9.20.32.png

さいごに

iPadでのiPhone表示は3.5インチベースなことを今さら感じました。
今回の場合はiOS6系の時はステータス分のスペースが空いてしまっています。
レイアウトで勘違いしたようなので訂正します。

こつをつかめば、StoryBoardだけの設定でもできますが
Viewに含まれるObjectが増えるとなかなか分かりにくいです。

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11