もうABCはよめるようになったかな？
アルファベットをタッチして遊んでみよう。
という感じの幼児英語スマホアプリを作成してみましょう。
※アプリの動きは動画で確認してみてください。
ポイント
A, B, C３つのアルファベットをボタンとして用意して、
apple, bus, catという３つの単語と絵を表示するようにしました。
絵はiPadで適当に書いてます。
ABCボタンのanimationOptionをこんな感じで設定して、
常に動いている、かつ、タッチを受け付けるようにしました。
上下運動：UIViewAnimationOptionAutoreverse
繰り返し：UIViewAnimationOptionRepeat
タップ出来るように：UIViewAnimationOptionAllowUserInteraction
環境
今回つくったiPhoneアプリサンプルは、
XcodeのiOS6 iPhone Simulatorで動かしています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIView *monitor;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createABC];
[self createMonitor];
}
– (void)createABC
{
// objective-C literal NSArray
NSArray *abc = @[@”A”, @”B”, @”C”];
for (int i=0; i<3; i++) {
float x = (2 * i + 1) * 320 / 6.0;
UILabel *alphabet = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
alphabet.center = CGPointMake(x, 400);
alphabet.text = [abc objectAtIndex:i];
alphabet.textAlignment = 1;
alphabet.textColor = [UIColor colorWithHue:i/4.0 saturation:1 brightness:1 alpha:1];
alphabet.font = [UIFont fontWithName:@”Marker Felt” size:60];
alphabet.backgroundColor = [UIColor colorWithWhite:0 alpha:0.01];
[self.view addSubview:alphabet];
[UIView animateWithDuration:2.0 delay:0.8 * i options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionAllowUserInteraction animations:^{
alphabet.transform = CGAffineTransformMakeTranslation(0, –30);
} completion:^(BOOL finished) {
}];
alphabet.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
[alphabet addGestureRecognizer:tap];
}
}
– (void)createMonitor
{
monitor = [[UIView alloc] initWithFrame:CGRectMake(10, 50, 300, 250)];
monitor.backgroundColor = [UIColor lightGrayColor];
monitor.layer.borderColor = [UIColor orangeColor].CGColor;
monitor.layer.borderWidth = 20;
monitor.layer.cornerRadius = 20;
[self.view addSubview:monitor];
}
– (void)tap:(UITapGestureRecognizer*)gr
{
for (UIView *v in monitor.subviews) {
[v removeFromSuperview];
}
[self showMonitorAlphabet:(UILabel*)gr.view];
}
– (void)showMonitorAlphabet:(UILabel*)alphabet
{
UIImage *image;
NSString *word;
if ([alphabet.text isEqual:@”A”]) {
image = [UIImage imageNamed:@”apple”];
word = @”Apple”;
} else if ([alphabet.text isEqual:@”B”]) {
image = [UIImage imageNamed:@”bus”];
word = @”Bus”;
} else {
image = [UIImage imageNamed:@”cat”];
word = @”Cat”;
}
UIView *picture = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 260, 210)];
picture.backgroundColor = alphabet.textColor;
UIImageView *iv = [[UIImageView alloc] initWithImage:image];
iv.frame = CGRectMake(55, 20, 140, 140);
[picture addSubview:iv];
UILabel *wordL = [[UILabel alloc] initWithFrame:CGRectMake(80, 170, 100, 40)];
wordL.text = word;
wordL.font = [UIFont fontWithName:@”Marker Felt” size:40];
wordL.textAlignment = 1;
wordL.textColor = alphabet.textColor;
wordL.backgroundColor = [UIColor whiteColor];
[picture addSubview:wordL];
UILabel *a2 = [[UILabel alloc] initWithFrame:CGRectMake(30, 20, 30, 30)];
a2.text = [alphabet.text lowercaseString];
a2.layer.cornerRadius = 15;
a2.font = [UIFont fontWithName:@”Marker Felt” size:30];
a2.textAlignment = 1;
a2.textColor = alphabet.textColor;
a2.backgroundColor = [UIColor whiteColor];
[picture addSubview:a2];
UILabel *a1 = [[UILabel alloc] initWithFrame:CGRectMake(2, 2, 40, 40)];
a1.text = alphabet.text;
a1.layer.cornerRadius = 20;
a1.font = [UIFont fontWithName:@”Marker Felt” size:40];
a1.textAlignment = 1;
a1.textColor = alphabet.textColor;
a1.backgroundColor = [UIColor whiteColor];
[picture addSubview:a1];
[monitor addSubview:picture];
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end