おもちゃラボ

Unityで遊びを作ってます

【iOS】画面のサイズに応じて文字のサイズを変更する

XcodeのAutoLayoutを使って文字を配置した場合、そのままだと画面サイズが変わっても同じフォントサイズで文字が表示されてしまいます。

これだと下図のように文字が画面からはみ出てしまったり、見切れてしまったりしまいます。ここでは、端末の画面サイズが変わったときに、自動的に文字のサイズもスケールする方法を紹介します。

f:id:nn_hokuson:20190806210143p:plain:w300 f:id:nn_hokuson:20190806210152p:plain:w206

文字を中央に固定する

まずはLabelを中央に配置して、文字サイズとAlignmentを調節します。ここではフォントサイズを120、Alignmentを中央寄せにしました。また、文字がLabel領域の中央に表示されるように、Baselineは「Align Centers」に設定しています。

f:id:nn_hokuson:20190806210256p:plain:w300

次に文字を画面中央に固定します(べつに固定するのは左上でもどこでも大丈夫です)。Labelを選択した状態で、Xcode右下のAlignメニューから「Horizontally in Container」と「Vertically in Container」にチェックを入れます。これでLabelが画面中央に表示されるようになります。
f:id:nn_hokuson:20190806210322p:plain:w350
また、画面サイズが変わってもLabelのアスペクトは固定したいので、「Add New Constraints」メニューから「Aspect Ratio」にチェックを入れます。
f:id:nn_hokuson:20190806210334p:plain:w350

自動的に文字サイズを変更する

画面サイズによって文字サイズを自動的に変更するには、Autoshrinkのドロップダウンメニューを「Minimum Font Scale」に設定します。これによってLabelの領域が小さくなると、そのサイズに応じて文字のフォントサイズも縮小されます。

f:id:nn_hokuson:20190806210451p:plain:w300

今の状態では画面のサイズが変わってもLabelの領域は変わりません。画面サイズに比例してLabelの領域も変わるように設定します。Xcodeの左側のLabelメニューからControlキーを押しながらViewにドラッグして「Equal Widths」を選択します。

f:id:nn_hokuson:20190806210502g:plain:w300

最後に今設定した「Proportional Width to SuperView」のMultiplierに「Labelの横幅 / 画面の幅」の値を設定します。ここでは画面幅が1024px、Labelの幅が614pxだったので614/1024=0.8を設定しています。

f:id:nn_hokuson:20190806210519p:plain:w300

これで画面サイズに応じて文字のサイズが自動的に拡縮されるようになりました。シミュレータで変更して試してみてください。

f:id:nn_hokuson:20190806210529p:plain:w300 f:id:nn_hokuson:20190806210537p:plain:w213