食後のSwift ~琵琶湖からコンバンハ~

swiftやオキュラスについて書こうと思っていたブログ。

UIScrollView で縦スクロールを実現する!!

XcodeでUIScrollViewを使って、横幅は画面幅に固定の状態で、縦スクロールのみする画面を作成していこうとおもいます。


Viewを削除して、UIScrollViewを設置

まず、Main.stroyboardに初期で配置してあるViewを削除し、代わりにUIScrollView を設置します。
さらに、そのUIScrollView内にViewを配置します。
また今回は、スクロールしていることがわかりやすいように、View内に、imageView を配置してあります。

f:id:biwako_no_otyazuke:20161213134030p:plain


横幅を固定する

内側のViewの横幅を画面幅に固定にするために、UIScrollViewとViewのwidthを同じに設定します。

f:id:biwako_no_otyazuke:20161213134411p:plain


スクロールするコンテンツの高さを設定

スクロールするコンテンツの高さを設定するために、Viewの高さを設定します。
下の画像では、900にしてあります。

f:id:biwako_no_otyazuke:20161213134552p:plain


Viewに制約をつける

ここが縦スクロールを実現するポイントになります。
Viewの上下左右に制約を付け加えます。
※このとき、ScrollViewに対して制約がついてることを確認してください。

f:id:biwako_no_otyazuke:20161213134753p:plain

UIScrollViewとView の高さは異なりますが、制約でそれぞれの距離を0にすることで、縦スクロールを実現することができるようです!!


InterfaceBuilderを見やすく

最後にInterfaceBuilderから見やすくするために、ViewControllerから、Simulated SizeをFreedomにし、Heightを900に変更しておきましょう。

シミュータで確認すると、しっかり縦スクロールができていると思います!!

f:id:biwako_no_otyazuke:20161213135432p:plain