PaintCodeを買ってみたので、早速iOSアプリ用ボタンを作ってみました。
直感的に使用できるし、ボタン作成には丁度いいアプリでした。PDFで書き出すとAdobe Illustratorでレイヤーが保存された状態で利用できるので、効果をつけたりしたい場合はイラレに持っていくこともできます(それなら最初からイラレで作るって？）。やはりコードが出力されるのが魅力かな。
起動するとWindowが表示されます。
カンバスサイズを90×40に変更します。OS X/iOSのボタンをiOSに変更します。コードがiOS向けになります。原点表示も左上になります。
角丸長方形を描画。ストローク無しです。
#222222/#444444/#666666の色設定を追加。Hex Color Pickerで指定しました。
グラーションを追加。一番左が黒、左から2番目が#222222、3番目が#444444、一番右が#666666。Fill Styleに作成したグラデーションを指定。
Inner Shadowを作成して指定。
文字列を追加。
テキストにOuter Shadowを指定。
でき上がったコードがこれ。
//// 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); |