Custom Controls from Scratch Douglas Heriot /dev/world/2012 - - PowerPoint PPT Presentation

▶
custom controls
SMART_READER_LITE
LIVE PREVIEW

Custom Controls from Scratch Douglas Heriot /dev/world/2012 - - PowerPoint PPT Presentation

Oct 26, 2023 134 likes •831 views

Custom Controls from Scratch Douglas Heriot /dev/world/2012 @DouglasHeriot http://douglasheriot.com/ Why? How? NSWindow NSTitledWindowMask NSTitledWindowMask | NSTexturedBackgroundWindowMask NSBorderlessWindowMask

slide-1
SLIDE 1
slide-2
SLIDE 2

Custom

Controls

from

Scratch

/dev/world/2012

Douglas Heriot @DouglasHeriot http://douglasheriot.com/

slide-3
SLIDE 3

Why?

slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

How?

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

NSWindow

slide-19
SLIDE 19

NSTitledWindowMask

slide-20
SLIDE 20

NSTitledWindowMask | NSTexturedBackgroundWindowMask

slide-21
SLIDE 21

NSBorderlessWindowMask

slide-22
SLIDE 22

NSBorderlessWindowMask

  • setOpaque:NO
slide-23
SLIDE 23

NSWindow

slide-24
SLIDE 24

NSView NSWindow

slide-25
SLIDE 25
  • [NSWindow contentView]
  • [NSWindow setContentView:]
slide-26
SLIDE 26
slide-27
SLIDE 27
  • drawRect:
slide-28
SLIDE 28

Let’s do that

slide-29
SLIDE 29

NSTableView

slide-30
SLIDE 30

Hundreds of subviews?

slide-31
SLIDE 31

NSCell NSView NSWindow

Used by NSView to perform drawing and handle events.

slide-32
SLIDE 32
  • (void)drawRect:(NSRect)dirtyRect

NSView

slide-33
SLIDE 33
  • (void)drawWithFrame:(NSRect)frame

inView:(NSView *)controlView

NSCell

  • (void)drawRect:(NSRect)dirtyRect

NSView

slide-34
SLIDE 34

Scrolling?

NSScrollView -copiesOnScroll

slide-35
SLIDE 35

How do we fix all this?

slide-36
SLIDE 36

Core Animation

Introduced in OS X 10.5

slide-37
SLIDE 37

Layers

slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40

Code?

slide-41
SLIDE 41

Layer-backed view

  • (id)initWithFrame:(NSRect)frame

{ if ([super initWithFrame:frame]) { self.wantsLayer = YES; } return self; }

  • (id)initWithFrame:(NSRect)frame

{ if ([super initWithFrame:frame]) { self.layer = [CALayer layer]; self.wantsLayer = YES; } return self; }

Layer-hosting view

CALayer created automatically. Don’t touch! You own the CALayer – do whatever you want.

slide-42
SLIDE 42

Layer Properties

slide-43
SLIDE 43

backgroundColor

slide-44
SLIDE 44

cornerRadius

slide-45
SLIDE 45

border

slide-46
SLIDE 46

shadow

slide-47
SLIDE 47

contents

slide-48
SLIDE 48

CAGradientLayer

slide-49
SLIDE 49

iOS

Much nicer. All views are layer-backed.

slide-50
SLIDE 50
slide-51
SLIDE 51

Table views?

Layer-backed views, stored in a reuse queue.

slide-52
SLIDE 52

Performance

slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56
slide-57
SLIDE 57
slide-58
SLIDE 58

OS X

Still has the old legacy way.

slide-59
SLIDE 59

Using more views is now recommended.

slide-60
SLIDE 60

View-based table views

slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63
slide-64
SLIDE 64

9-slice scaling

slide-65
SLIDE 65
slide-66
SLIDE 66
slide-67
SLIDE 67

Where do you start?

  • Sketch on paper
  • Mockup in Photoshop
  • Separate logical moving pieces
  • Bitmaps & CA Layer properties
  • Event handling
slide-68
SLIDE 68

Douglas Heriot

http://douglasheriot.com/ douglas@douglasheriot.com @douglasheriot University of Wollongong

slide-69
SLIDE 69