PaintCodeでiOSアプリ用ボタンを作ってみた

PaintCodeを買ってみたので、早速iOSアプリ用ボタンを作ってみました。

直感的に使用できるし、ボタン作成には丁度いいアプリでした。PDFで書き出すとAdobe Illustratorでレイヤーが保存された状態で利用できるので、効果をつけたりしたい場合はイラレに持っていくこともできます(それなら最初からイラレで作るって?)。やはりコードが出力されるのが魅力かな。

起動するとWindowが表示されます。
120319 0003

カンバスサイズを90×40に変更します。OS X/iOSのボタンをiOSに変更します。コードがiOS向けになります。原点表示も左上になります。
120319 0005

角丸長方形を描画。ストローク無しです。
120319 0006

#222222/#444444/#666666の色設定を追加。Hex Color Pickerで指定しました。
120319 0007

グラーションを追加。一番左が黒、左から2番目が#222222、3番目が#444444、一番右が#666666。Fill Styleに作成したグラデーションを指定。
120319 0009

Inner Shadowを作成して指定。
120319 0011

文字列を追加。
120319 0012

テキストにOuter Shadowを指定。
120319 0013

でき上がったコードがこれ。

//// General Declarations
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();
 
//// Color Declarations
UIColor* color222222 = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1];
UIColor* color444444 = [UIColor colorWithRed: 0.27 green: 0.27 blue: 0.27 alpha: 1];
UIColor* color666666 = [UIColor colorWithRed: 0.4 green: 0.4 blue: 0.4 alpha: 1];
 
//// Gradient Declarations
NSArray* gradientColors = [NSArray arrayWithObjects: 
    (id)[UIColor blackColor].CGColor, 
    (id)[UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1].CGColor, 
    (id)color222222.CGColor, 
    (id)color444444.CGColor, 
    (id)[UIColor colorWithRed: 0.33 green: 0.33 blue: 0.33 alpha: 1].CGColor, 
    (id)color666666.CGColor, nil];
CGFloat gradientLocations[] = {0, 0.25, 0.45, 0.51, 0.75, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)gradientColors, gradientLocations);
 
//// Shadow Declarations
CGColorRef innerShadow = color444444.CGColor;
CGSize innerShadowOffset = CGSizeMake(0, -0);
CGFloat innerShadowBlurRadius = 2;
CGColorRef textShadow = [UIColor blackColor].CGColor;
CGSize textShadowOffset = CGSizeMake(0, -0);
CGFloat textShadowBlurRadius = 3;
 
//// Abstracted Graphic Attributes
NSString* textContent = @"Touch!";
UIFont* textFont = [UIFont fontWithName: @"Helvetica-Bold" size: 18];
 
 
//// Rounded Rectangle Drawing
UIBezierPath* roundedRectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, 0, 90, 40) cornerRadius: 4];
CGContextSaveGState(context);
[roundedRectanglePath addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(45, 40), CGPointMake(45, -0), 0);
CGContextRestoreGState(context);
 
////// Rounded Rectangle Inner Shadow
CGRect roundedRectangleBorderRect = CGRectInset([roundedRectanglePath bounds], -innerShadowBlurRadius, -innerShadowBlurRadius);
roundedRectangleBorderRect = CGRectOffset(roundedRectangleBorderRect, -innerShadowOffset.width, -innerShadowOffset.height);
roundedRectangleBorderRect = CGRectInset(CGRectUnion(roundedRectangleBorderRect, [roundedRectanglePath bounds]), -1, -1);
 
UIBezierPath* roundedRectangleNegativePath = [UIBezierPath bezierPathWithRect: roundedRectangleBorderRect];
[roundedRectangleNegativePath appendPath: roundedRectanglePath];
roundedRectangleNegativePath.usesEvenOddFillRule = YES;
 
CGContextSaveGState(context);
{
    CGFloat xOffset = innerShadowOffset.width + round(roundedRectangleBorderRect.size.width);
    CGFloat yOffset = innerShadowOffset.height;
    CGContextSetShadowWithColor(context,
        CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)),
        innerShadowBlurRadius,
        innerShadow);
 
    [roundedRectanglePath addClip];
    CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(roundedRectangleBorderRect.size.width), 0);
    [roundedRectangleNegativePath applyTransform: transform];
    [[UIColor grayColor] setFill];
    [roundedRectangleNegativePath fill];
}
CGContextRestoreGState(context);
 
 
 
 
//// Text Drawing
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, textShadowOffset, textShadowBlurRadius, textShadow);
CGRect textFrame = CGRectMake(5, 8, 80, 20);
[[UIColor whiteColor] setFill];
[textContent drawInRect: textFrame withFont: textFont lineBreakMode: UILineBreakModeWordWrap alignment: UITextAlignmentCenter];
CGContextRestoreGState(context);
 
 
//// Cleanup
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です