くるくる回るものは、やはり子供のきょうみを惹きます。
すうじと遊べるアプリとしてルーレットのアプリをつくって見ました。
開発した環境
・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