UIPageControlでペラペラめくるチュートリアル画面を作成する

サンプル画像

UIPageControllでiOSアプリ初回起動時にのみ表示される, ペラペラめくるチュートリアル機能の説明です。プロジェクト作成時にPage-Basedを選ぶと作成することはできるのですが、既存のアプリに追加するには気がので、既に作成したアプリに初回一回だけ表示するチュートリアルを解説します( やりたいのは画像を複数枚用意するだけで利用できるサンプル作成です)

UIPageControlのクラス階層

NSObject
↑
UIResponder
↑
UIView
↑
UIControl
↑
UIPageControl

参考：UIKit Framework Reference UIPageControl Class Reference
参考：情弱だが巷のiOSアプリ初回起動時に出てくるスライドするヤツを作りたい
参考：[WIP]UIPageViewController
参考：How to Use UIPageViewController to Build Tutorial Screens
参考：UIScrollViewとUIPageControlで公式twitterアプリっぽいView作ってみた
参考：018 UIPageControllerの表示

やってみた

独自クラスのTutorialViewControllerを作成しました。メインViewからpresentViewControllerでTutorialクラスを呼び出してご利用ください。

[手順]

①TutorialViewControllerをプロジェクトに追加

↓

②メインのViewControllerから①をPresentViewする

①TutorialViewControllerをプロジェクトに追加する

TutorialViewController.swiftをダウンロードする。（ご自由にご利用ください）


import UIKit

class TutorialViewController: UIViewController, UIScrollViewDelegate{
    
    var pageControl: UIPageControl!
    var scrollView: UIScrollView!
    var pageImagesArr = Array();
    
    let C_NSUSERDEFAULT_FIRST_TIME = "isFirstTimeDone";
    
    override func viewDidLoad() {
        
        let width = self.view.frame.maxX, height = self.view.frame.maxY
        self.view.backgroundColor = UIColor.whiteColor()
        let pageSize = self.pageImagesArr.count;
        
        //ScrollViewの作成
        scrollView = UIScrollView(frame: self.view.frame)
        scrollView.showsHorizontalScrollIndicator = false;
        scrollView.showsVerticalScrollIndicator = false
        scrollView.pagingEnabled = true
        scrollView.delegate = self
        scrollView.contentSize = CGSizeMake(CGFloat(pageSize) * width, 0)//ペーズ数に応じてscrollViewの横幅を長くする。
        self.view.addSubview(scrollView)
        
        //各ページの作成
        for var i = 0; i < pageSize; i++ {
            let img:UIImage = UIImage(named:self.pageImagesArr[i])!;
            let iv:UIImageView = UIImageView(image:img);
            iv.frame = CGRectMake(CGFloat(i) * width, 0, width, height-50);
            scrollView.addSubview(iv)
        }
        
        //UIPageControllの作成
        pageControl = UIPageControl(frame: CGRectMake(0, self.view.frame.maxY - 50, width, 50))
        pageControl.backgroundColor = UIColor.grayColor();
        pageControl.numberOfPages = pageSize
        pageControl.currentPage = 0
        pageControl.userInteractionEnabled = false
        self.view.addSubview(pageControl)
        
        //閉じるボタンの追加
        var button = UIButton(frame: CGRectMake(width-60, 40, 40, 40));
        button.backgroundColor = UIColor.grayColor();
        button.addTarget(self, action: "onClose:", forControlEvents:.TouchUpInside);
        button.setTitle("X", forState: UIControlState.Normal);
        button.layer.masksToBounds = true;
        button.layer.cornerRadius = 20.0
        self.view.addSubview(button);
        
        //NSUserDefaultsに書き込み。チュートリアルは最初の一回だけ表示
        NSUserDefaults.standardUserDefaults().setBool(true, forKey: C_NSUSERDEFAULT_FIRST_TIME);
        NSUserDefaults.standardUserDefaults().synchronize();
        
    }
    
    
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
      
        // スクロール数が1ページ分になったら時
        if fmod(scrollView.contentOffset.x, scrollView.frame.maxX) == 0 {
            pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.maxX)
        }
    }
    
     //閉じるボタンが押された
    func onClose(sender: UIButton){
        dismissViewControllerAnimated(true, completion: nil);
    }
    
    //チュートリアルは過去に端末で実行されたか
    func isTutorialDone() ->Bool{
        let obj: Bool = NSUserDefaults.standardUserDefaults().boolForKey(C_NSUSERDEFAULT_FIRST_TIME);
        if (obj){
            return false;
        }
        return true;
    }
    
}

②メインのViewControllerから①をPresentViewする

presentViewControllerをviewDidAppearに追加します（既存のアプリがあれば任意の場所に追加してください）。viewDidLoadにするとwindowsハイラキーに追加されていないエラーがでるので注意。任意の画像ファイル名を入れてプロジェクトに追加すれば完成です！


import UIKit

class ViewController: UIViewController{
    
    override func viewDidLoad() {
    }
    override func viewDidAppear(animated: Bool) {
       let tutorial = TutorialViewController();
       if (tutorial.isTutorialDone()){
            tutorial.pageImagesArr = ["tutorial_page_1.png","tutorial_page_2.png","tutorial_page_3.png"];
            self.presentViewController(tutorial, animated: true, completion: nil)
        }
    }
}

サンプル画像

まとめ

つっこみどころが多いクラスかとは思いますが、、、ご利用いただければ感謝です。このサンプルは ViewAppear毎にTutorialViewControllerのメモリを確保していますので、必要に応じて初回管理をして作成を制限したりとカスタマイズして [たたき台]としてご利用いただければ嬉しいです。

↓こんな記事もありますよ！

2021-05-14 14:21:41	WatchOSのwatchconnectivityのFiletransferの落とし穴。と、避け方。 AppleWatch 実機だと成功するんだけど、シュミレーターだと失敗するという、、、昔作成してた時は成功してたのになーと思って調べると、どうやら昔は成功してたみたい。watchOS6以降は...
2021-05-06 14:04:37	LINEのアニメーションスタンプ制作の落とし穴、、、失敗談ゴールデンウィークにLINEスタンプを作成してみました。作り切って申請も通したんですが、意図したアニメーションと違う、、、、 LINEクリエーターの画面だと、アニメーションのプレビュー...
2021-05-01 18:05:35	久しぶりのAdmobをobjective-cに実装。コンパイルエラーだらけ。バーミッション不具合でエミュレータにインスコできない。忘れないようにメモエミュレータにアプリをインストールする際にパーミッション系のエラーがでた時、また、iphone実機にインストールする際にも権限系のエラーが出る場合。ターゲット→ex...