Custom UI for OS Xby Dmitry Obukhov

for CocoaHeads Moscow with ♥

• Modify the Look and Feel

• Change and extend behaviour

• Create new controls from scratch

Custom UI

Application Kit...the modern framework for building great apps!

NSViewNSView & Custom Drawing- (void)drawRect:(NSRect)dirtyRect

{

// Your drawing code here

}

NSResponder & Custom Behaviour– (void)mouseDown/Dragged/Up/Moved/Entered/Exited:(NSEvent *)theEvent;

– (void)scrollWheel:(NSEvent *)theEvent;

– (void)keyDown/Up:(NSEvent *)theEvent;

NSControl

NSCell : NSObject<NSCoding, NSCopying, NSUserInterfaceItemIdentification>

The NSCell class provides a mechanism for displaying text or images in an NSView object without the overhead of a full NSView subclass. It’s used heavily by most of the NSControl classes to implement their internal workings.

+ (Class)cellClass;

+ (void)setCellClass:(Class)class;

– (id)cell;

– (void)setCell:(NSCell *)aCell;

NSCell

NSCell

NSButtonCell

NSCell

NSMenuItemCell

NSPopUpButtonCell

NSButton

NSControl

NSPopUpButton

...

NSSegmentedControlCellNSTextFieldCellNSSliderCell

...

NSButtonCell- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView { [self drawBezelWithFrame:cellFrame inView:controlView]; [self drawInteriorWithFrame:cellFrame inView:controlView]; }

- (void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView { [self drawImage:self.image withFrame:[self imageRectForBounds:cellFrame] inView:controlView]; [self drawTitle:self.attributedStringValue withFrame:[self titleRectForBounds:cellFrame] inView:controlView]; }

- (void)drawBezelWithFrame:(NSRect)cellFrame inView:(NSView *)controlView { // Draw background and border here }

- (void)drawImage:(NSImage *)image withFrame:(NSRect)frame inView:(NSView *)controlView { // Draw image here }

- (NSRect)drawTitle:(NSAttributedString *)title withFrame:(NSRect)frame inView:(NSView *)controlView { // Draw title here }

NSButtonCell

- (void)drawSegment:(NSInteger)segment inFrame:(NSRect)frame withView:(NSView *)controlView { // Draw segment background and border here }

- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView { // Draw control background and border here }

NSSegmentedCell

Cocoa Drawing

CGNS

Cocoa Drawing

- (void)drawRect:(NSRect)dirtyRect { static NSGradient *glassGradient = nil; if (glassGradient == nil) { glassGradient = [[NSGradient alloc] initWithColorsAndLocations: [NSColor colorWithCalibratedWhite:(253.0 / 255.0) alpha:1.0], 0.0, [NSColor colorWithCalibratedWhite:(242.0 / 255.0) alpha:1.0], 0.45, [NSColor colorWithCalibratedWhite:(230.0 / 255.0) alpha:1.0], 0.45, [NSColor colorWithCalibratedWhite:(230.0 / 255.0) alpha:1.0], 1.0, nil]; } [NSGraphicsContext saveGraphicsState]; [[NSColor windowFrameColor] set]; NSRectFill(self.bounds); NSRect backgroundRect = NSMakeRect(0.0, 0.0, NSWidth(self.bounds), NSHeight(self.bounds) - 1.0); [glassGradient drawInRect:backgroundRect angle:-90.0]; [NSGraphicsContext restoreGraphicsState]; }

Cocoa Drawing

Tips & Tricks

•Use less views

•Draw less - (void)drawRect:(NSRect)dirtyRect;- (BOOL)inLiveResize;- (BOOL)preservesContentDuringLiveResize;

•Be opaque- (BOOL)isOpaque;

•Cache- (void)cacheImageInRect:(NSRect)rect;

Performance

•Enabled/Disabled - (BOOL)isEnabled;

•Focus - (BOOL)becomeFirstResponder;

•Active/Inactive - (BOOL)isKeyWindow;

•Someone uses a graphite theme - (NSControlTint)currentControlTint;

- (NSColor *)colorForControlTint:(NSControlTint)tint;

State & Behaviour

Thanks!Dmitry Obukhov

stel2k@gmail.com