[Mac] NSTableView - ヘッダのカスタマイズ [2] グラデーション

2011年1月25日火曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

[前回] Cocoaの日々: [Mac] NSTableView - ヘッダのカスタマイズ [1] NSTableHeaderCell

デザインにグラデーションを使い見た目をもう少し良くする。こんな感じ。
before:
after:


グラデーション


グラデーションを描画するには 10.5 から導入された NSGradient を使うと簡単にできる。
[参考] (旧) Cocoaの日々: NSGradiation

前回の描画コードに下記のコードを追加する。
NSArray* colorArray = [NSArray arrayWithObjects:
         [NSColor colorWithDeviceWhite:0.6 alpha:1.0],
         [NSColor colorWithDeviceWhite:0.3 alpha:1.0],
         [NSColor colorWithDeviceWhite:0.2 alpha:1.0],
         nil];
 NSGradient* gradient = [[NSGradient alloc] initWithColors:colorArray];
 [gradient drawInRect:rect angle:90.0];
これだけ。階調を具合をノンリニアにする為に色の指定を3つ行っている。またセルの境界を綺麗に見せる為に、上と下、左に灰色の線を引いている。さらに線が引き締まって見えるようにアンチエイリアスを切って描画する。
NSGraphicsContext* gc = [NSGraphicsContext currentContext];
 [gc saveGraphicsState];
 [gc setShouldAntialias:NO];
 
 NSBezierPath* path = [NSBezierPath bezierPath];
 [path setLineWidth:1.0];
 NSPoint p = NSMakePoint(rect.origin.x, rect.origin.y+2.0);
 [path moveToPoint:p];
 
 p.y += rect.size.height-2.0;
 [path lineToPoint:p];
 p.x += rect.size.width;
 [path lineToPoint:p];
 
 p = NSMakePoint(rect.origin.x, rect.origin.y+1.0);
 [path moveToPoint:p];
 p.x += rect.size.width;
 [path lineToPoint:p];
 
 [[NSColor colorWithDeviceWhite:0.0 alpha:0.2] set];
 [path stroke];
 
 [gc restoreGraphicsState];


ソースコード


GitHub からどうぞ。
CustomHeaderSample at 2011-01-25 from xcatsan/MacOSX-Sample-Code - GitHub


参考情報


(旧) Cocoaの日々: HUD用のボタンを作る
グラデーションつながりで。ここではグラデーション付きのボタンの描画を紹介している。

NSGradient Class Reference

開発中の SimpleCap 1.3 でも活用中。

Responses

Leave a Response

人気の投稿(過去 30日間)