おててで１０までのかずを数えてみよう。ボタンを押せば指がとじたり、開いたりするよ。という感じで、指で数を数える練習をするiPhoneアプリの作成方法を書いてみます。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
ポイント
円形のUIViewの周りに、長方形のUIViewを５個くっつけて、手の形にしてみました。layerのanchorPointを長方形の左端に設定して、その点の座標、回転角度をFingerという名前の構造体にして親指から小指までの値を指定しています。右手と左手は左右対称になれば良いので、右手は左手とおなじViewを作って、幅を-1.0倍したScaleをtransformに設定しました。指を開いたり閉じたりする順番は１が人差し指、５で親指にしています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UILabel *numberLabel;
UIView *handL, *handR;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor yellowColor];
[self createHands];
[self showNumber];
[self createUI];
}
typedef struct
{
CGPoint rootPoint;
float angle;
float length;
} Finger;
– (void)createHands
{
// left
handL = [[UIView alloc] initWithFrame:CGRectMake(80, 300, 50, 50)];
handL.backgroundColor = [UIColor blackColor];
handL.layer.cornerRadius = 25;
[self.view addSubview:handL];
// fingers
float d = – M_PI/180.0; // counter clock 1°
Finger fingers[] = {
{CGPointMake(35, 10), 140*d, 60}, // index
{CGPointMake(25, 20), 150*d, 60}, // middle
{CGPointMake(20, 30), 160*d, 60}, // ring
{CGPointMake(25, 45), 170*d, 60}, // pinkie
{CGPointMake(45, 20), 90*d, 40}, // thumb
};
for (int i=0; i<5; i++) {
UIView *finger = [[UIView alloc] initWithFrame:CGRectMake(0, 0, fingers[i].length, 10)];
finger.backgroundColor = [UIColor blackColor];
finger.layer.anchorPoint = CGPointMake(0, 0.5);
finger.layer.position = fingers[i].rootPoint;
finger.layer.transform = CATransform3DMakeRotation(fingers[i].angle, 0, 0, 1);
[handL addSubview:finger];
finger.tag = i + 1;
}
// right
handR = [[UIView alloc] initWithFrame:CGRectMake(190, 300, 50, 50)];
handR.backgroundColor = [UIColor blackColor];
handR.layer.cornerRadius = 25;
// mirror right and left
handR.transform = CGAffineTransformMakeScale(-1, 1);
[self.view addSubview:handR];
for (int i=0; i<5; i++) {
UIView *finger = [[UIView alloc] initWithFrame:CGRectMake(0, 0, fingers[i].length, 10)];
finger.backgroundColor = [UIColor blackColor];
finger.layer.anchorPoint = CGPointMake(0, 0.5);
finger.layer.position = fingers[i].rootPoint;
finger.layer.transform = CATransform3DMakeRotation(fingers[i].angle, 0, 0, 1);
[handR addSubview:finger];
finger.tag = i + 1;
}
}
– (void)showNumber
{
numberLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 150, 110, 50)];
numberLabel.text = @”10″;
numberLabel.textAlignment = 1;
numberLabel.textColor = self.view.backgroundColor;
numberLabel.font = [UIFont boldSystemFontOfSize:50];
numberLabel.backgroundColor = [UIColor blackColor];
[self.view addSubview:numberLabel];
}
– (void)createUI
{
UILabel *up = [[UILabel alloc] initWithFrame:CGRectMake(170, 380, 60, 60)];
up.backgroundColor = [UIColor blackColor];
up.text = @”▲”;
up.textAlignment = 1;
up.textColor = self.view.backgroundColor;
up.font = [UIFont boldSystemFontOfSize:50];
[self.view addSubview:up];
up.userInteractionEnabled = YES;
UITapGestureRecognizer *tapup = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(up)];
[up addGestureRecognizer:tapup];
UILabel *down = [[UILabel alloc] initWithFrame:CGRectMake(90, 380, 60, 60)];
down.backgroundColor = [UIColor blackColor];
down.text = @”▼”;
down.textAlignment = 1;
down.textColor = self.view.backgroundColor;
down.font = [UIFont boldSystemFontOfSize:50];
[self.view addSubview:down];
down.userInteractionEnabled = YES;
UITapGestureRecognizer *tapdown = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(down)];
[down addGestureRecognizer:tapdown];
}
– (void)up
{
int number = [numberLabel.text intValue];
if (number < 10) {
number++;
numberLabel.text = [NSString stringWithFormat:@”%d”, number];
UIView *f;
if (number > 5) {
// right hand
f = [handR viewWithTag:number – 5];
} else {
// left hand
f = [handL viewWithTag:number];
}
f.transform = CGAffineTransformScale(f.transform, 10, 1);
}
}
– (void)down
{
int number = [numberLabel.text intValue];
if (number > 0) {
UIView *f;
if (number > 5) {
// right hand
f = [handR viewWithTag:number – 5];
} else {
// left hand
f = [handL viewWithTag:number];
}
f.transform = CGAffineTransformScale(f.transform, 0.1, 1.0);
number–;
numberLabel.text = [NSString stringWithFormat:@”%d”, number];
}
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end