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

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

ストーリーボードでヘッダー付きのスクロールビューを作成する

iPhoneアプリ開発

ヘッダーありのスクロールビューの設定方法メモです。

これまでストーリーボードでの設定方法がよくわからなかったのですが、ようやくわかったので、忘れないようにメモっておきます。

 

完成イメージ

f:id:bettychang:20160304121949p:plain

f:id:bettychang:20160304122050p:plain

タッチしてスクロールすると、右側にバーが表示されます。

上部のヘッダは常に固定位置です。

  

f:id:bettychang:20160304122147p:plain

灰色は親ビューの背景です。

 

ツリー構造

f:id:bettychang:20160304122328p:plain

ツリー構造はこのように設定します。

最上位のviewはそのまま。

viewの配下に下記を配置します。

  • ヘッダー用のビュー
  • スクロールビュー

さらにスクロールビューの配下にビューを一つ置きます。

 

 ヘッダー用ビューの制約

ヘッダー用のビューは普通に設定します。

f:id:bettychang:20160304122802p:plain

上から、

  • 親viewに対してAlign Center X
  • viewに対してEqual Width
  • viewに対してEqual Heightを設定し、Multiplierを0.1くらい
  • viewに対してTop Space を0(くっつける)

BottomはScrollView側から設定しますのでここでは不要

 

ScrollViewの制約

次にスクロールビューの制約です。

f:id:bettychang:20160304123224p:plain

左右と下をviewとピッタリくっつけます。

Topだけは前述のヘッダー用ビューに対してくっつけます。

 

高さや幅の制約は必要ありません。

 

スクロールビュー内のビュー(コンテンツビュー)の制約

スクロールビューの配下に一つビューを設定しましたが、その制約を設定します。実質このビューの制約がスクロールビューのサイズを定義することになります。

 

f:id:bettychang:20160304123711p:plain

Leading、Tailing、Bottom、Topいずれも親であるスクロールビューにくっつけるように設定します。

高さ(Height)は固定値です。1,000にしました。

そして、横幅(Width)は親ビューではなく、最上位のviewに対してEqual制約を設定します。

 

以上で完成です。

あとはスクロールビューの中に設定したビュー(contentsView)の下に必要なものを設定していきます。

 

走り書きで申し訳ないですが、以上です。

 

 

追記

コンテンツビュー配下にビューとボタンを3ついれてみました。こんな感じです。

f:id:bettychang:20160304130431p:plain

 

スクロールする。

f:id:bettychang:20160304130522p:plain

 

ヘッダー位置はそのまま。横のバーみたいなのが移動する。

f:id:bettychang:20160304130544p:plain

 

一番上のビューの制約はこんな感じです。

f:id:bettychang:20160304130744p:plain

  • Align Center Xで中央に配置
  • Equal Widthで幅を親に合わせる
  • Topを親ビューにつける
  • Heightは親とEqualにして、Multiplierでとりあえず0.1に設定。親のHeightを1000に設定したので、実質100。

ではでは。