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

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

2011年1月25日火曜日 | Published in Mac OS X 10.6, サンプルあり | 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];

これだけ。階調を具合をノンリニアにする為に色の指定を３つ行っている。またセルの境界を綺麗に見せる為に、上と下、左に灰色の線を引いている。さらに線が引き締まって見えるようにアンチエイリアスを切って描画する。

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];