チュートリアルの作り方

初めてアプリを使用するユーザーにチュートリアルを見せますよね。
そのチュートリアルの作成です。

参考にしたのはこちら→UIPageControlの使い方
以下のサンプルコードはこちらのサイトのほぼ丸パクリです。

サンプルのチュートリアルです。

//
//  ViewController.h
//  SampleApp
// いらないコメント省略

#import 

@interface ViewController : UIViewController 

@end

// ViewController.m
#import "ViewController.h"

@interface ViewController () {
    UIPageControl *pager;
    UIScrollView *scroll;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewDidAppear:(BOOL)animated {
    int page = 3;
    
    // scrollを作成
    scroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 100)];
    scroll.contentSize = CGSizeMake(self.view.frame.size.width * page, self.view.frame.size.height - 150);
    scroll.backgroundColor = [UIColor clearColor];
    
    // ページング指定
    scroll.pagingEnabled = YES;
    
    // スクロールバーを表示しない
    scroll.showsHorizontalScrollIndicator = NO;
    scroll.showsVerticalScrollIndicator = NO;
    // ステータスバータップで上に戻らない。
    scroll.scrollsToTop = NO;
    // delegate
    scroll.delegate = self;
    
    // scroll内で表示するViewを作る。
    for (int a = 0; a < page; a++) {
        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(self.view.frame.size.width * a + 20, 20, self.view.frame.size.width - 40, self.view.frame.size.height - 170)];
        switch (a) {
            case 0:
                view.backgroundColor = [UIColor redColor];
                break;
            case 1:
                view.backgroundColor = [UIColor blueColor];
                break;
            case 2:
                view.backgroundColor = [UIColor greenColor];
                break;
            default:
                break;
        }
        [scroll addSubview:view];
    }
    
    
    // pagerを作る
    pager = [[UIPageControl alloc] initWithFrame:CGRectMake((self.view.frame.size.width / 2) - 20, self.view.frame.size.height - 40, 40, 20)];;
    pager.numberOfPages = page;
    pager.currentPage = 0;
    pager.pageIndicatorTintColor = [UIColor colorWithRed:0.84f green:0.85f blue:0.86f alpha:1.0f];
    pager.currentPageIndicatorTintColor = [UIColor blackColor];
    
    [pager addTarget:self action:@selector(changePageControl:) forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:pager];
    [self.view addSubview:scroll];
}

// scrollしたときのdelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // UIScrollViewのページ切替時イベント:UIPageControlの現在ページを切り替える処理
    pager.currentPage = scroll.contentOffset.x / self.view.frame.size.width;
}

// pagerのバリューに伴ってscrollも移動させる
- (void)changePageControl:(id)sender {
    
    // ページコントロールが変更された場合、それに合わせてページングスクロールビューを該当ページまでスクロールさせる
    CGRect Aframe = scroll.frame;
    Aframe.origin.x = self.view.frame.size.width * pager.currentPage;
    Aframe.origin.y = 0;
    // 可視領域まで移動
    [scroll scrollRectToVisible:Aframe animated:YES];
}


@end

次はこれを踏み台にして、Safariみたいな複数のページを自分で切り替えられるようなものを実装します。