パリッとギザギザに割れた四角形のピースを組み合わせていこう。というかんじのiPhoneアプリを描いてみます。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [self color:0];
[self createPanels];
}
– (void)createPanels
{
NSMutableArray *arr = [[NSMutableArray alloc] init];
for (int i=0; i<10; i++) {
NSArray *pair = [self createPair:[self color:arc4random()%4 + 1]];
UIView *one = [pair objectAtIndex:0];
UIView *two = [pair objectAtIndex:1];
[arr addObject:one];
[arr addObject:two];
[self.view addSubview:one];
[self.view addSubview:two];
}
[self shuffle:arr];
for (int i=0; i<20; i++) {
UIView *v = [arr objectAtIndex:i];
float x = (i%4) * 70 + 60;
float y = (i/4) * 100 + 80;
v.center = CGPointMake(x, y);
}
}
– (NSArray*)createPair:(UIColor*)color
{
float w = 50;
float d = arc4random() % 10 + 5; // ギザギザの長さ
float s = arc4random() % 5 + 5; // ギザギザ開始位置
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(s, 0)];
float x = s;
float y = 0;
for (int i=0; x<(w – d); i++) {
y += d;
[path addLineToPoint:CGPointMake(x, y)];
x += d;
[path addLineToPoint:CGPointMake(x, y)];
}
[path addLineToPoint:CGPointMake(x, w)];
[path addLineToPoint:CGPointMake(0, w)];
[path closePath];
UIView *one = [[UIView alloc] initWithFrame:CGRectMake(0, 0, w, w)];
one.layer.borderColor = [UIColor whiteColor].CGColor;
one.layer.borderWidth = 1;
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = color.CGColor;
sl.path = path.CGPath;
[one.layer addSublayer:sl];
UIView *two = [[UIView alloc] initWithFrame:CGRectMake(0, 0, w, w)];
two.backgroundColor = color;
two.layer.borderColor = [UIColor whiteColor].CGColor;
two.layer.borderWidth = 1;
[path appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, w, w)]];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.fillRule = kCAFillRuleEvenOdd;
mask.fillColor = [UIColor blackColor].CGColor;
mask.path = path.CGPath;
two.layer.mask = mask;
for (UIView *v in @[one, two]) {
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
[v addGestureRecognizer:pan];
}
return @[one, two];
}
– (void)shuffle:(NSMutableArray*)arr
{
int count = [arr count];
for (int i = 0; i < count; ++i) {
int nElements = count – i;
int n = (arc4random() % nElements) + i;
[arr exchangeObjectAtIndex:i withObjectAtIndex:n];
}
}
– (void)move:(UIPanGestureRecognizer*)gr
{
CGPoint p = [gr locationInView:self.view];
gr.view.center = p;
}
#define UIColorHex(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
– (UIColor*)color:(int)i
{
switch (i) {
case 0:
return UIColorHex(0x85B3A3);
case 1:
return UIColorHex(0xF3EBBA);
case 2:
return UIColorHex(0xE8E07C);
case 3:
return UIColorHex(0xF4ADA6);
case 4:
return UIColorHex(0xF35F5D);
default:
break;
}
return nil;
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end