Zenn
🫥

UIScrollViewの基本的な使い方

2024/02/12に公開
iOS
Xcode
メモ
storyboard
tech

StoryboardでのUIScrollViewの使い方を記載します。

環境

【Xcode】 15.2
【Swift】 5.9.2
【iOS】 17.2
【macOS】 Sonoma バージョン 14.3

完成イメージ

上 下

ステップ１：　UIScrollViewを配置する

  1. 右上の＋ボタンを選択し、「scrollView」と検索をかける
  2. 画面に中央付近にScrollViewをドラック＆ドロップ

ステップ2：　UIScrollViewに制約をつける

  1. 右下の「Add New Constraints」ボタンを選択
  2. 上下左右のConstraintsを０にする
  3. 「Add 4 Constraints」を選択

ステップ3：　UIScrollViewを適当な大きさに広げる

ステップ4：　UIScrollView内のUIViewを配置する

  1. 右上の＋ボタンを選択し、「UIView」と検索をかける
  2. UIScrollViewにUIViewをドラック＆ドロップ

UIViewの領域がわかりやすいように色をつけておいてもいいかも

ステップ5：　UIViewに制約をつける

  1. 右下の「Add New Constraints」ボタンを選択
  2. 以下の手順で上下左右のConstraintsを０にする
    3. 「ScrollView」を選択
    4. Constraintsを０にする
  3. 「Add 4 Constraints」を選択

ステップ6：　UIScrollViewとUIViewに制約をつける

  1. UIScrollViewを選択し、cmdを押しながらUIViewを選択
  2. 右下の「Add New Constraints」ボタンを選択
  3. 「Equal Widths」を選択
  4. 「Add 4 Constraints」を選択

ステップ7：　UIViewに高さを設定する

  1. UIViewを選択
  2. 右下の「Add New Constraints」ボタンを選択
  3. 「Height」を1000に設定（どんな値でもいいが、端末の高さよりも高い方が良い）
  4. 「Add 4 Constraints」を選択

ステップ7：　UIView内のViewを配置していく

  1. 右上の＋ボタンを選択し、「UILabel」と検索をかける
  2. UIView内にドラック＆ドロップ
  3. UILabelに適当な文字列を設定し、わかりやすいように背景色を変更
  4. 右下の「Add New Constraints」ボタンを選択
  5. 上左右のConstraintsを5０にする(設定値はなんでもいい)

  1. 「Lines」を０にする(改行されるようにする)

  1. 手順1~6を必要数繰り返す
  2. 最後のUILabelに対して、下のConstraintsを1０にする(設定値はなんでもいい)

ステップ8：　UIViewの高さを削除する

  1. UIViewを選択
  2. 高さの制約を削除

これでスクロールされるようになる。

Discussion