【iOS】よくある横スクロールをStoryboardだけで作る

アプリのチュートリアル的な画面でよく見る、横にページめくりする感じのViewを実装します。

こんな感じのものです。

これをコードを全く書かずに作ります。サクッと作りたい時におすすめです。

それでは順を追って説明します。

UIScrollView、UIStackView(Horizontal)を配置

普通にスクロールビューを置いて制約(画面いっぱい)を設定し、中にスタックを置いています。
横スクロールにしたいのでスタックはHorizontalにし、スクロールビューとスタックビューの高さをあわせます。
(Stackをverticalに、横幅をあわせれば普通に縦スクロールになります。)

UIScrollViewについて詰まったら(多分)いちばんシンプルなUIScrollViewの実装も見てみてください。

Stackの中にUIViewを配置

各ページとなるViewを配置します。

配置したViewに制約を設定

Viewの横幅を画面サイズ(UIScrollView)と同じにする制約をつけます。
(UIStackViewで高さは決まっているので横だけ決めればOKです。)
ここまでで Viewの個数 × 画面幅分 のスクロールができるようになります。

UIScrollViewの「Paging Enabled」を有効に

このままだとただの横スクロールなので、
ページめくりのような動きにするために「Paging Enabled」を有効にします。
バウンス(端までスクロールした時に跳ねる感じのやつ)が不要であれば「Bounce On Scroll」も無効にしましょう。

後は、先程いっぱい置いたViewに適宜部品を置いてチュートリアルを完成させましょう。
(今回は違いがわかるように背景色だけ変更しております。)

以上で完成です。

余談

少しだけコードを記述すれば、UIPageControllerも追加できます。

こんな感じ。

追加したコードは以下です。
レイアウトにはUIPageControlを追加し、ページ数だけ設定してあります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var scroll: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        self.scroll.delegate = self
    }
}

extension ViewController:UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let index = Int(round(scrollView.contentOffset.x / scrollView.frame.width))
        self.pageControl.currentPage = index
    }
}

---

不明点、不足点、改善点等ございましたらお教えいただけますと幸いです。
ありがとうございました。