Xcode|StoryboardのAutoLayoutを使用してScrollViewを配置する

20160725_010

AutoLayoutでScrollView配置して画面からはみ出ている部分をどうすればよいのかわからなく初めてAutoLayoutが面倒だと思った。

そんなScoroll viewですが説明していきます。

動作環境

Xcode 7.3.1
iOS 9.3.2

Scroll Viewを配置する

スクロールには縦方向と横方向があります。

1.縦スクロールを配置する

まずは、縦スクロールの配置方法を説明していきます。

20160725_001

前面にScroll Viewを貼り付けます。

20160725_002

Scroll viewにスペースを設定していきます。
pinを押してConstrain to marginsのチェックを外します。
スペースは、上:8、左:0、右:0、下:0を設定してAddを押します。

20160725_003

Scroll Viewの上にView(薄い黄色)を置きます。

このViewも上、左、右、下のスペースと縦方向の長さを設定します。

20160725_004

pinを押してConstrain to marginsのチェックを外します。
スペースは、上:0、左:0、右:0、下:0を設定し縦方向の長さを1200を設定してAddを押します。縦方向の値は画面の縦方向より大きい値である必要があります。

20160725_005

ViewとScroll Viewを複数選択して

20160725_006

pinを押してEqual Widthsにチェックを入れてAddを押します。最後にUpdate Framesすると設定は完了です。

が、これではScrollするViewの下の方に部品を配置することができませんので表示範囲を縦方向に拡大させます。

20160725_008

View Controllerを選択

20160725_007

sizeをクリックしてSimulated SizeをFreeformに変更。Heightに1300を入れると縦長に表示が変わりScrollするView全体が表示されました。

20160725_009

Viewの上と下にラベルを置いて実行してみてください。

うまく縦スクロールしましたか?Viewの縦方向長さ1200を色々変えて遊んでみてください。この時縦方向の値は画面サイズより大い値を入れる必要があります。

1.横スクロールを配置する

次は横スクロールを配置します。
横方向との違いは 以下の2箇所

1.Equal Widthsにチェック → Equal Heightsにチェック
2.Height 1200 → Width 1200

ということで説明を省略させていただきます。

まとめ|わかているはずなのですが失敗します

Scrollしてくれましたか?
なぜかScrollviewだけは一回ではうまくいきません。こんなに愛しているStoryboardなのScrollviewだけは嫌われています。

今回作成したサンプルコードgithubにあげておきますので参考にしてください。

サンプル

プロジェクトファイル — github

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク