子供向け、数の勉強 iPhoneアプリの作り方です。１から９までのパネルをタッチすると、その個数のボールが下に表示されるという仕組みにしてみます。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
ポイント
フラットデザインぽいイメージで、１から９までのパネルを敷き詰め、各パネルにUITapGestureRecognizerを仕込んでいます。タップされたら、そのViewを中心に移動しながら、大きさを３倍に拡大するアニメーションをかけた後、したの領域に丸が飛び込んでくるようにしました。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
{
UIView *selected;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
[self createPanels];
[self createBallPool];
}
– (void)createPanels
{
NSArray *numbers = @[@”1″, @”2″, @”3″, @”4″, @”5″, @”6″, @”7″, @”8″, @”9″];
int i = 0;
float w = (320 – 4 * 5) / 3.0;
for (NSString *s in numbers) {
float x = (i % 3) * (w + 5) + 5;
float y = (i / 3) * (w + 5) + 5;
UILabel *panel = [[UILabel alloc] initWithFrame:CGRectMake(x, y, w, w)];
panel.backgroundColor = [UIColor orangeColor];
panel.text = s;
panel.textAlignment = NSTextAlignmentCenter;
panel.font = [UIFont fontWithName:@”GillSans-Light” size:80];
[self.view addSubview:panel];
panel.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
[panel addGestureRecognizer:tap];
i++;
}
}
– (void)tap:(UITapGestureRecognizer*)gr
{
if (!selected) {
selected = gr.view;
[self.view addSubview:gr.view];
[UIView animateWithDuration:0.3 animations:^{
float dx = 160.0 – gr.view.center.x;
float dy = 160.0 – gr.view.center.y;
CGAffineTransform t = CGAffineTransformMakeTranslation(dx, dy);
gr.view.transform = CGAffineTransformScale(t, 3.1, 3.1);
} completion:^(BOOL finished) {
[self showBall:[[(UILabel*)gr.view text] intValue]];
}];
} else {
[UIView animateWithDuration:0.3 animations:^{
gr.view.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
selected = nil;
for (UIView *v in self.view.subviews) {
if (v.tag == 2) {
[v removeFromSuperview];
}
}
}];
}
}
– (void)createBallPool
{
// frame
float w = (320 – 21 * 5) / 20.0;
CGRect hole = CGRectMake(10, 330, 290, 190);
for (int i=0; i<20 * 14; i++) {
float x = (i % 20) * (w + 5) + 5;
float y = (i / 20) * (w + 5) + 325;
if (CGRectContainsPoint(hole, CGPointMake(x, y))) {
continue;
}
UIView *block = [[UIView alloc] initWithFrame:CGRectMake(x, y, w, w)];
block.backgroundColor = [UIColor orangeColor];
[self.view addSubview:block];
}
}
– (void)showBall:(int)number
{
for (int i=0; i<number; i++) {
float x = (i % 5) * 50 + 40;
float y = (i / 5) * 80 + 370;
UIView *ball = [[UIView alloc] initWithFrame:CGRectMake(x, y, 40, 40)];
ball.layer.cornerRadius = 20;
ball.backgroundColor = [UIColor orangeColor];
[self.view addSubview:ball];
ball.tag = 2;
ball.transform = CGAffineTransformMakeTranslation(320, 0);
[self performSelector:@selector(cutin:) withObject:ball afterDelay:0.1 * i];
}
}
– (void)cutin:(UIView*)v
{
[UIView animateWithDuration:0.3 animations:^{
v.transform = CGAffineTransformIdentity;
}];
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end