StoryboardでUIScrollViewを設定しようとすると、なかなか厄介だ。
うまくできないと
Missing Constraints
Scroll View
Need constraints for: x position or width
のような警告が出る。
しかし、やり方を知ってしまえばとても簡単だ。
今回は縦にスクロールするScrollViewの設定を行ってみる。
うまくできないと
Missing Constraints
Scroll View
Need constraints for: x position or width
のような警告が出る。
しかし、やり方を知ってしまえばとても簡単だ。
今回は縦にスクロールするScrollViewの設定を行ってみる。
まず、StoryboardでこのようにScrollViewを配置する。

次に、スクロール表示させるViewを配置する。

さて、このViewにどのようなConstraintを設定すれば良いか。
結論から言うと、上下左右のスペースと幅と高さだ。
上下左右のスペースを設定するのに、幅と高さを設定するというのはAutoLayout的にはいささかおかしな感じだが、幅と高さがないとScrollViewがスクロールするかどうかの判断が出来ないということなのだろう。
まず上下左右のスペースを設定しよう。

この段階で、Missing Constraintsの警告が二つ出ているはずだ。

次は横幅を決定しよう。
今回はScrollViewの横いっぱいに伸ばすものとする。
追加したViewとScrollViewを選択しよう。

それからEqual WidthのConstraintを追加する。

これで、警告が一つ消えたはずだ。
次は高さを設定しよう。
これはシンプルな作業で、先ほどのViewに高さを与えるだけで良い。
ここでは300としておこう。

これで警告は全て消えたはずだ。
Update Framesしてみよう。
このようになったはずだ。

次はスクロールがわかるように先ほどのViewの上下にラベルを追加する。
Constraintの設定はここでは省略する。

さて、ここで一度実行してみよう。
もちろん、スクロールは出来ない。
なぜなら、高さがScrollViewよりも小さいからだ。
Viewの高さを800に変えてみよう。

これでもう一度実行だ。

期待通りの結果を得ることが出来た!

次に、スクロール表示させるViewを配置する。

さて、このViewにどのようなConstraintを設定すれば良いか。
結論から言うと、上下左右のスペースと幅と高さだ。
上下左右のスペースを設定するのに、幅と高さを設定するというのはAutoLayout的にはいささかおかしな感じだが、幅と高さがないとScrollViewがスクロールするかどうかの判断が出来ないということなのだろう。
まず上下左右のスペースを設定しよう。

この段階で、Missing Constraintsの警告が二つ出ているはずだ。

次は横幅を決定しよう。
今回はScrollViewの横いっぱいに伸ばすものとする。
追加したViewとScrollViewを選択しよう。

それからEqual WidthのConstraintを追加する。

これで、警告が一つ消えたはずだ。
次は高さを設定しよう。
これはシンプルな作業で、先ほどのViewに高さを与えるだけで良い。
ここでは300としておこう。

これで警告は全て消えたはずだ。
Update Framesしてみよう。
このようになったはずだ。

次はスクロールがわかるように先ほどのViewの上下にラベルを追加する。
Constraintの設定はここでは省略する。

さて、ここで一度実行してみよう。
もちろん、スクロールは出来ない。
なぜなら、高さがScrollViewよりも小さいからだ。
Viewの高さを800に変えてみよう。

これでもう一度実行だ。

期待通りの結果を得ることが出来た!
コメント