UIWindow を拡張して iOS アプリのスクリーン解像度を高める

UIWindow はアプリの View ヒエラルキーの頂点に位置しており、通常はアレンジを加えたりすることはありません。しかし、 UIWindow に対して CGAffine Transform による拡大・縮小と frame のサイズ変更を組み合わせることで、擬似的にアプリのスクリーン解像度を高めることができます。

この記事ではより多くのコンテンツを表示するためにどのように UIWindow をアレンジしていくかを解説します。

UIWindow のアレンジ

Apple の UIKit カタログアプリをターゲットとして、UIWindowにアレンジを加えていきます。 まず、アレンジを加えない初期状態では以下のような表示になります。

f:id:watanabetoshinori:20180616005409p:plain

ここから、アプリの UIWindow に対して CGAffine Transform を使用して 0.5 倍に縮小すると、半分の表示領域に縮小したコンテンツが表示されます。

window.transform = window.transform.scaledBy(x: 0.5, y: 0.5)

f:id:watanabetoshinori:20180617000549p:plain

この状態で UIWindow の表示領域を拡大するとどうなるでしょうか。frame の縦横をぞれぞれ 1.5 倍に拡大すると以下のようになります。

var frame = window.frame
frame.size = CGSize(width: frame.width * 1.5, height: frame.height * 1.5)
window.frame = frame

f:id:watanabetoshinori:20180617000605p:plain

表示領域が 1.5 倍に拡大されましたが、コンテンツは縮小されたままです。つまり、初期状態の1.5倍に相当するコンテンツが表示されています。

さらに frame の縦横を 2.0 倍、つまり画面サイズと同じ大きさにまで拡大すると以下のようになります。

window.frame = UIScreen.main.bounds

f:id:watanabetoshinori:20180616005558p:plain

Split View を使用している画面だったため、iPad のように左右分割された表示に切り替わっていますが、初期状態と同じ表示領域にコンテンツが縮小されたまま表示されています。表示されているコンテンツは初期状態の2倍に相当します。

このように UIWindow をアレンジすることで、アプリ全体のコンテンツ表示量を増やすことができます。

コード

UIWindow へのアレンジを scale プロパティとしてまとめたのが以下のコードになります。

gist.github.com

このコードをプロジェクトに追加して、UIWindow の scale プロパティに値を設定すると使用できます。

UIScreen.main.keyWindow!.scale = 0.5

初期状態では scale の値は 1.0 になっています。 scale の設定値と、コンテンツの表示例は以下の通りです。

スクリーンショット

1) scale = 1.0 (初期状態・等倍)

f:id:watanabetoshinori:20180616005409p:plain

2) scale = 0.75

f:id:watanabetoshinori:20180616005538p:plain

3) scale = 0.5

f:id:watanabetoshinori:20180616005558p:plain

4) scale = 1.5

f:id:watanabetoshinori:20180616005614p:plain

scale の値に応じてコンテンツがスケーリングされ、全体の表示量が増減します。 コンテンツの表示量が増減するとレイアウトの乱れが懸念されますが、AutoLayout が適切に設定されていればどのような値でも自動的に適切な配置が行われます。

今回は Retina ディスプレイを搭載した iPhone 7 を使用したため、scale が 0.5 の場合がドットバイドットの解像度に相当します。