【iOS】UIScrollViewのオートレイアウト...StackView使うと良い
スポンサーリンク

ちょっとハマったので一応記事にしておきます。

時間がないので雑です。

 

仕事で初めてScrollView使ってハマった

ScrollView使おうと思い、オートレイアウトで消耗しましたが、調べたらScrollViewのレイアウトは難しいらしいです。

どうやらStackViewを使うと上手くいくという記事を見つけました。それを見て自分で動くか確かめたものを置いておきます。

 

とりあえず完成品

まず、動きたものを置いておきます。

スクロールすると、紫色のviewの下から緑色のviewが現れるというだけのものです。

 

やり方

1.ScrollViewとStackViewの配置とオートレイアウトの設定

ViewControllerにScrollViewを置きます。

すると画像のように「Content Layout Guide」、「Frame Layout Guide」がありますが、これを消します。右側のContent Layout Guideのチェック外してください。

したら上下左右に0でレイアウトを追加してください。これで画面いっぱいに広がる。

そしたらScrollView内にStackViewを置きます。こちらも上下左右に0でレイアウトを追加。

ただし、

画像右のdistributionを「Equal Spacing」にしないと上手くいかないようです。

 

 

2.StackViewのWidthをScrollViewとイコールに

コマンドでScrollViewとStackViewを選択し「Equal Width」を追加。

コントロール押しながらドラックしても同じことできる

 

3.StackViewの中に部品を入れてみる

StackViewの中にviewなどの部品を入れないとレイアウトのエラーが解決されません。

viewを入れてみてください。

 

ちなみに、画面サイズよりも大きいサイズの部品を入れないとスクロールしません。

私はheight1200と200の2つのviewを入れました。

 

4.完成

これで正常に動くはずです。紫のviewの下からheight200の緑のviewが確認できました。

もっと丁寧な解説や詳しいロジックは私が参考にした記事を参照してください。

 

ScrollViewがスクロールしない場合

今回のような簡素なものではないと思いますが、複雑な画面だとなぜかスクロールしないことがります。

その時に注意することをまとめておきます。

 

1.「Scroll Enabled」のチェックが外れている

デフォでは入ってるはずですが、このチェックが無いとスクロールしません。チェックが入ってることを確認しましょう。

 

2.contentView(StackView内の部品)の大きさが足りない

画面をはみ出るものでないとスクロールのしようがないです。

 

3.contentViewの部品に複雑なオートレイアウトが設定されている

ScrollViewの外側にある部品とcontentViewの部品のオートレイアウトなど、入り組んだ複雑なものはなぜかスクロールしない場合がありました。(多分)

一回contentViewのオートレイアウトを切ったりして、動くかどうか確認してみても良いかも。

 

ScrollViewのプロパティなど

最後に主要プロパティのまとめを引用しておきます。

 

インスタンスプロパティー名 trueの時の内容 デフォルト値
isScrollEnabled スクロール可能 true
isDirectionalLockEnabled 最初にスクロールさせた方向(水平か垂直)のみスクロール可能 false
isPagingEnabled 1ページずつスクロールする false
scrollsToTop ステータスバーをタップすると一番上までスクロールする true
bounces スクロールがコンテンツの一番端に到達すると跳ね返る(バウンドする) true
alwaysBounceVertical コンテンツがスクロールビューよりも小さい場合でも常に垂直方向のバウンドを許可する。ただしbounces=trueであることも必要 false
alwaysBounceHorizontal コンテンツがスクロールビューよりも小さい場合でも常に水平方向のバウンドを許可する。ただしbounces=trueであることも必要 false

 

Swift(iOS)が学べるオンラインスクール ランキング
CodeCamp
CodeCamp
7〜24時まで授業可能で働きながらでも学べる!!
料金
講師の質
コースの種類
転職サポート
ポイント1エンジニア経験2年以上のベテラン講師によるオンライン授業
講師は全員が現役のエンジニアで、他のスクールによく見られるアルバイト講師ではありません。マンツーマン指導で自分のレベルにあったカリキュラムが組め、満足度も高いです。また、自社開発企業への転職指導にも定評があります。

ポイント2無料レッスン体験&無料受講相談で事前に話が聞ける
事前にレッスンを体験して授業の雰囲気や学習ペースを確認できます。またエンジニア転職を目指す方にはどのコースが向いているかなどが聞けるカウンセリング(受講相談)も無料。エンジニアの生の声が聞けるので自分が働き出した時のことをイメージできます。

TechAcademy

授業型ではなく自習型なので自分のペースで学べる
料金
講師の質
コースの種類
転職サポート
ポイント1自習スタイルでチャット質問は何回でも無料
自分の分からないところを質問するスタイルなのでわかるところはサクッと、わからないところはじっくりと、無駄なく学べます。チャットの質問が無料なので、料金を気にせず何回でも聞けます。また、メンターがつくのでカウンセリングで学習の進捗やモチベーションの管理もしてくれます。
ポイント21週間の無料体験と無料カウンセリング、安心の返金制度も
無料体験の期間は1週間もあり、納得してから契約できるので安心です。事前の無料カウンセリングでは、その人にあったアドバイス等をもらうことができるので気軽に活用しよう。転職保障コースの場合、転職できなかったら全額返金!!
侍エンジニア塾
プログラミングスクールの老舗NO.1
料金
講師の質
コースの種類
転職サポート
ポイント1歴史があるからノウハウも豊富
日本で初めてオンラインのマンツーマンレッスン指導を導入した実績十分のスクール。講師も現役エンジニアでメンタリングもあるため転職のサポートも手厚く、面接対策や自己PRのフィードバックまで対応してくれます。

ポイント2転職成功率94.1%、挫折率8%
コースによっては転職成功で受講料が0円に!!  絶対にエンジニアになりたいという意思があれば超低額で転職できます。事前の無料体験で相談も可能なため、まずは話だけ聞いてみるのもあり。

おすすめの記事