1428 文字
7 分
メモ:UIkitでスクロールさせる方法
2024-06-30
WARNING

ド素人が書いた記事です。「おい!もっと良いやり方あるやろが!?」と思うかもしれませんが勘弁してください。 あとやり方が間違えていたらコメント欄で指摘してくださると助かります。。。!

普通に制約をつける場合(ContainerView編+縦スクロール)#

https://qiita.com/Swift-User/items/67a5dd3d9eabf513aa2c この記事を書いてくださった方が非常に分かりやすいのでこのセクションのやり方はこっちを見てもらえればいいのだが、一点だけ躓いた部分があったので再度共有しておく。

1#

ScrollViewを設置ScrollViewにつける制約
CleanShot 2024-06-30 at 00.38.47@2x.pngCleanShot 2024-06-30 at 00.40.01@2x.png

ViewControllerにScrollViewを配置してAutolayoutで制約をつける。 (今回は全体に配置したいから上下左右0でいいな)

2#

CleanShot 2024-06-30 at 00.40.58@2x.png 設置できたと思ったら何故か制約エラーが出やがる。

3#

エラー内容ガバガバ翻訳
CleanShot 2024-06-30 at 00.41.31@2x.pngCleanShot 2024-06-30 at 00.42.11@2x.png

エラーを見てみると “Has ambiguous scrollable content height and width” となっており英検すら受けたこと無い俺は理解できないのでGoogle翻訳に聞いたところ(文章めちゃくちゃ) Xcode「スクロール可能なコンテンツの高さと幅が曖昧やでー」と言っている。

4#

CleanShot 2024-06-30 at 00.45.08@2x.png

とりあえず初心者なのでこのエラーはガン無視するとして(よくないが) ScrollViewの中にContainerViewを配置する。 CleanShot 2024-06-30 at 00.45.49@2x.png ここまで無事にできていればこのような構成になっているはず。

5#

CleanShot 2024-06-30 at 00.48.38@2x.png ScrollViewのContent Layout GuideとContainerViewを⌘キーを押しながら同時に選択をする。 CleanShot 2024-06-30 at 00.49.30@2x.png

選択できた状態でAutolayoutのAliginを使って上下左右を固定する。(余計制約エラーが増えるがこの後の手順で消えるので大丈夫)

6#

CleanShot 2024-06-30 at 00.51.10.gif 次にContainerViewから左クリックorkCtrlキーを押しながらFrameLayoutGuideに青い線を伸ばし、Equal Widthsを選択する。

7(ココ重要)#

CleanShot 2024-06-30 at 00.54.31@2x.png

・・・とここまではさっきの引用した記事どおりなのだがココで記事にはない現象が起こってしまう なぜかContainerViewが左にずれる現象が起こってしまう感じ。 これを解消する場合は CleanShot 2024-06-30 at 00.56.13@2x.png ContainerViewのWidthの部分が怪しいので CleanShot 2024-06-30 at 00.56.47@2x.png 0.6・・・・・の部分を「1」に変更する CleanShot 2024-06-30 at 00.57.28@2x.png そうするといい感じになったはずや

8#

CleanShot 2024-06-30 at 00.58.09@2x.png あとはContainerViewにHeightの制約(ココでは大げさに2000にしてる)をつけてあげればOK

9#

CleanShot 2024-06-30 at 01.03.05@2x.png あとはContainerView側にUI部品を配置すればOK Simulator Screen Recording - iPhone 15 - 2024-06-30 at 01.03.55.gif こんな感じでスクロールできているはずや

普通に制約をつける場合(ContainerView編+横スクロール)#

カンの鋭いなら分かるけど、横スクロールの場合はさっきの方法の「5」までは同じで

1#

CleanShot 2024-06-30 at 01.08.49.gif ContainerViewから左クリックorkCtrlキーを押しながらFrameLayoutGuideに青い線を伸ばし、Equal Heightを選択する。(Widthじゃないよ!)

2#

CleanShot 2024-06-30 at 01.10.04@2x.png こんな感じにさっきは横長だったが、縦長になるので CleanShot 2024-06-30 at 01.10.36@2x.png この部分の制約を1に変更する。

3#

CleanShot 2024-06-30 at 01.11.26@2x.png CleanShot 2024-06-30 at 01.11.45@2x.png

あとはContainerViewにWidthの制約をつけてあげればOK

StackViewを使って縦スクロールする場合#

###1 CleanShot 2024-06-30 at 03.15.58@2x.png 親の顔より見たScrollViewをおいて上下左右制約をつける(同じく0な) ###2 CleanShot 2024-06-30 at 03.16.41@2x.png StackViewをScrollViewの中にいれる(書くのめんどくさくなってきたのでスクショ丸ごと貼り付ける)

###3 CleanShot 2024-06-30 at 03.18.29@2x.png Content Layout GuideとStackViewを⌘キーで同時選択してAutolayoutのAliginを使って上下左右を固定する。 CleanShot 2024-06-30 at 03.19.27@2x.png こんな感じになればおk ###4 CleanShot 2024-06-30 at 03.20.06@2x.png StackViewとFrame Layout Guideを⌘キーで同時選択して CleanShot 2024-06-30 at 03.20.37@2x.png Equal WidthsとEqual Hightsを追加する CleanShot 2024-06-30 at 03.21.27@2x.png 制約エラーが消えて「なんかいい感じじゃん」みたいになればおk ###5 CleanShot 2024-06-30 at 03.22.24@2x.png CleanShot 2024-06-30 at 03.23.30@2x.png

ただこのままだと高さの制約が被ってしまっていてスクロールできなくなるため赤部分の制約のpriorityを下げる(Highにする) CleanShot 2024-06-30 at 03.24.15@2x.png 高さの制約の部分が点々になればおk ###6 CleanShot 2024-06-30 at 03.25.43@2x.png StackViewの中にUIパーツを追加する(とりま今回はViewを2つ追加した)

###7 CleanShot 2024-06-30 at 03.26.32@2x.png このままだと制約エラーになる+今回は部品を均等に配置したいので CleanShot 2024-06-30 at 03.27.08@2x.png CleanShot 2024-06-30 at 03.27.08@2x.png

StackViewのDistributionをFillequallyに変更する

8#

CleanShot 2024-06-30 at 03.33.39@2x.png

それぞれのViewとFrame Layout Guideを⌘キーをで同時選択して CleanShot 2024-06-30 at 03.34.07@2x.png Equal WidthsとEqual Heightsを追加する

そうするとスクロール可能になっているはずだ。

9 補足#

CleanShot 2024-06-30 at 03.34.55@2x.png なぜかFillequallyにしているのにそれぞれのViewが半分になる場合は それぞれのViewに追加した制約のEqual Heightsの数値が「1」になっているか確認してほしい。 なぜかわからんが0.6・・・となったので。 これを1にすれば

結果#

Simulator Screen Recording - iPhone 15 - 2024-06-30 at 03.37.45.gif こんな感じでスクロールできるはずだ。お疲れ様です。

・・・・・スクロール実装するのにこんなに時間かかるのだるすぎる。

メモ:UIkitでスクロールさせる方法
https://tm20314.github.io/blog/posts/memo-uikit-scrollview/
作者
TumoTumo
公開日
2024-06-30
ライセンス
CC BY-NC-SA 4.0