![描画処理のキホン
[UIView drawRect: ... ] 内で…
1. 点をつないで「パス」をつくる
2. パスを塗ったり、影をつけたりする](https://image.slidesharecdn.com/iphonedevjpcreateoriginaluicomponent-120526015148-phpapp02/85/Core-Graphics-UI-11-320.jpg)
![背景グラデーションを準備する
CGColorGetComponents
int numComponents =
CGColorGetNumberOfComponents([backgroundColor
CGColor]);
const CGFloat *components =
CGColorGetComponents([backgroundColor CGColor]);
if (numComponents == 2) {
red = components[0];
green = components[0];
blue = components[0];
alpha = components[1];
}
else {
red = components[0];
green = components[1];
blue = components[2];
背景色の色要素を分解して
red, green, blue, alpha を取得](https://image.slidesharecdn.com/iphonedevjpcreateoriginaluicomponent-120526015148-phpapp02/85/Core-Graphics-UI-23-320.jpg)
![背景グラデーションを準備する
CGFloat colorList[] = {
//red, green, blue, alpha
red*1.16+colourHL, green*1.16+colourHL, blue*1.16+colourHL,
alpha,
red*1.16+colourHL, green*1.16+colourHL, blue*1.16+colourHL,
alpha,
red*1.08+colourHL, green*1.08+colourHL, blue*1.08+colourHL,
1.16倍: 明るく
1.16倍: 明るく
1.08倍: ちょっと明るく
背景色
背景色](https://image.slidesharecdn.com/iphonedevjpcreateoriginaluicomponent-120526015148-phpapp02/85/Core-Graphics-UI-24-320.jpg)
![背景グラデーションを作成する
CGGradientCreateWithColorComponents
CGFloat bubbleMiddle = (bubbleRect.origin.y + bubbleRect.size.height / 2))
/ self.bounds.size.height;
CGFloat locationList[] = {0.0,
bubbleMiddle - 0.03, bubbleMiddle, bubbleMiddle + 0.03,
1.0};
...
myGradient =
CGGradientCreateWithColorComponents(
myColorSpace, colorList, locationList, locationCount);
0.0
bubbleMiddle ±0.03
1.0](https://image.slidesharecdn.com/iphonedevjpcreateoriginaluicomponent-120526015148-phpapp02/85/Core-Graphics-UI-25-320.jpg)
![文字を描く
[NSString drawInRect: ... ]
[textColor set];
CGRect textFrame = [self contentFrame];
[self.message drawInRect:textFrame
withFont:textFont
lineBreakMode:UILineBreakModeWordWrap
alignment:UITextAlignmentCenter];](https://image.slidesharecdn.com/iphonedevjpcreateoriginaluicomponent-120526015148-phpapp02/85/Core-Graphics-UI-28-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (10)
Similar to Core Graphicsでつくる自作UIコンポーネント入門 (20)
Recently uploaded (15)
Core Graphicsでつくる自作UIコンポーネント入門
- 2. cocoponって誰ですか @cocopon デザイナに憧れる ホビープログラマです Windows用の Mac用の iPhone用の ゲームとか オフラインブログとか クミタテ電卓とか Osciroi Calqum
- 3. 今日のお題…の前に 前回発表のハイライト …救世主があらわれた！
- 4. 今日のお題…の前に XVim!! Vimmerは今すぐダウンロードすべし https://github.com/JugglerShu/XVim 見覚えのある「コマンドライン」が！ これで勝てる！！！
- 5. 今日のお題 ステキなUIのアプリ、たくさんありますよね Path Twittelator Neue Paylog
- 6. 今日のお題 どれもUIKit標準では用意されていない… ど う や って 作 ってるん だろう？
- 7. 今日のお題 オープンソースの フキダシUIコンポーネント 「CMPopTipView」を題材に、 CoreGraphicsを使った UIコンポーネント自作の 基礎を見てみよう
- 10. 画像リソースは…ありません！ CMPopTipView.hと CMPopTipView.mのみ どうやって描いてるの？
- 11. 描画処理のキホン [UIView drawRect: ... ] 内で… 1. 点をつないで「パス」をつくる 2. パスを塗ったり、影をつけたりする
- 12. なぜ画像を使わないのか メリットが大きいから！ デメリットもある ★ 実行時のカスタマイズが容易 ★ コードで描くので少し面倒 色とか、角丸のサイズとか… 複雑な描画は心が折れる ★ 画像リソースがないので、 その分サイズが小さくなる
- 13. 描画処理の準備 UIGraphicsGetCurrentContext CGContextRef c = UIGraphicsGetCurrentContext(); 描画するときに必要です
- 14. パス用の変数を用意する CGPathCreateMutable CGMutablePathRef bubblePath = CGPathCreateMutable(); “Mutable” は「変更可能」という意味 少しずつパスを作っていける
- 15. フキダシの方向で処理を分ける if (pointDirection == PointDirectionUp) { ... } else { ... } PointDirectionUp PointDirectionDown 今回はこちら側を読み進めます
- 16. パスの始点を決める CGPathMoveToPoint CGPathMoveToPoint(bubblePath, NULL, targetPoint.x, targetPoint.y);
- 17. パスに直線を追加 CGPathAddLineToPoint CGPathAddLineToPoint(bubblePath, NULL, targetPoint.x-pointerSize, targetPoint.y-pointerSize);
- 18. パスに角丸を追加 CGPathAddArcToPoint CGPathAddArcToPoint( bubblePath, NULL, bubbleRect.origin.x, bubbleRect.origin.y + bubbleRect.size.height, bubbleRect.origin.x, bubbleRect.origin.y + bubbleRect.size.height - cornerRadius, cornerRadius); CGPathAddArcToPoint( 追加するパス, NULL, 角のX, Y, 終点のX, Y, 角丸の半径)
- 20. パスを閉じる CGPathCloseSubpath CGPathCloseSubpath(bubblePath); これで1周して、フキダシ形のパスが完成！
- 21. パスを描く、その前に CGContextSave(/Restore)GState CGContextSaveGState(c); CGContextAddPath(c, bubblePath); CGContextSetShadow(c, CGSizeMake(0, 3), 5); CGContextSetRGBFillColor(c, 0.0, 0.0, 0.0, 0.9); CGContextFillPath(c); CGContextRestoreGState(c); コンテキストに設定した情報 (描画色やパスなど)を保存/復元 描画処理のカタマリごとに囲って、 他のカタマリに影響が出ないように書くのがベター
- 22. 影を描く CGContextSetShadow, ~FillPath CGContextSaveGState(c); CGContextAddPath(c, bubblePath); CGContextSetShadow(c, CGSizeMake(0, 3), 5); CGContextSetRGBFillColor(c, 0.0, 0.0, 0.0, 0.9); CGContextFillPath(c); CGContextRestoreGState(c); CGContextSetShadow( コンテキスト, 影の位置のずれ, ぼかし量) 設定した色・パスの形で影を描画
- 23. 背景グラデーションを準備する CGColorGetComponents int numComponents = CGColorGetNumberOfComponents([backgroundColor CGColor]); const CGFloat *components = CGColorGetComponents([backgroundColor CGColor]); if (numComponents == 2) { red = components[0]; green = components[0]; blue = components[0]; alpha = components[1]; } else { red = components[0]; green = components[1]; blue = components[2]; 背景色の色要素を分解して red, green, blue, alpha を取得
- 24. 背景グラデーションを準備する CGFloat colorList[] = { //red, green, blue, alpha red*1.16+colourHL, green*1.16+colourHL, blue*1.16+colourHL, alpha, red*1.16+colourHL, green*1.16+colourHL, blue*1.16+colourHL, alpha, red*1.08+colourHL, green*1.08+colourHL, blue*1.08+colourHL, 1.16倍: 明るく 1.16倍: 明るく 1.08倍: ちょっと明るく 背景色 背景色
- 25. 背景グラデーションを作成する CGGradientCreateWithColorComponents CGFloat bubbleMiddle = (bubbleRect.origin.y + bubbleRect.size.height / 2)) / self.bounds.size.height; CGFloat locationList[] = {0.0, bubbleMiddle - 0.03, bubbleMiddle, bubbleMiddle + 0.03, 1.0}; ... myGradient = CGGradientCreateWithColorComponents( myColorSpace, colorList, locationList, locationCount); 0.0 bubbleMiddle ±0.03 1.0
- 26. 背景を塗る CGContextDrawLinearGradient CGContextAddPath(c, bubblePath); CGContextClip(c); ... CGPoint startPoint, endPoint; startPoint.x = 0; startPoint.y = 0; endPoint.x = 0; endPoint.y = CGRectGetMaxY(self.bounds); CGContextClipでフキダシ型にクリップしてから塗る
- 27. 作ったものは、解放しよう CG*Release CGGradientRelease(myGradient); CGColorSpaceRelease(myColorSpace); ... CGPathRelease(bubblePath); Create~ な関数で作ったものは、 解放しないとリークするよ 「ちゃんと解放してね」 ドキュメントにしっかりと 書いてあります
- 28. 文字を描く [NSString drawInRect: ... ] [textColor set]; CGRect textFrame = [self contentFrame]; [self.message drawInRect:textFrame withFont:textFont lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentCenter];
- 29. 自作の幅をさらに広げる キーワード
- 30. CoreAnimation 複雑なアニメーション CAKeyframeAnimationで Path風のメニューを実現 https://github.com/levey/AwesomeMenu/
- 31. CoreAnimation 3次元の変形 CATransform3Dで Clear風の折り畳みを実現 https://github.com/mpospese/MPFoldTransition/
- 32. 作りはじめる、その前に
- 33. そのコンポーネント、もうあるかもよ 車輪の再発明はもったいない まずはネットで探してみよう Cocoa Controls http://cocoacontrols.com/
- 34. 作り終わった、そのあとは
- 35. 世界に公開してみよう 受けた恩恵は還元して、 「みんなでハッピー」を目指そう github.com
- 36. 自分も公開してみました https://github.com/cocopon/CQMFloatingController クミタテ電卓Calqumの 定数選択用コンポーネントを 整理・切り出し CoreGraphics使用、画像不使用 今回の内容の復習に最適！
- 37. 自分も公開してみました https://github.com/cocopon/CQMFloatingController クミタテ電卓Calqumの 定数選択用コンポーネントを 整理・切り出し CoreGraphics使用、画像不使用 今回の内容の復習に最適！
- 38. CoreGraphicsでつくる 自作UIコンポーネント入門 DOTAPON Software @cocopon http://dotapon.sakura.ne.jp