iOSでルーレットを作ってみる



くるくる回るものは、やはり子供のきょうみを惹きます。

すうじと遊べるアプリとしてルーレットのアプリをつくって見ました。


開発した環境

・Xcode 4.5

・iOS 6.0


追加したframework

・QuartzCore




SingleView Applicationで ViewController.m のみで作成

ソース


#import "ViewController.h"

#import <QuartzCore/QuartzCore.h>


@interface ViewController () {

    UISlider *slider;

    UIView *roulette;

}


@end


@implementation ViewController


- (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor blackColor];

    

    // ルーレット

    [self initRouletView];

    

    // スライダー

    [self initSliderView];

    [slider addTarget:self action:@selector(turn:) forControlEvents:UIControlEventTouchUpInside];

}




- (void)initRouletView

{

    

    // 1.ルーレットの円

    // layer cornerRadiusを指定し、円にする。

    roulette = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 250, 250)];

    roulette.layer.cornerRadius = roulette.frame.size.width / 2.0;

    roulette.center = self.view.center;

    roulette.backgroundColor = [UIColor lightGrayColor];

    

    [self.view addSubview:roulette];

    

    

    // 2.数字を配置

#define Max 10.0

    float angle = 2 * M_PI / Max;

    

    float r = roulette.frame.size.width * 0.4;

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

        float x = r * cos(i * angle) + roulette.frame.size.width / 2.0;

        float y = r * sin(i * angle) + roulette.frame.size.height / 2.0;

        

        UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

        number.backgroundColor = [UIColor whiteColor];

        number.text = [NSString stringWithFormat:@"%d", i + 1];

        //[number sizeToFit];

        number.layer.cornerRadius = number.frame.size.width / 2.0;

        number.center = CGPointMake(x, y);

        

        // for ios5 and ios6

        // NSTextAlignmentCenter, UITextAlignmentCenter

        number.textAlignment = 1;

        

        // 斜めに

        CGAffineTransform transform = CGAffineTransformMakeRotation(i * angle + M_PI_2);

        number.transform = transform;

        

        [roulette addSubview:number];

    }


    

    // 3.

    UIView *arrow = [[UIView alloc] initWithFrame:CGRectMake(-20, self.view.center.y, 80, 20)];

    arrow.backgroundColor = [UIColor redColor];

    arrow.alpha = 0.4;

    arrow.layer.cornerRadius = 10.0;

    [self.view addSubview:arrow];

}



- (void)initSliderView

{

    slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, 70.0f, 23.0f)];

    slider.center = CGPointMake(self.view.frame.size.width * 0.8, self.view.frame.size.height * 0.9);

    

    CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI * 0.5);

    slider.transform = transform;

    

    [self.view addSubview:slider];

}


- (void)turn:(UISlider*)sender

{

    // ルーレットをまわす

    [self turnRoulette:50 * sender.value];

    

    // sliderをピョンと戻す

    [UIView animateWithDuration:0.2 animations:^{

        sender.value = 0.0;

    }];

}


- (void)turnRoulette:(int)count

{

    if (count < 0) return;

    

    float dAngle = M_PI * 0.01 * count;

    

    [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

        CGAffineTransform transform = CGAffineTransformRotate(roulette.transform, dAngle);

        roulette.transform = transform;

    } completion:^(BOOL finished) {

        [self turnRoulette:count - 1];

    }];

}



@end