■はじめに
本記事では、「UIPageControl」「UIScrollView」を使用して、横スクロールのよくあるチュートリアル画面を作る方法をまとめています。
使用している画像はサンプルの画像なので、チュートリアルの画像に差し替えて使用してください。
■手順
ソースコードは、こちらにアップしていますので、とりあえず動かしてみたい方はクローンして確認してください。
本記事の方法だと、スクロールした時に、以下のようにUIPageControlが切り替わるようになります。

フィールドに、今回のチュートリアルで使用する「UIPageControl」「UIScrollView」の定義と、使用する画像名を保持しているリストを宣言します。
var pageControl: UIPageControl!
var scrollView: UIScrollView!
// 表示する画像の名前のリスト
let imageArray = ["memoruntyo", "dc_dentaku", "fx_sp", "check_imikotoba", "patata_talk", "patata_wiq", "shiftter"]
「viewDidLoad」にて、画面のサイズを取得して定数として定義した後に、スクロールビューの定義を行います。
// 画面の横のサイズを取得する
let scWidth = self.view.frame.width
// 画面の縦のサイズを取得する
let scHeight = self.view.frame.height
// ScrollViewを取得する
scrollView = UIScrollView()
scrollView.frame = CGRect(x: 0, y: 0, width: scWidth, height: scHeight)
// 横方向のスクロールバーを非表示にする
scrollView.showsHorizontalScrollIndicator = false;
// 縦方向のスクロールバーを非表示にする
scrollView.showsVerticalScrollIndicator = false
// ページングを許可する(中途半端な位置でスクロールが止まらないように設定)
scrollView.isPagingEnabled = true
// ScrollViewのデリゲートを設定する
scrollView.delegate = self
// スクロールの画面サイズを指定する
scrollView.contentSize = CGSize(width: CGFloat(imageArray.count) * scWidth, height: 0)
// ScrollViewをViewに追加する
self.view.addSubview(scrollView)
「viewDidLoad」にて、上記で定義したスクロールビューにチュートリアルの画像を設定します。
// 画像をページ数分設定する
for i in 0 ..< imageArray.count {
let imgView = UIImageView()
imgView.frame = CGRect(x: CGFloat(i) * scWidth, y: 0, width: scWidth, height: scHeight)
imgView.image = UIImage(named: imageArray[i])
scrollView.addSubview(imgView)
}
「viewDidLoad」にて、ページコントロールの定義を行います。
// PageControlを作成する
pageControl = UIPageControl(frame: CGRect(x: 0, y: scHeight - 50, width: scWidth, height: 50))
// PageControlするページ数を設定する
pageControl.numberOfPages = imageArray.count
// 現在ページを設定する
pageControl.currentPage = 0
// 「pageControl」のタップイベントを止める
pageControl.isUserInteractionEnabled = false
// pageControlをViewに追加する
self.view.addSubview(pageControl)
「scrollViewDidEndDecelerating」の関数を定義し、その内部にて、ページが切り替わった際には、ページコントロールも切り替えるように処理を追加します。
/// スクロール終了後の処理
/// - Parameter scrollView: scrollView description
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// スクロール数が1ページ分になったら時
if fmod(scrollView.contentOffset.x, scrollView.frame.maxX) == 0 {
// ページの場所を切り替える
pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.maxX)
}
}
これで、よく見る横スクロールのチュートリアルの完成です。
ソースコードの全量は以下に記載しておきます。
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var pageControl: UIPageControl!
var scrollView: UIScrollView!
// 表示する画像の名前のリスト
let imageArray = ["memoruntyo", "dc_dentaku", "fx_sp", "check_imikotoba", "patata_talk", "patata_wiq", "shiftter"]
override func viewDidLoad() {
// 画面の横のサイズを取得する
let scWidth = self.view.frame.width
// 画面の縦のサイズを取得する
let scHeight = self.view.frame.height
// ScrollViewを取得する
scrollView = UIScrollView()
scrollView.frame = CGRect(x: 0, y: 0, width: scWidth, height: scHeight)
// 横方向のスクロールバーを非表示にする
scrollView.showsHorizontalScrollIndicator = false;
// 縦方向のスクロールバーを非表示にする
scrollView.showsVerticalScrollIndicator = false
// ページングを許可する(中途半端な位置でスクロールが止まらないように設定)
scrollView.isPagingEnabled = true
// ScrollViewのデリゲートを設定する
scrollView.delegate = self
// スクロールの画面サイズを指定する
scrollView.contentSize = CGSize(width: CGFloat(imageArray.count) * scWidth, height: 0)
// ScrollViewをViewに追加する
self.view.addSubview(scrollView)
// 画像をページ数分設定する
for i in 0 ..< imageArray.count {
let imgView = UIImageView()
imgView.frame = CGRect(x: CGFloat(i) * scWidth, y: 0, width: scWidth, height: scHeight)
imgView.image = UIImage(named: imageArray[i])
scrollView.addSubview(imgView)
}
// PageControlを作成する
pageControl = UIPageControl(frame: CGRect(x: 0, y: scHeight - 50, width: scWidth, height: 50))
// PageControlするページ数を設定する
pageControl.numberOfPages = imageArray.count
// 現在ページを設定する
pageControl.currentPage = 0
// 「pageControl」のタップイベントを止める
pageControl.isUserInteractionEnabled = false
// pageControlをViewに追加する
self.view.addSubview(pageControl)
}
/// スクロール終了後の処理
/// - Parameter scrollView: scrollView description
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// スクロール数が1ページ分になったら時
if fmod(scrollView.contentOffset.x, scrollView.frame.maxX) == 0 {
// ページの場所を切り替える
pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.maxX)
}
}
}