Chapter 02無料公開

スクロールが止まる制約の貼り方(1)

崎山圭
崎山圭
2021.05.16に更新

基本的な考え方

この章では途中でスクロールが止まるViewの制約の貼り方について、その考え方を解説していきます。

できあがるもの

以下の動きをするように制約を貼ります。
色の付いた各ViewをRedView, GreenView, BlueViewと呼ぶことにします。

  • GreenViewRedViewの中心にいる
  • RedViewはスクロールして画面外まで移動できる
  • GreenViewBlueViewより上にはいかない

考え方

UIScrollViewを用意する

最初に下地となるUISCrollViewを用意します。
中にはひとつだけをContentsViewという名前でUIViewを配置し、ContentsViewの制約を以下のようにします。

  • Top, Leading, Bottom, TrailingUISCrollViewContent Layout GuideTop, Leading, Bottom, Trailingに合わせる
  • WidthUISCrollViewFrame Layout GuideWidthに合わせる
  • HeightUISCrollViewFrame Layout GuideHeight2倍にする(以下の図の赤線部分)

スクロール

こうすることで以下のように縦方向にスクロールするViewができあがります。

最初

ここまでのstoryboardがこちらです。

RedViewを用意する

スクロールがトップの時に画面の真ん中にRedViewがくるように配置します。
ContentsViewの上に置き、以下のように制約を貼ります。

  • Heightを100にする
  • WidthContentsViewWidthの0.8倍にする
  • Horizontal CentersContentsViewHorizontal Centersにする
  • Vertical CentersContentsViewVertical Centers0.5倍にする

RedViewの制約

以下のようにスクロールするRedViewができあがります。

RedViewの制約

ここまでのstoryboardがこちらです。

GreenViewを用意する

大元のViewの上にGreenViewを以下の図のように配置します。(RedViewの上ではないので注意してください。)

GreenViewの配置

GreenViewに以下のように制約を貼ります。

  • Heightを80にする
  • aspect ratioを1:1にする
  • Horizontal Centers, Vertical CentersRedViewに合わせる

GreenViewの制約02

以下のようにスクロールするGreenViewができあがります。

GreenViewの動き

ここまでのstoryboardがこちらです。

BlueViewを用意する

GreenViewの動きを止めるためのBlueViewを用意します。
大元のViewの上にBlueViewを以下の図のように配置します。
さらにContentsViewの背景色を透明にします。

BlueViewの配置

BlueViewに以下のように制約を貼ります。

  • Heightを100にする
  • Leading, TrailingViewに合わせる
  • TopViewに合わせConstraintを50にする

BlueViewの制約

全体の動きを確認すると以下のようになります。

BlueViewの動き

ここまでのstoryboardがこちらです。

基本となる制約の下準備は完成です。
次はいよいよスクロールさせたらGreenViewBlueViewの位置で止まる制約について説明していきます。
やり方は1箇所制約を加えて1箇所修正をするだけです。