Xibを使ったScrollViewの実装

こんにちは。
WWDCで発表された新OS BigSurが、どうもピクサーに聞こえてしまう今日この頃です。

今回は、「Xcode11における、Xibを使ってUISrollViewを実装する時の制約のかけ方」についての備忘録です。コードには制約を記述せず、Xibのみで実現しようした際に、思ったより手間取ったので手順をメモ。

いつものごとく、サンプル実装をこちらにのせています。

やりたかったこと

縦スクロールできるScrollViewが全画面で表示されるViewControllerを、Xibを使って実装したかった。動きとしては👇です。

ポイント

Xcode11からは、ScrollViewにContent Layout GuideとFrame Layout Guideが追加されました。
Content Layout GuideはScrollViewの中身の領域、Frame Layout GuideはScrollView自体のframeについてのlayout guideです。

そのため、中に表示するものの制約はContent Layout Guideに紐づけて、ScrollView自体のframeに関する制約はFrame Layout Guideに紐づける必要 があります。

ここのポイントを理解すると実装はそれほど難しくありませんでした。
具体的な手順を書いていきます。

手順

まず、Xibとクラスを紐付けるため、File's Ownerを対象のクラス指定します。
その後、File's OwnerとViewを紐づけます。

その後、ViewにUIScrollView を追加してSafeAreaに対しての制約(上下左右0)を追加します。

ScrollViewの中にViewを追加(ここではContent Viewという名前に変更)し、Content Layout Guideに対して制約(上下左右0)を追加します。
Content Viewは、ScrollViewの中に表示するものなのでContent Layout Guideに紐付けます。

そして、Content View内に高さを指定したOrange ViewとBrown Viewを追加します。

最後に、Content ViewのwidthとFrame Layout Guideのwidthに紐づけます。
高さはContent View内に存在するOrange ViewとBrown Viewの高さに依存するため、ここでは指定しません。

これで完成です🎉

「中に表示するものの制約はContent Layout Guideに紐づけて、ScrollView自体のframeに関する制約はFrame Layout Guideに紐づける」ということを覚えておけば、迷わず実装ができそうです。