Swift・iOS

Swiftを中心に技術関連の記事を書いています

【Swift】横スクロールするページをStoryboardで実装する

【スポンサーリンク】

コードで実装する横スクロールについては、以前に下記記事で取り上げました。

今回はStoryboardで横スクロールを実装する方法について教えていただいたので、備忘も兼ねて記事に残します。

【Swift】横スクロールするページを実装する(UIScrollView/UIPageControl) - Swift・iOS

【Swift】UIScrollViewで無限に左右スクロールできるページを実装する - Swift・iOS

【Swift】自動でスクロールするページを実装する(UIScrollView/Timer) - Swift・iOS

 

■開発環境

Xcode 10.3

・Swift 5.0.1

 

■サンプルのイメージ

f:id:hfoasi8fje3:20190819234234g:plain

■実装手順

1.StoryboardでUIScrollViewを配置

f:id:hfoasi8fje3:20190819223733p:plain

 

2.UIScrollViewに上下左右の制約と高さの制約を追加

f:id:hfoasi8fje3:20190819223828p:plain

 

3.UIScrollViewの中にUIViewを配置

f:id:hfoasi8fje3:20190819224303p:plain

 

4.UIViewの上下左右の制約を0で設定

f:id:hfoasi8fje3:20190819224659p:plain

 

5.UIViewの高さをUIScrollViewに合わせる

ScrollViewとViewをShiftキーで選択

f:id:hfoasi8fje3:20190819225045p:plain

Add New ConstraintsでEqual Width、Equal Heightを選択して制約を追加

f:id:hfoasi8fje3:20190819225355p:plain

 

6.UIViewの横幅をUIScrollViewの3倍にする

UIViewの横幅の制約を選択

f:id:hfoasi8fje3:20190819225945p:plain

Multiplierを3:1に設定

f:id:hfoasi8fje3:20190819230142p:plain

 

7.UIViewの中にUIImageViewを3つ追加

f:id:hfoasi8fje3:20190819231618p:plain


8.3つのUIImageViewの上下左右の制約を0にする

f:id:hfoasi8fje3:20190819231927p:plain

 

9.3つのUIImageViewの幅を揃える

3つのUIImageViewをShiftで選択し、Add New ConstraintsでEqual Widthの制約を追加

f:id:hfoasi8fje3:20190819232038p:plain

 

10.UIImageViewに画像を設定

 

11.UIScrollViewのShow Horizontal IndicatorとPaging Enabledを設定して完成

f:id:hfoasi8fje3:20190819233327p:plain