数字をなぞって書いてみるアプリ

(XcodeのiOS6 iPhone Simulatorで動かしています。)

概要

数字をなぞって覚えるっていうのは、誰もが通る道。

ということで、0から9までの数字をなぞるサンプルを作成

ポイント

UIBezierPathとCAShapeLayerの組み合わせで線を描画する

指の軌跡はTouchイベントを使って取得


サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController () {

    NSString *value;

    UIBezierPath *path;

    CAShapeLayer *shapeLayer;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    

    self.view.backgroundColor = [UIColor whiteColor];

    

    value = @”2″;

    

    [self createMark];

    

    [self createNumber];

    

    [self lines];

    

    [self createChangeButton];

}

– (void)createChangeButton {

    UILabel *change = [[UILabel alloc] initWithFrame:CGRectMake(130, 420, 60, 30)];

    change.text = @”>>>”;

    change.textColor = [UIColor whiteColor];

    change.textAlignment = 1;

    change.backgroundColor = [UIColor darkGrayColor];

    change.layer.cornerRadius = 10.0;

    change.layer.borderColor = [UIColor blackColor].CGColor;

    change.layer.borderWidth = 1.0;

    change.userInteractionEnabled = YES;

    [self.view addSubview:change];

    

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(changeValue)];

    [change addGestureRecognizer:tap];

}

– (void)changeValue

{

    for (UIView *v in self.view.subviews) {

        [v removeFromSuperview];

    }

    

    // remove all CAShapeLayer

    self.view.layer.sublayers = nil;

    

    int next = ([value intValue] + 1) % 10;

    value = [NSString stringWithFormat:@”%d”,next];

    

    [self createMark];

    

    [self createNumber];

    

    [self lines];

    

    [self createChangeButton];

}

– (void)createMark

{

    for (int i=0; i<[value intValue]; i++) {

        int x = (i % 3) * 40 + 160;

        int y = (i / 3) * 35 + 20;

        UIView *mark = [[UIView alloc] initWithFrame:CGRectMake(x, y, 30, 30)];

        mark.backgroundColor = [UIColor greenColor];

        mark.layer.cornerRadius = 5.0;

        [self.view addSubview:mark];

        

        UIView *eyeA = [[UIView alloc] initWithFrame:CGRectMake(5, 10, 5, 5)];

        eyeA.layer.cornerRadius = 2.5;

        eyeA.backgroundColor = [UIColor whiteColor];

        [mark addSubview:eyeA];

        

        UIView *eyeB = [[UIView alloc] initWithFrame:CGRectMake(20, 10, 5, 5)];

        eyeB.layer.cornerRadius = 2.5;

        eyeB.backgroundColor = [UIColor whiteColor];

        [mark addSubview:eyeB];

    }

}

– (void)createNumber

{

    // top

    UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 100, 100)];

    number.font = [UIFont boldSystemFontOfSize:120];

    number.text = value;

    number.textAlignment = 1;

    number.textColor = [UIColor colorWithWhite:0.2 alpha:1.0];

    number.backgroundColor = [UIColor clearColor];

    [self.view addSubview:number];

    

    

    // second

    for (int i=0; i<3; i++) {

        UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10 + 100 * i, 140, 100, 100)];

        number.font = [UIFont boldSystemFontOfSize:120];

        number.text = value;

        number.textAlignment = 1;

        number.textColor = [UIColor colorWithWhite:0.8 alpha:1.0];

        number.backgroundColor = [UIColor clearColor];

        [self.view addSubview:number];

    }

    

    // third

    for (int i=0; i<3; i++) {

        UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10 + 100 * i, 280, 100, 100)];

        number.font = [UIFont boldSystemFontOfSize:120];

        number.text = value;

        number.textAlignment = 1;

        number.textColor = [UIColor colorWithWhite:0.8 alpha:1.0];

        number.backgroundColor = [UIColor clearColor];

        [self.view addSubview:number];

    }

}

– (void)lines

{

    float x = 0;

    

    for (int i=0; i<2; i++) {

        float y = 140 + 140 * i;

        float width = self.view.bounds.size.width;

        UIView *top = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, 2)];

        top.backgroundColor = [UIColor blueColor];

        [self.view addSubview:top];

        

        y = 190 + 140 * i;

        for (int i=0; i<width; i+=10) {

            UIView *dot = [[UIView alloc] initWithFrame:CGRectMake(i, y, 7, 2)];

            dot.backgroundColor = [UIColor grayColor];

            [self.view addSubview:dot];

        }

        

        x = 0;

        y = 240 + 140 * i;

        UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, 2)];

        bottom.backgroundColor = [UIColor redColor];

        [self.view addSubview:bottom];

    }

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

    path=[[UIBezierPath alloc]init];    

    UITouch *mytouch=[[touches allObjects] objectAtIndex:0];

    [path moveToPoint:[mytouch locationInView:self.view]];    

}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

{

    UITouch *mytouch=[[touches allObjects] objectAtIndex:0];

    [path addLineToPoint:[mytouch locationInView:self.view]];

    

    if(!shapeLayer) {

        shapeLayer = [[CAShapeLayer alloc] initWithLayer:self.view.layer];

        shapeLayer.lineWidth = 10.0;

        shapeLayer.strokeColor = [UIColor blackColor].CGColor;

        shapeLayer.fillColor = [UIColor clearColor].CGColor;

        shapeLayer.lineJoin = kCALineJoinRound;

        [self.view.layer addSublayer:shapeLayer];

    }

    

    shapeLayer.path = path.CGPath;

}

– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

{

    shapeLayer = nil;

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end