AutoLayoutでScrollView配置して画面からはみ出ている部分をどうすればよいのかわからなく初めてAutoLayoutが面倒だと思った。
そんなScoroll viewですが説明していきます。
動作環境
Xcode 7.3.1
iOS 9.3.2
Scroll Viewを配置する
スクロールには縦方向と横方向があります。
1.縦スクロールを配置する
まずは、縦スクロールの配置方法を説明していきます。
前面にScroll Viewを貼り付けます。
Scroll viewにスペースを設定していきます。
pinを押してConstrain to marginsのチェックを外します。
スペースは、上:8、左:0、右:0、下:0を設定してAddを押します。
Scroll Viewの上にView(薄い黄色)を置きます。
このViewも上、左、右、下のスペースと縦方向の長さを設定します。
pinを押してConstrain to marginsのチェックを外します。
スペースは、上:0、左:0、右:0、下:0を設定し縦方向の長さを1200を設定してAddを押します。縦方向の値は画面の縦方向より大きい値である必要があります。
ViewとScroll Viewを複数選択して
pinを押してEqual Widthsにチェックを入れてAddを押します。最後にUpdate Framesすると設定は完了です。
が、これではScrollするViewの下の方に部品を配置することができませんので表示範囲を縦方向に拡大させます。
View Controllerを選択
sizeをクリックしてSimulated SizeをFreeformに変更。Heightに1300を入れると縦長に表示が変わりScrollするView全体が表示されました。
Viewの上と下にラベルを置いて実行してみてください。
うまく縦スクロールしましたか？Viewの縦方向長さ1200を色々変えて遊んでみてください。この時縦方向の値は画面サイズより大い値を入れる必要があります。
1.横スクロールを配置する
次は横スクロールを配置します。
横方向との違いは 以下の２箇所
1.Equal Widthsにチェック → Equal Heightsにチェック
2.Height 1200 → Width 1200
ということで説明を省略させていただきます。
まとめ｜わかているはずなのですが失敗します
Scrollしてくれましたか？
なぜかScrollviewだけは一回ではうまくいきません。こんなに愛しているStoryboardなのScrollviewだけは嫌われています。
今回作成したサンプルコードgithubにあげておきますので参考にしてください。
サンプル
プロジェクトファイル — github
コメント