0
2

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.

[Xcode12.4] [Swift] UIScrollViewのAutoLayoutの制約のかけかた・基本の使い方

Last updated at Posted at 2021-02-12

#はじめに
UIScrollView を使おうと思ったら、AutoLayout の制約をかけるのにつまづいてしまいました。
ここでは、Xcode 12.4 の UIScrollView の AutoLayout の制約をかける方法をまとめてます。

###環境
Xcode 12.4
macOS Big Sur 11.1 M1チップ

#実践

###1. UIScrollView の AutoLayout の制約をかける

はじめに、Storyboard の ViewController の上に ScrollView を追加します。
スクリーンショット 2021-02-12 18.53.43.png
上下左右を 0 で固定しましょう。
固定する前に手動でいっぱいまで広げておくと見やすくなります。

上に固定のヘッダーがあるアプリをよく見るので、上に imageView を置いてみました(これで合ってる分からないですが、つけてみたかったので笑)。ない場合でもやることは同じです!

そうすると、下の画像のように赤いラインで表示されてしまいます。
ここで僕はつまづいてました。

スクリーンショット 2021-02-12 18.54.41.png

次に、ScrollView が選択された状態で右の sizeページを開いて、
Content Layout Guides のチェックを外します。(画像見切れててすみません)
スクリーンショット 2021-02-12 18.55.30.png
チェックを外すと、左側の ScrollView の中の ContentLa...と FrameLay...が消えることが確認できます。

###2. Scrollview の上に View をのせる

ScrollView の中に View が入るように追加します。
スクリーンショット 2021-02-12 18.56.33.png
こちらも ScrollView と同じように上下左右を 0 で固定しましょう。
それと Height を表示したい長さにします。

親に同じ View という名前があるので、こちらの View は ContentView という名前をつけてます。

スクリーンショット 2021-02-12 18.57.20.png
次に、コントロール or 右クリック を押しながらドラッグドロップで
ContentView から View に引っ張ります。

スクリーンショット 2021-02-12 18.57.37.png

項目が表示されるので、Equal Widths を選択します。

スクリーンショット 2021-02-12 18.57.59.png

ここで赤のラインとエラーが消えれば OK です。

###3. ViewControllerのサイズを変える
これで最後です!
左の ViewController もしくは Storyboard上の上部バーのアイコンを選択して、右の sizeページにいきましょう。
スクリーンショット 2021-02-12 19.00.16.png

SimulatedSize が Fixed になってるので Freeform にします。
するとHeight の項目が出てくるので、先ほど View を追加したときに設定した Height と同じ値を入れましょう。

これで ViewController が指定した長さになります。

###完成!

ラベルなどをつけて確認してみましょう。AutoLayout も忘れずに...
スクリーンショット 2021-02-12 19.05.39.png

スクリーンショット 2021-02-12 19.06.25.png

ちゃんと下まで動きました!
他の機種で実行しても問題なく表示されました。

上のヘッダーは ScrollView の中にはないので固定されてます。
あとは View の背景色を同じ色にすれば完璧ですね。

#最後に
いかがでしたでしょうか?

ContentLayoutGuide と FrameLayoutGuide を消すのはどうなのかなと、書いてて疑問に思いました。

それは使えない・もっと簡単な方法があるなどございましたら、教えていただけるとありがたいです!
初めての投稿なので分かりづらいところがあったかもしれません。こちらもご指摘いただければと思います。

0
2
0

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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?