【Xcode AutoLayout】小技3 画面サイズに応じてフォントサイズ・行間を変更する Tips

※この記事はAutoLayoutを使う上で役に立つ小技を紹介してます。AutoLayoutを少し触ったことがある方向けです。

  1. 小技1 画面サイズに応じて拡縮する
  2. 小技2 画面サイズに応じてマージンを取る
  3. 小技3 画面サイズに応じてフォントサイズ・行間を変更する(この記事)

 

第3弾です。
今回はAutoLayoutと、UILabelを使った際に、画面サイズに応じてViewのサイズが変化するのはもちろんのこと、フォントサイズと行間も変更がかかるようにします。

早速やっていきましょう。

まず、毎度おなじみの方法で、配置したUILabelが画面サイズに応じて拡縮するようにします。※わかりづらいので背景色はDark Gray、文字色はWhiteにしてます。

今回は下記のような条件で配置したいと思ってます。

行間が30で三行なので、UILabelのheightは90にしています。

フォントサイズや行間を変更する場合、Storyboardと、AutoLayoutだけでは対処できません。UILabelのサブクラスを作る必要があります。

今回、行間をStoryboardから入力できるようにしたいので、「@IBInspectable」と「@IBDesignable」を使います。
それぞれ簡単に説明しますと、

「@IBInspectable」をつけたメンバー変数はStoryboardから入力できるようになります。

「@IBDesignable」をつけたクラスは、Storyboard上で実行結果がレンダリングされるようになります。

はい、というわけで、こちらがUILabelのサブクラスです。

※ただしレンダリングはされるのですが、フォントサイズと、行間はStoryboardのViewControllerのサイズを変更しても反映されません。実際実行した時に反映されます。
あくまで基準としている4インチサイズで見た時、調整がしやすいように「@IBDesignable」を使用しています。

そしてこのクラスを先ほどStoryboardに配置した、UILabelのクラスに割り当てます。

こうすることでlineHeightが入力できるようになります。

こちらに行間を入力しましょう。入力した値によって変化するのがわかると思います。

今回は30にします。UILabelのheightを90にしているのでピッタリ入ります。

ここまで来たら完了です。
フォントサイズはコード側で変更してくれるので、実際実行した画面を並べてみます。どの画面でも同じように表示されてます。
(5S、6S、6S plusの順、拡大したい場合は画像をクリックして下さい)

画面サイズに応じてUILabelのサイズ、フォントのサイズ、行間が変化しているのがわかると思います。
といってもわかりづらいので、ただのフォントサイズだけ変化しない場合どうなるかも貼っておきます。

最後に

Storyboard上で全てを確認できないのが痛いですが、こうすることでUILabelも一つのStoryboardで対応できるようになるので、保守が楽になって良いと思います。

●この記事を書いた人