読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

Swift2 - storyboard で 高さ可変の ScrollView を autolayout で設定する


多くの場面で、高さが可変の ScrollView を作成する事があると思います。むしろ Web と連携するアプリなんかはそのようなケースの方が多いんじゃないでしょうか。極力ストーリーボードの autolayout を使って、高さ可変の ScrollView を設定する方法を紹介したいと思います。

  1. View に ScrollView を配置する
  2. ScrollView の横スクロールを制御する ContentView を ScrollView 配下に追加する
  3. ScrollView の横幅を設定する為の Equal Width を設定
  4. UILable などの高さの要素を持つパーツを追加して ScrollView を動的に制御する

1. View に ScrollView を配置する

View に ScrollView を配置して ScrollView の autolayout 設定は 上下左右全て 0 を指定します。

f:id:t-namikata:20160630235645p:plain

2. ScrollView の横スクロールを制御する ContentView を ScrollView 配下に追加する

ScrollView 配下に View を追加し、ContentView と名前を付けます。 ContentView の autolayout 設定は ScrollView に対して上下左右全て 0 を指定します。

f:id:t-namikata:20160630235636p:plain

この状態では、まだ autolayout の制約エラーで赤い状態になっています。 ScrollView は横にも縦にもスクロールできる状態の View なので、中の要素が空の状態では横幅と高さが決まらないからです。そこで、横幅を決める為の設定と高さを決める為の設定を入れてあげます。

f:id:t-namikata:20160630235640p:plain

3. ScrollView の横幅を設定する為の Equal Width を設定

ScrollView と ContentView を選択し Equal width の設定を入れます。

f:id:t-namikata:20160630235642p:plain

4. UILable などの高さの要素を持つパーツを追加して ScrollView を動的に制御する

親の View の高さは、高さ要素を持つ UILabel や UIButton などを子 View で持つことで、親 View に高さを指定しなくても、子 View の高さによって動的に変化してくれるのが autolayout の一番の利点だと思います。ここでは説明をシンプルにする為に UILable を一つ配置することで ScrollView の高さを動的に変更する方法を紹介したいと思います。

UILabel を ContentView 配下に追加し、ContentView に対して 左: 10 上: 50 右: 10 下: 10 の設定をします。

f:id:t-namikata:20160630235650p:plain

これでようやく Storyboard の autolayout の制約エラーが解消されました。この状態でシミュレーターを起動すると全くスクロールしない状態かと思います。これは、高さがスクリーンサイズを超えていないからスクロール領域がなく、スクロールしない状態になっています。

f:id:t-namikata:20160630235653p:plain

試しに UILable の bottom の autolayout の設定を 1000 とかにしてみて、シミュレーターを起動します。

f:id:t-namikata:20160630235655p:plain

指定した余白分スクロールできることが確認できるかと思います。今回の例では UILable 一つでしたが、複数の要素を ScrollView 上に配置したとしても、同じ原理で ScrollView の高さを動的に保つことができるようになります。