完全に理解する Storyboard & UIKit (Day 14): UIScrollViewとコンテンツのスクロール

スマートフォンという物理的に小さな画面で、巨大な情報（長文の規約画面や大きな画像）を扱うために必須となるのが「スクロール」という概念です。 そのスクロール機能を提供する大元となるViewが UIScrollView です。

実は、iOS開発初心者がStoryboardとAuto Layoutを学ぶ上で、最も挫折しやすい鬼門がこのScrollViewの制約設定です。今日はそのロジックを完全に紐解きます。

1. Frame と Content Size の違い

ScrollViewを理解する上で絶対に知っておかなければならないのが、Viewが持つ2つの「サイズ」の概念です。

1. Frame Layout (フレーム): スマホの画面上に表示される「外枠（窓）」のサイズです。
2. Content Size (コンテンツサイズ): 中身のデータが実際に持つ「巻物（全体）」のサイズです。

ScrollViewがスクロールできるか（動くか）どうかは、この2つの関係性によって決まります。

• Content Size > Frame: はみ出ているため、スクロール可能（動く）。
• Content Size <= Frame: 枠内に収まっているため、スクロール不可（動かない）。

つまり、ScrollViewを動かすには、システムに対して「外枠はこれくらいだけど、中身の巻物はもっと大きいんだよ」ということをAuto Layoutを通じて伝える必要があります。

2. Storyboardでの正しいAuto Layout構築方法

iOS 11以降、ScrollViewのAuto Layout設定が整理され、2つの特別な「ガイド（Layout Guide）」が追加されました。これを使って構築します。

ステップ1: ScrollView自体の配置（窓の位置を決める）

1. キャンバスに Scroll View を配置します。
2. 親ビュー（Safe Areaなど）に対して、Top, Bottom, Leading, Trailing の制約をつけます（例えば全画面：0, 0, 0, 0）。
   • この時点で ScrollViewの Frame（外枠）が確定しました。

ステップ2: 中身をまとめる Content View の配置（巻物の作成）

ScrollViewの直下にボタンやラベルをバラバラに配置すると制約が複雑化（破綻）するため、中身を全て包み込む「1つの箱」を挟みます。

1. ScrollViewの 中 に、ただの UIView をドロップします。（名前を "Content View" と付けると分かりやすいです）

ステップ3: 窓と巻物を繋ぐ「2種類のGuide」制約

ここが最重要ポイントです。Content View を選択し、ドキュメントアウトライン上の ScrollView の中にある2つの Guide に対して、Control+ドラッグで制約を繋ぎます。

① Content Layout Guide (中身の広さの基準) と繋ぐ

• Content View から Content Layout Guide へドラッグし、Top, Bottom, Leading, Trailing の4点全てを「余白0（Equal）」で繋ぎます。
• 意味: 「中身のビュー（巻物）の先端から終端までが、ScrollView内部の許容量です」という宣言です。

② Frame Layout Guide (外枠の基準) と繋ぐ 今のままだと「縦にスクロールしたいのか、横にスクロールしたいのか」がシステムに伝わっていません（例えば縦スクロールさせたいなら、横幅は画面枠と同じでなければならない）。

• 縦スクロールのみにしたい場合: Content View から Frame Layout Guide へドラッグし、Equal Widths（幅を同じにする） 制約を付けます。

ステップ4: 中身のサイズを確定させる

あとは Content View の中に、ラベルやボタン、Stack Viewなどを自由に配置してAuto Layoutを組みます。 絶対条件は、Content View の内部の要素が、一番上（Top）から一番下（Bottom）まで制約でビッシリ繋がっていて、全体の「高さ」が計算できる状態になっていることです。

中身の高さが外枠（Frame）を超えれば、自動的にスクロールするようになります！

3. コードでプロパティを制御する

スクロールの挙動自体は様々な変更が可能です。

swift
@IBOutlet weak var myScrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

    // スクロールバーを見えなくする
    myScrollView.showsVerticalScrollIndicator = false
    myScrollView.showsHorizontalScrollIndicator = false

    // ページ単位でパキッパキッとスクロールさせる（写真アプリやホーム画面のような挙動）
    myScrollView.isPagingEnabled = true

    // スクロール端のゴム紐のようなバウンス（跳ね返り）効果を消す
    myScrollView.bounces = false
}

📝 今日のまとめ

• ScrollViewには「外側の窓 (Frame)」と「中の巻物 (Content Size)」の概念がある。
• ScrollViewの中に全てを包む Content View (UIView) を1つ配置するのが鉄則。
• Content View の四方を Content Layout Guide に繋ぐ。
• 縦スクロールなら、Content View の幅を Frame Layout Guide の幅（Equal Widths）と繋ぐ。
• 中身の制約が上から下まで繋がることで、Content Sizeが高さを持ち、スクロール可能になる。

最大の難関であるScrollViewのAuto Layoutを克服しました。実は Day 12 で登場した UITextView も、これから学ぶリスト表示UIも、すべて内部的にはこの UIScrollView を継承しています。 明日の Day 15 では、iOSアプリのUIの王様とも言えるリスト表示コンポーネント、UITableView の基礎に突入します！