Custom UI for OS X

A talk from CocoaHeads Moscow August'12 meeting (http://www.cocoaheads.ru).

Video: http://youtu.be/mFcbmmPi5fg

Transcript

1. Custom UI for OS X by Dmitry Obukhov for CocoaHeads Moscow with ♥
2. • Modify the Look and Feel • Change and extend behaviour • Create new controls from scratch Custom UI
3. Application Kit ...the modern framework for building great apps!
4. NSView NSView & 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;
5. 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
6. NSCell NSButtonCell NSCell NSMenuItemCell NSPopUpButtonCell NSButton NSControl NSPopUpButton ... NSSegmentedControlCell NSTextFieldCell NSSliderCell ...
7. 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]; }
8. - (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
9. - (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
10. Cocoa Drawing CGNS
11. Cocoa Drawing
12. - (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
13. Tips & Tricks
14. •Use less views •Draw less - (void)drawRect:(NSRect)dirtyRect; - (BOOL)inLiveResize; - (BOOL)preservesContentDuringLiveResize; •Be opaque - (BOOL)isOpaque; •Cache - (void)cacheImageInRect:(NSRect)rect; Performance
15. •Enabled/Disabled - (BOOL)isEnabled; •Focus - (BOOL)becomeFirstResponder; •Active/Inactive - (BOOL)isKeyWindow; •Someone uses a graphite theme - (NSControlTint)currentControlTint; - (NSColor *)colorForControlTint:(NSControlTint)tint; State & Behaviour
16. Thanks! Dmitry Obukhov stel2k@gmail.com