UIScrollViewとUIPageControlを使って横スクロールするページを実装してみました。
Storyboardは使わずコードのみで実装しています。
※2019/2 追記
UIScrollViewに関しては以下記事でも取り上げています!
・【Swift】UIScrollViewで無限に左右スクロールできるページを実装する - Swift・iOS
・【Swift】自動でスクロールするページを実装する(UIScrollView/Timer) - Swift・iOS
※2019/8 追記
↓Storyboardで横スクロールを実装する方法について記事にしました
■開発環境
・Xcode 10.1
・Swift 4.2.1
■サンプルのイメージ
■実装部分
・ViewController.swift
import UIKit class ViewController: UIViewController { private var scrollView: UIScrollView! private var pageControl: UIPageControl! override func viewDidLoad() { super.viewDidLoad() // scrollViewの画面表示サイズを指定 scrollView = UIScrollView(frame: CGRect(x: 0, y: 200, width: self.view.frame.size.width, height: 200)) // scrollViewのサイズを指定(幅は1メニューに表示するViewの幅×ページ数) scrollView.contentSize = CGSize(width: self.view.frame.size.width*3, height: 200) // scrollViewのデリゲートになる scrollView.delegate = self // メニュー単位のスクロールを可能にする scrollView.isPagingEnabled = true // 水平方向のスクロールインジケータを非表示にする scrollView.showsHorizontalScrollIndicator = false self.view.addSubview(scrollView) // scrollView上にUIImageViewをページ分追加する(今回は3ページ分) let imageView1 = createImageView(x: 0, y: 0, width: self.view.frame.size.width, height: 200, image: "image1") scrollView.addSubview(imageView1) let imageView2 = createImageView(x: self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: 200, image: "image2") scrollView.addSubview(imageView2) let imageView3 = createImageView(x: self.view.frame.size.width*2, y: 0, width: self.view.frame.size.width, height: 200, image: "image3") scrollView.addSubview(imageView3) // pageControlの表示位置とサイズの設定 pageControl = UIPageControl(frame: CGRect(x: 0, y: 370, width: self.view.frame.size.width, height: 30)) // pageControlのページ数を設定 pageControl.numberOfPages = 3 // pageControlのドットの色 pageControl.pageIndicatorTintColor = UIColor.lightGray // pageControlの現在のページのドットの色 pageControl.currentPageIndicatorTintColor = UIColor.black self.view.addSubview(pageControl) } // UIImageViewを生成 func createImageView(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat, image: String) -> UIImageView { let imageView = UIImageView(frame: CGRect(x: x, y: y, width: width, height: height)) let image = UIImage(named: image) imageView.image = image return imageView } } // scrollViewのページ移動に合わせてpageControlの表示も移動させる extension ViewController: UIScrollViewDelegate { func scrollViewDidScroll(_ scrollView: UIScrollView) { pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.size.width) } }
■関連リンク
・UIScrollView - UIKit | Apple Developer Documentation
・UIPageControl - UIKit | Apple Developer Documentation
・【Swift4】UIScrollViewで横スクロールのページングを3分で実装する方法 | ニートに憧れるプログラム日記
※サンプル画像は以下のサイトの画像を使用しています。