UIScreenで画面のサイズなどの情報を取得する

[UIScreen] [UIView]

iPhoneの画面サイズの取得

ストーリーボードを使わずに、画面を構成したりする場合、全ての端末に対応させるために、viewパーツを動的に配置したり、サイズを調整したりするときには画面サイズの取得は必須となります。

端末ごとのスクリーンサイズさえ取得してしまえば、あとはコードでパーツのサイズを調整させることで、レイアウトが崩れることなく配置することができます。

画面のスクリーンサイズを取得する

画面サイズを取得するのは比較的簡単にできます。 画面の縦と横が取得するコードは以下のように記述します。

ここではviewDidLoad内にコードを書いてサイズを取得しています。

↓はiPhone SE(2nd generation)のシミュレーターで実行した結果です。 /data/uploads/20200507053000.png

    // 画面の大きさ
    let width = UIScreen.main.bounds.size.width
    print("screen width : \(width)")
    let height = UIScreen.main.bounds.size.height
    print("screen height : \(height)")

    // 実際の画面の大きさ
    let native_width = UIScreen.main.nativeBounds.size.width
    print("native width : \(native_width)")
    let native_height = UIScreen.main.nativeBounds.size.height
    print("native width : \(native_height)")

    // 拡大率
    let scale = UIScreen.main.scale
    print("scale : \(scale)")
    let native_scale = UIScreen.main.nativeScale
    print("native scale : \(native_scale)")

画面のどこの大きさなのか確認する

画面サイズを取得したけど、どこまでの範囲か気になると思います。 試しに以下のコードを書いてviewをコードで画面に追加してみます。

    // viewを定義
    let screen_view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: height))
		// 背景を緑にする
    screen_view.backgroundColor = UIColor.green
		// ViewControllerの基本viewにscreen_viewを追加
    self.view.addSubview(screen_view)

/data/uploads/20200507060223.png

見ての通りのiPhoneの画面いっぱいのサイズとなりました。

セーフエリア

セーフエリアとは、iPhoneXやXS、11などに存在する上部のノッチや下部のバーを除いたアプリを表示するための画面サイズになります。iPhone7や8、iPhone SE(2nd generation)はノッチは無いのでセーフエリア=画面サイズとなりますが各端末での表示に対応するためにセーフエリアの取得は必須となります。 でないと、アプリを起動したときの表示がiPhone 11などでは上に寄ってしまったりします。

またiPhone 11 Pro Maxのシミュレーターで実行した結果は以下のようになります。

/data/uploads/20200507055818.png

viewDidLoadメソッドでは、読み込みのタイミングではセーフエリア情報は検知できないため、viewWillLayoutSubviewsメソッド(ビューの中のレイアウトが読み込まれる時)でセーフエリア情報を取得します。

セーフエリアを除いた表示領域を以下のコードを記述して取得してみます。

  override func viewWillLayoutSubviews() {
    
    let width = UIScreen.main.bounds.size.width
    let height = UIScreen.main.bounds.size.height

    let padding_top = self.view.safeAreaInsets.top
    let padding_right = self.view.safeAreaInsets.right
    let padding_bottom = self.view.safeAreaInsets.bottom
    let padding_left = self.view.safeAreaInsets.left
   
    let screen_view = UIView(frame:
      CGRect(x: 0 + padding_left,
             y: 0 + padding_top,
             width: width - padding_left - padding_right,
             height: height - padding_top - padding_bottom))
    screen_view.backgroundColor = UIColor.green
    self.view.addSubview(screen_view)
    
  }

うまくセーフエリアを除いたアプリのスペースが確認できました。

iPhone 11 Pro Maxでは画像のように緑のエリアがアプリ表示領域となります。

/data/uploads/20200507055723.png

※ なお、applicationFrameはiOS 2.0–9.0までの利用となっていてDeprecated(非推奨)です。iPhoneXが登場してから、セーフエリアの概念が出てきたため、applicationFrameではサイズを取得できなくなりました。 https://developer.apple.com/documentation/uikit/uiscreen/1617835-applicationframe

最新のアプリ開発では、上記のようなセーフエリア情報を取得して動的にビューに配置するパーツの座標を調整しましょう。

Posted_at:2020-05-08