3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhoneでテザリング時にUIの表示崩れを見かけたので原因を探ってみる

Last updated at Posted at 2019-06-25

iPhoneでのテザリング

iPhoneでのテザリング時には画面上部にOS側で使用する領域が増える。
インターネット共有: X台接続中の分、画面が縦に狭くなる。

通常時 テザリング時
Screen Shot 2019-06-25 at 17.01.05.png Screen Shot 2019-06-25 at 17.00.28.png

|

これが影響し、以下のような挙動のアプリを割と見かける。

  • スプラッシュ画面のロゴの中段が潰れる
  • スクロールが最上部/最下部までスクロールできない
  • 画面上部が潰れる
  • フッタボタン群が一部しか表示されない
  • 下スクロール時にフッタボタン群が隠れるような動作をする場合、上スクロールでフッタボタン群が一部しか表示されない
通常時 テザリング時
Screen Shot 2019-06-25 at 16.54.36.png Screen Shot 2019-06-25 at 16.55.00.png

原因を推測してみる

表示だけの問題で、UI操作自体には問題ないようなので、
高さ取得に問題があると推測する。

検証

コードで通常時/テザリング時の画面の高さを取得する。
検証時の端末:iPhone 8 Plus(iOS12.3.2)

高さ取得 コード 通常時 テザリング時
画面の高さ UIScreen.main.bounds.size.height 568 568
ディスプレイの高さ UIScreen.main.nativeBounds.size.height 1481 1481
基底viewの高さ ViewController#view.frame.height 568 548

違いがあるのは、基底viewの高さのみ。

iPhone Xシリーズでの検証をしていませんが、
見た目では、テザリング時にOSが使用する領域は変わらないため、
表示上の問題はなさそうです。
(テザリング時はSafe Areaの表示領域が変わらず見た目が変わるだけです)

対策案

(実際にコードを書いて対策案を検証した訳ではないため、現段階では案のみです)

画面の大きさを取得し、それを元に表示領域を判定する
テザリング時に表示領域が狭くなった場合に、
画面自体の大きさは変わっていないため、
表示やUI操作に問題が発生する可能性があります。

また、アプリ画面表示中に別のiPhoneからの操作により、
突然テザリング時の表示に切り替わるため、
画面初期表示時の基底viewの高さもあてになりません。

これらに柔軟に対応するためには、
AutoLayoutNSLayoutConstraintで画面を定義し、
自動的にサイズや位置を調整したり、
NSLayoutConstraintで上限/下限などを定義などの対策になると思われます。

追記:対策案2

  • UIApplication.didChangeStatusBarFrameNotification

OSが使用するステータスバーの表示領域変更を検知できるので、
アプリ画面表示中の突然のテザリング表示への切り替わりに対応できます。

追記:メモ

  • テザリングの他にも通話中のアプリ操作も同様に、画面上部のステータスバーの領域が増える
  • iOSシミュレータのHardware/Toggle in-call Status Barで再現できるため、実機検証より手軽
3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?