100
87

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 3 years have passed since last update.

Xcode11のIBに追加されたContentLayoutGuideとFrameLayoutGuideについて

Posted at

要約

  • Xcode11からIBでUIScrollViewを使うときはContent Layout GuideFrame Layout Guideを利用するといいかも
  • iOS10以下をサポートしたい時は今までとちょっとやり方が変わったから気をつけよう

IB + UIScrollViewは大変

例として、夏目漱石の「我輩は猫である」を表示するだけの画面を作ってみます。
ここではXcode10.2を使用しています。

01.png

この画面は、UIScrollViewContentView(UIView)、2つのUILabelで構成されています。
02.png

UIScrollViewをAutolayoutを使って組む場合、以下の制約が必要です。

  • UIScrollView自身の位置
  • UIScrollViewの中身のサイズ
  • UIScrollViewの中身の固定された横/縦幅

この制約を満たすために、以下の手順でConstraintを設定しています。

  1. UIScrollViewの上下左右をUIViewControllerViewに合わせる
  2. ContentViewの上下左右をUIScrollViewに合わせる
  3. ContentViewの横幅をUIViewControllerViewに合わせる(Equal Widths)
  4. ContentViewにオブジェクトを追加して高さを確定させる

慣れれば大したことはないのかもしれませんが、UIScrollViewが持つフレーム領域とコンテンツ領域が混ざって扱われているので、後からStoryboardをみた時どこがどうなってるんだっけ??と混乱すると思います。

ContentLayoutGuideとFrameLayoutGuideの登場

Xcode11から、ScrollViewの中にContent Layout GuideFrame Layout Guideが追加されました。
名前の通り、Content Layout GuideUIScrollViewの中身、Frame Layout GuideUIScrollViewのフレーム領域を示します。
以下の画面を見ると、中身とフレーム領域が明確に分けられていることがわかります。
03.png

これらはiOS11から追加された機能でしたが、IB上では扱えず、コード上でUIを組み立てる時しか恩恵を得られませんでした。
Xcode11ではScrollViewの中に追加されており、IBでUIScrollViewを扱う人でも使えるようになりました。

さて、先ほど作った画面をContent Layout GuideFrame Layout Guideを使うように直すとこうなります。
04.png

  1. UIScrollViewの上下左右をUIViewControllerViewに合わせる
  2. ContentView上下左右をContent Layout Guideに合わせる
  3. ContentView横幅をFrame Layout Guideに合わせる(Equal Widths)
  4. ContentViewにオブジェクトを追加して高さを確定させる

手順としては大きく変わっていないのですが、今までContentViewUIScrollViewUIViewControllerViewに合わせていたところを、それぞれのLayout Guideに合わせることで役割が明確になりました。

iOS10以下もサポートしたいんだけど。。。

残念ながら、contentLayoutGuideframeLayoutGuideはiOS11からの機能なので、iOS10以下で実行するとクラッシュします。
その場合は従来と同じ方法で実装する流れになりますが、Xcode11では上記の方法の

3 . ContentViewの横幅をUIViewControllerViewに合わせる(Equal Widths)

これをやろうとすると、そもそもEqual Widthsの項目がなくなっています(バグ?)

05.png

一時的な解決策として、Viewに対してではなくViewのSafeAreaに向けると項目が出てきますので、そっちを使っています。

参考

Scroll View Layouts With Interface Builder

100
87
2

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
100
87

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?