点を一つタッチしよう、黄色くなるよ。
もう一つタッチしよう、赤色のひもでつながった。
緑のひももつなげられるかな?
といった感じの子供用iPhoneアプリサンプルを作ってみた。
ポイント
変数にselectedというUIViewの箱を用意しておいて、
UITapGestureを使ってタップされたViewをそこに入れておく、
箱にViewが入ってる状態で他のViewがタップされたらそこと線を繋ぐ。
という感じで書いてみました。
環境
今回つくったiPhoneアプリサンプルは、
XcodeのiOS6 iPhone Simulatorで動かしています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIView *selected;
CAShapeLayer *canvasRed;
CAShapeLayer *canvasGreen;
UIBezierPath *pathRed;
UIBezierPath *pathGreen;
int color;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createUI];
[self createNodes];
}
– (void)createUI
{
UILabel *clear = [[UILabel alloc] init];
clear.text = @”clear”;
clear.font = [UIFont fontWithName:@”MarkerFelt” size:30];
[clear sizeToFit];
clear.center = CGPointMake(160, 30);
[self.view addSubview:clear];
clear.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clear)];
[clear addGestureRecognizer:tap];
UIView *green = [[UIView alloc] initWithFrame:CGRectMake(100, 15, 30, 30)];
green.backgroundColor = [UIColor greenColor];
green.layer.cornerRadius = 5;
[self.view addSubview:green];
UITapGestureRecognizer *tapG = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(setColor:)];
[green addGestureRecognizer:tapG];
UIView *red = [[UIView alloc] initWithFrame:CGRectMake(190, 15, 30, 30)];
red.backgroundColor = [UIColor redColor];
red.layer.cornerRadius = 5;
[self.view addSubview:red];
UITapGestureRecognizer *tapR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(setColor:)];
[red addGestureRecognizer:tapR];
}
– (void)clear
{
[canvasRed removeFromSuperlayer];
canvasRed = nil;
pathRed = nil;
[canvasGreen removeFromSuperlayer];
canvasGreen = nil;
pathGreen = nil;
}
– (void)setColor:(UITapGestureRecognizer*)gr
{
if (gr.view.backgroundColor == [UIColor greenColor]) {
color = 1;
} else {
color = 0;
}
}
– (void)createNodes
{
int xCount = 6;
int yCount = 8;
float size = 15;
for (int i = 0; i<xCount * yCount; i++) {
float x = (i % xCount) * size * 3 + 40;
float y = (i / xCount) * size * 3 + 70;
UIView *node = [[UIView alloc] initWithFrame:CGRectMake(x, y, size, size)];
node.backgroundColor = self.view.backgroundColor;
node.layer.cornerRadius = 5;
node.layer.shadowOffset = CGSizeMake(1, 1);
node.layer.shadowOpacity = 0.6;
node.layer.shadowRadius = 1;
[self.view addSubview:node];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)];
[node addGestureRecognizer:tap];
}
}
– (void)tap:(UITapGestureRecognizer*)gr
{
if ([selected isEqual:gr.view]) {
selected = nil;
gr.view.backgroundColor = self.view.backgroundColor;
} else if (selected){
selected.backgroundColor = self.view.backgroundColor;
CGPoint p0 = selected.center;
CGPoint p1 = gr.view.center;
if (!pathRed) {
pathRed = [[UIBezierPath alloc] init];
pathGreen = [[UIBezierPath alloc] init];
}
if (!canvasRed) {
canvasRed = [[CAShapeLayer alloc] initWithLayer:self.view.layer];
canvasRed.fillColor = [UIColor clearColor].CGColor;
canvasRed.strokeColor = [UIColor redColor].CGColor;
canvasRed.lineWidth = 5;
canvasGreen = [[CAShapeLayer alloc] initWithLayer:self.view.layer];
canvasGreen.fillColor = [UIColor clearColor].CGColor;
canvasGreen.strokeColor = [UIColor greenColor].CGColor;
canvasGreen.lineWidth = 5;
canvasGreen.transform = CATransform3DMakeTranslation(3, 3, 0);
[self.view.layer addSublayer:canvasRed];
[self.view.layer addSublayer:canvasGreen];
}
if (color == 0) {
[pathRed moveToPoint:p0];
[pathRed addLineToPoint:p1];
canvasRed.path = pathRed.CGPath;
} else {
[pathGreen moveToPoint:p0];
[pathGreen addLineToPoint:p1];
canvasGreen.path = pathGreen.CGPath;
}
selected = gr.view;
selected.backgroundColor = [UIColor yellowColor];
} else {
selected = gr.view;
gr.view.backgroundColor = [UIColor yellowColor];
}
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end