![見出し画像](https://assets.st-note.com/production/uploads/images/99980377/rectangle_large_type_2_33c648a0748dd40adb70821e352bf65d.png?width=1200)
【徒然iOS】気ままにUIKit41〜Scroll View基本〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をハイ、レッツゴ!🕺
前準備
念の為、バックアップ
新しいクラス
ビューコントローラの追加
イニシャルビューの変更
をいつも通りやってから本題へ💃
![](https://assets.st-note.com/img/1678499619884-eqQdGbu5ng.png?width=1200)
ScrollViewとは
自分より大きい部品をスクロールして見ることができるビュー
👉フリックでスクロールさせる
本題
⒈検証用の画像をAssetにセット
![](https://assets.st-note.com/img/1678499821627-n9gI5NLVse.png?width=1200)
![](https://assets.st-note.com/img/1678499871824-4Dw67DzpfP.png?width=1200)
⒉スクロールビューを配置
![](https://assets.st-note.com/img/1678500042695-48a1gvSCoJ.png?width=1200)
![](https://assets.st-note.com/img/1678500061951-vuH9634nN6.png?width=1200)
![](https://assets.st-note.com/img/1678500076710-hexJV63ZDX.png?width=1200)
⒊Paging Enabledにチェックを入れる。
チェックを入れることで、
画面のスライドモーションがページが切り替わったところでピタッと止まる
ようになる。
![](https://assets.st-note.com/img/1678500176266-kmRQl1IDiJ.png)
⒋イメージビューをスクロールビューの中に配置
![](https://assets.st-note.com/img/1678500258820-hgh2kqVq54.png?width=1200)
![](https://assets.st-note.com/img/1678500291813-skIkxSA9Dv.png?width=1200)
![](https://assets.st-note.com/img/1678500324890-EN9ABHwTrg.png?width=1200)
⒌以下の制約を付ける。
Constraint to marginsのチェックを外す。
スクロールビューからの上下左右の距離をすべて0に設定。
WidthとHeightにチェックを入れる
Widthには960、Heightには1000を入力。
距離の数値を入力するときは、どこからの距離かを確認する
👉「▼」をクリックして「Scroll View」にチェックが入っていることを確かめる
![](https://assets.st-note.com/img/1678500778069-gh4IoAXazO.png?width=1200)
![](https://assets.st-note.com/img/1678500873112-cyOdxHdqR6.png?width=1200)
![](https://assets.st-note.com/img/1678500904050-mPJuHDhFxQ.png?width=1200)
![](https://assets.st-note.com/img/1678500937282-Rzl7BFBbTo.png?width=1200)
![](https://assets.st-note.com/img/1678500958097-1FwnAkZffH.png?width=1200)
⒍シミュレータで実行
![](https://assets.st-note.com/img/1678501080755-dcASLEVZ4b.png?width=1200)
![](https://assets.st-note.com/img/1678501115415-aNC6LX7lEs.png?width=1200)
![](https://assets.st-note.com/img/1678501161437-mtj85PsEpk.png?width=1200)
ハイ、完了🕺
⒎ブラッシュアップ
は、すでに⒌で今回もやってるので割愛💦
今回のコード
ここまで読んでもらってわかるとおり、
特になし
裏を返せば、
単純にスクロールビューを使うだけならば、
コードなし=ノーコード
でできるってことがこの記事でイメージしてもらえれば今回は十分🕺
簡単でしょ?👀💦
この連載は、
難易度とか作業の重さとかではなく、あくまでも
UIKit標準機能を網羅する=網羅性
を意識してるので、こういう簡単そうな記事でもしっかり書いてる〜〜〜
所詮、
気ままな趣味
ってのもあるけど、
ScrollViewはアプリ開発でも非常によく使う
ので、しっかりやる🕺
Apple公式
さて、次回は
をレッツゴ💃
嫁にカブの煮物を作ってる最中なので、午前中はここまで。
午後にまた気が向いたら続きの記事を書きまする🙇
![](https://assets.st-note.com/production/uploads/images/99984567/picture_pc_6a6d40995457eb527edaa28d4bfcd358.jpg?width=1200)
カブの菜葉胡麻油炒め
カブの皮のきんぴら
カブのトロトロ煮込み