Help us understand the problem. What is going on with this article?

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

要約

  • 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした