メモ:UIkitでスクロールさせる方法

1428文字7分
WARNING

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

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

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

1#

ScrollViewを設置ScrollViewにつける制約
1の画面1の画面

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

2#

2の画面 設置できたと思ったら何故か制約エラーが出やがる。

3#

エラー内容ガバガバ翻訳
3の画面3の画面

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

4#

4の画面

とりあえず初心者なのでこのエラーはガン無視するとして(よくないが) ScrollViewの中にContainerViewを配置する。 4の画面 ここまで無事にできていればこのような構成になっているはず。

5#

5の画面 ScrollViewのContent Layout GuideとContainerViewを⌘キーを押しながら同時に選択をする。 5の画面

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

6#

6の画面 次にContainerViewから左クリックorkCtrlキーを押しながらFrameLayoutGuideに青い線を伸ばし、Equal Widthsを選択する。

7(ココ重要)#

7(ココ重要)の画面

・・・とここまではさっきの引用した記事どおりなのだがココで記事にはない現象が起こってしまう なぜかContainerViewが左にずれる現象が起こってしまう感じ。 これを解消する場合は 7(ココ重要)の画面 ContainerViewのWidthの部分が怪しいので 7(ココ重要)の画面 0.6・・・・・の部分を「1」に変更する 7(ココ重要)の画面 そうするといい感じになったはずや

8#

8の画面 あとはContainerViewにHeightの制約(ココでは大げさに2000にしてる)をつけてあげればOK

9#

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

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

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

1#

1の画面 ContainerViewから左クリックorkCtrlキーを押しながらFrameLayoutGuideに青い線を伸ばし、Equal Heightを選択する。(Widthじゃないよ!)

2#

2の画面 こんな感じにさっきは横長だったが、縦長になるので 2の画面 この部分の制約を1に変更する。

3#

3の画面 3の画面

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

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

###1 StackViewを使って縦スクロールする場合の画面 親の顔より見たScrollViewをおいて上下左右制約をつける(同じく0な) ###2 StackViewを使って縦スクロールする場合の画面 StackViewをScrollViewの中にいれる(書くのめんどくさくなってきたのでスクショ丸ごと貼り付ける)

###3 StackViewを使って縦スクロールする場合の画面 Content Layout GuideとStackViewを⌘キーで同時選択してAutolayoutのAliginを使って上下左右を固定する。 StackViewを使って縦スクロールする場合の画面 こんな感じになればおk ###4 StackViewを使って縦スクロールする場合の画面 StackViewとFrame Layout Guideを⌘キーで同時選択して StackViewを使って縦スクロールする場合の画面 Equal WidthsとEqual Hightsを追加する StackViewを使って縦スクロールする場合の画面 制約エラーが消えて「なんかいい感じじゃん」みたいになればおk ###5 StackViewを使って縦スクロールする場合の画面 StackViewを使って縦スクロールする場合の画面

ただこのままだと高さの制約が被ってしまっていてスクロールできなくなるため赤部分の制約のpriorityを下げる(Highにする) StackViewを使って縦スクロールする場合の画面 高さの制約の部分が点々になればおk ###6 StackViewを使って縦スクロールする場合の画面 StackViewの中にUIパーツを追加する(とりま今回はViewを2つ追加した)

###7 StackViewを使って縦スクロールする場合の画面 このままだと制約エラーになる+今回は部品を均等に配置したいので StackViewを使って縦スクロールする場合の画面 StackViewを使って縦スクロールする場合の画面

StackViewのDistributionをFillequallyに変更する

8#

8の画面

それぞれのViewとFrame Layout Guideを⌘キーをで同時選択して 8の画面 Equal WidthsとEqual Heightsを追加する

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

9 補足#

9 補足の画面 なぜかFillequallyにしているのにそれぞれのViewが半分になる場合は それぞれのViewに追加した制約のEqual Heightsの数値が「1」になっているか確認してほしい。 なぜかわからんが0.6・・・となったので。 これを1にすれば

結果#

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

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

記事一覧へ