Auto LayoutのIntrinsic Content Size

Satsuki Hashiba
5 min readJun 3, 2019

--

この記事では、Auto Layoutにて利用されるIntrinsic Content Sizeと、それが原因で引き起こるレイアウトエラーについて解説します。

Viewの左上にUILabelを置きたい時、Auto Layoutの制約は次のようになります。

ごく当たり前のように思われますが、UIViewでは同じようにいきません。widthとheightを決定する制約をつける必要があります。

Auto Layoutは、ある部品について以下の4つの情報を知っている or 計算できる状態にあれば、その部品をレイアウトすることができます。

  • x 座標
  • y 座標
  • Width
  • Height

となると、むしろなぜUILabelでは縦横中央揃えの制約のみでレイアウトできるのでしょうか。これにはIntrinsic Content Sizeが関係しています。

Intrinsic Content Sizeとは、部品の中身によって定まる自然なサイズのことです。例えばUILabelのIntrinsic Content Sizeは、テキストと小さなマージンを合わせたサイズになります。これのおかげで、Auto Layoutは高さや幅を計算でき、レイアウトすることができるのです。

Intrinsic Content Sizeを持つ部品は他にもあります。例えばUIButtonやUITextField, UISwitchは、その高さと幅の両方をIntrinsic Content Sizeとして定義できます。UIImageViewは、空の状態ではIntrinsic Content Sizeを持ちませんが、画像を指定するとそのサイズに設定されます。

Intrinsic Content Sizeを持つUI部品を複数扱う場合には、注意が必要です。例えば以下のように2つのUILabelを縦に並べて上下左右に制約をつけると、Auto Layout Issueが生じます。

superviewの高さが可変の場合には、ラベルに合わせてサイズを調整することができるので問題はありません。しかし固定の高さが指定された場合、その大きさによってはUILabelを縮めたり広げたりする必要があり、一つひとつのUILabelは自分の高さ・幅を一意に定められなくなります。レイアウト時にはその区別がつかないので、エラーになってしまいます。

これを解決するのがContent huggingContent compressionです。これらのpriorityを調整して、サイズが合わない場合にどのオブジェクトをどう調整すれば良いかを指定してあげます。

Content hugging

Content huggingはviewを内側に引っ張り、中身にぴったり合うようにします。superviewのサイズが余る場合に、Content huggingのpriorityが小さい方の部品を広げて対応します。

Content compression

Content compressionはviewを外側に押し出し、中身が見切れないようにします。superviewのサイズが足りない場合に、Content compressionのpriorityが小さい方の部品を削って対応します。

どちらの値も、priorityが大きい部品の方がコンテンツぴったりのサイズになります。また、Content huggingとContent compressionはそれぞれサイズが余る場合/足りない場合の調整に使われる値なので、一方向において2つの調整が同時に行われることはありません。

上記のエラーはxib上でのサイズやコンテンツに応じて判定されるという点に気をつけなければなりません。つまり、調整しない限りはどちらか一方だけしかエラーが出ません。superviewのサイズが固定の場合には、値を適宜設定しましょう。

参考文献

--

--

Satsuki Hashiba
Satsuki Hashiba

Written by Satsuki Hashiba

iOS Engineer 🍋 Master’s Student 🌄 Japan ⛩

No responses yet