【Xcode/Swift】StoryboardでのUIScrollViewの使い方~中身のViewに応じて良い感じに表示する~

この記事では、今更という感じですがStoryboardを使ったUIScrollViewの使い方を解説していきたいと思います。

最近、StoryboardにてUIScrollViewを使う機会が結構あるのですが、毎回記事を見ながらじゃないとうまく作れないしちょっとめんどくさいので、UIScrollViewを使う手順書的な感じでまとめていきたいと思います。

以下のような画面を作成する手順を紹介していきたいと思います。

UIScrollViewの実装方法

STEP.1

まずはUIScrollViewを配置します。

①右上の+ボタンをクリック(command + shift + L)
②ScrollViewを画面の真ん中ら辺にドラッグ&ドロップ

STEP.2

①ScrollViewを選択
Autolayout (Add New Constraints)をクリック
③上下左右全て0に設定する
④Add 4 Constraintsをクリック

まだここでは制約がエラーになっていますがご安心を

STEP.3

ScrollViewを以下のように画面からはみ出ない程度に広げてください。

STEP.4

次にScrollViewの上のViewを配置します。

command + shift + Lを押してオブジェクトウィンドウを表示し、ScrollViewの上にViewをドラッグ&ドロップ

STEP.5

ViewとScrollViewが同じような色なので分かりづらいです。なので、Viewに色をつけておきましょう。

①Viewをクリック
Show (Show the Attributes inspector)をクリック
③Backgroundをオレンジに変更

STEP.6

ViewにAutoLayoutをつけます。ここが一番重要な場面なので、慎重に行ってください!

①Viewをクリック
Autolayout (Add New Constraints)をクリック
③数値の右側の∨をクリック
④全てScrollViewにチェックを入れる
⑤全て0にする

⑥Add 4 Constraintsをクリック

いつもここの指定を忘れてしまってScrollViewがうまくかないことが多いです。

制約をつけるとこのような感じになります。まだエラーなのでご安心を

STEP.7

①commandを押しながらScrollViewとViewをクリックして複数選択
Autolayout (Add New Constraints)をクリック
③Equal Widthsにチェック
④Add 1 Constraintをクリック

現時点でもエラーなのでご安心を

STEP.8

①Viewを選択
Autolayout (Add New Constraints)をクリック
③Heightを1500に設定
④Add 1 Constraintをクリック

これでScrollViewの制約にエラーがなくなりました!

これで、ScrollViewをうまく配置することができました。

上記の手順でScrollViewが作れますが、現状、高さが1500ピクセル固定になってしまっています。要は中のオブジェクトが何もない状態でも1500ピクセルスクロールできてしまいます。

これだと、ちょっと良くないので中にオブジェクトを配置し、そのオブジェクトの高さと上下の制約でScrollViewの高さを決めるようにしてちょうど良くしていきましょう。

STEP.1

command + shift + Lでオブジェクトウィンドを開き、Viewを画面の上にドラッグ&ドロップ

STEP.2

optionを押しながらドラッグ&ドロップしてViewを複製

STEP.3

次にそれぞれのViewに制約をつけていきます。

一番上は、上に50、左右に20でつけてください。

二つ目も、上に50、左右に20をつけてください。

三つ目も同じく、上に50、左右に20をつけてください。

一番下は、上に50、左右に20、下に50をつけましょう。

STEP.4

commandを押しながら全てのViewを複数選択
②Heihgtを50に設定

こうすると、エラーになります。

理由としては、ScrollViewの中のViewの高さは1500という指定なのに、中身の制約が上から50、150、50、150、50、150、50、150、50の850だからです。ここで矛盾が生じてしまっているからエラーになります。

STEP.5

なので、scrollViewの中のViewの高さの制約を削除しましょう。

height = 1500というところを選択し、Deleteキーで削除してください。

これで実行してみると良い感じな高さになっているかと思います!