Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > UIPageControl

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のメモリを確保していますので、必要に応じて初回管理をして作成を制限したりとカスタマイズして [たたき台]としてご利用いただければ嬉しいです。

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

CoreTextでTextViewの一文字の向きを変える(解決前)

TextViewの文字を縦書きにしたいなぁと考えている時にCoreTextとNSMutableAttributedStringの二つのどちらかなら実装できそう。CoreTextを利用してトライして無理ならAttributedStringをトライしてみます。

Facebook SDK のAppEventを検証する

さて、AppEventですが、FacebookのAppを利用したログシステムなのかな。ログをカスタマイズして保存して、 それを解析できる、そんな感じなのかなと思っています。 広告利用の為に、インストールされた数やログの解析によってユーザの動作を確認できるようですので細かく設定できるのではと思います。 まずは上記のようにログを保存する、ログを読み込む、ができるのかを検証してみます

UIScrollViewでパラパラ画像切り替え

画像のパラパラ切り替えフォトギャラリーを作成できます。大きな画像の一部分だけを切り抜きしてマスク表示するクラスです。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!