Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AppKit for UIKit developers
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Florian Kugler
October 05, 2014
Programming
320
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
AppKit for UIKit developers
Florian Kugler
October 05, 2014
More Decks by Florian Kugler
See All by Florian Kugler
Pragmatic Core Data
floriankugler
0
8.2k
Interactive Animations
floriankugler
1
240
Parallele Programmierung (German!)
floriankugler
0
850
Graphics Performance across iOS Devices
floriankugler
5
1.2k
A Guided Tour Through the SproutCore Jungle
floriankugler
0
1.2k
Other Decks in Programming
See All in Programming
Google Apps Script で Ruby を動かす
kawahara
0
140
komatsuna「分散システムにおけるバグ分析手法」
komatsunaqa
0
240
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
susisu
0
150
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
870
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
kosuket
0
440
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
670
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
150
Android CLI
fornewid
0
210
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
590
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
350
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
180
Built Our Own Background Agent at LayerX
layerx
PRO
9
5.1k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Bash Introduction
62gerente
615
220k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Balancing Empowerment & Direction
lara
6
1.2k
The Language of Interfaces
destraynor
162
27k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.1k
Practical Orchestrator
shlominoach
191
12k
ラッコキーワード サービス紹介資料
rakko
1
4.3M
Faster Mobile Websites
deanohume
310
32k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Transcript
APPKIT for UIKIT%DEVELOPERS ! @FLORIANKUGLER #Pragma'Conference'2014
#Pragma'Conference'2014
#Pragma'Conference'2014
#Pragma'Conference'2014
#Pragma'Conference'2014
#Pragma'Conference'2014
SIMILARITIES #Pragma'Conference'2014
SHARED'FRAMEWORKS Founda'on Core%Graphics Core%Data Core%Anima+on ... #Pragma'Conference'2014
UIWindow & NSWindow #Pragma'Conference'2014
UIViewController & NSViewController #Pragma'Conference'2014
UIView & NSView #Pragma'Conference'2014
UIControl & NSControl #Pragma'Conference'2014
CONCEPTUALLY+SIMILAR,+PRACTICALLY+ NOT+SO+MUCH UIWindow)≠)NSWindow UIViewController)≠)NSViewController UIView)≠)NSView UIControl)≠)NSControl #Pragma'Conference'2014
DIFFERENCES #Pragma'Conference'2014
VIEW%SYSTEM #Pragma'Conference'2014
#Pragma'Conference'2014
WINDOWS @interface MyWindowController : NSWindowController @end @implementation MyWindowController - (instancetype)init
{ return [super initWithWindowNibName:@"MyWindow"]; } @end #Pragma'Conference'2014
WINDOW&CONTROLLERS Part%of%the%responder%chain Very%similar%to%UIViewController Typically(become(very(large #Pragma'Conference'2014
UIVIEWCONTROLLER,VS., NSVIEWCONTROLLER NSViewController-gained-lots-of- UIViewController's-capabili9es-in-10.10 Part%of%the%responder%chain Nested&view&controllers #Pragma'Conference'2014
UIVIEW Vs. NSVIEW #Pragma'Conference'2014
NSVIEW AppKit&predates&Core&Anima0on&by&a&long&0me Views&on&the&Mac&are¬&layer&backed& by&default #Pragma'Conference'2014
LAYER&BACKING Best%prac*ce:% Enable'on'window's'content'view self.contentView.wantsLayer = YES; Never%touch%wantsLayer%again #Pragma'Conference'2014
LAYER&BACKING Layers'are'an'implementa.on'detail Do not touch! #Pragma'Conference'2014
You$can$modify$layer$proper1es$in$updateLayer,$ but$then$drawRect:$is$not$called$anymore. #Pragma'Conference'2014
@implementation ColoredView - (BOOL)wantsUpdateLayer { return YES; } - (void)updateLayer
{ self.layer.backgroundColor = self.backgroundColor.CGColor; } - (void)setBackgroundColor:(NSColor *)backgroundColor { _backgroundColor = backgroundColor; [self setNeedsDisplay:YES]; } @end #Pragma'Conference'2014
LAYER&HOSTING Layer&hos*ng&views&own&their&backing&layer&and& its&sub7layers You$control$those$layers$and$can$modify$them$ at$will You$cannot$use$sub,views$anymore #Pragma'Conference'2014
- (instancetype)initWithFrame:(NSRect)frame { self = [super initWithFrame:frame]; if (self) {
self.layer = [[CALayer alloc] init]; self.wantsLayer = YES; } } #Pragma'Conference'2014
EVERYTHING*IS upside down #Pragma'Conference'2014
COORDINATE*SYSTEM By#default#the#view's#origin#is#in#the# lower5le6#corner (Just as it was in math class)
Override'flipped'if'you're'ge.ng'dizzy. #Pragma'Conference'2014
THE$WEIRD$WORLD$OF NSCELL #Pragma'Conference'2014
CELLS Many%controls%are%backed%by%cells Controls(delegate(drawing(to(their(cells For$custom$controls$you'll$o.en$have$to$ subclass$both (For%example%NSButton%and%NSButtonCell) #Pragma'Conference'2014
ANIMATIONS #Pragma'Conference'2014
ANIMATIONS Anima&on(of(non*layer*backed(views(is( CPU(intensive With%layer+backed%views%the%GPU%can%help #Pragma'Conference'2014
REMEMBER? Don't Touch BACKING(LAYERS #Pragma'Conference'2014
ANIMATOR(PROXY view.animator.alphaValue = .5; view.animator.frame = NSZeroRect; #Pragma'Conference'2014
ANIMATION'CONTEXT [NSAnimationContext runAnimationGroup:^(NSAnimationContext *ctx){ ctx.duration = 1; ctx.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn]; view.animator.alphaValue = .5; } completionHandler:^{ // ... }]; #Pragma'Conference'2014
ANIMATION'CONTEXT [NSAnimationContext runAnimationGroup:^(NSAnimationContext *ctx){ ctx.allowsImplicitAnimations = YES; [self layoutSubtreeIfNeeded]; }
completionHandler:^{ // ... }]; #Pragma'Conference'2014
CORE%ANIMATION CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.values = @[@1, @.9,
@.8, @.7, @.6]; view.animations = @{@"alphaValue": animation}; view.animator.alphaValue = .5; #Pragma'Conference'2014
LAYER&REDRAW&POLICY By#default#layers#are#redrawn#with#every#frame# of#the#anima4on self.layerContentsRedrawPolicy = NSViewLayerContentsRedrawOnSetNeedsDisplay; #Pragma'Conference'2014
IMAGES #Pragma'Conference'2014
UIIMAGE vs. NSIMAGE #Pragma'Conference'2014
IMAGE&REPRESENTATIONS One$image$is$backed$by$one$or$mul3ple$ representa3ons: NSBitmapImageRep! NSPDFImageRep! NSEPSImageRep! NSCIImageRep! ...! #Pragma'Conference'2014
IMAGE&REPRESENTATIONS The$representa+on$to$use$is$chosen$at$drawing$ +me,$matching$the$current$graphics$context$and$ drawing$dimensions #Pragma'Conference'2014
RESOLUTION*VS.*SIZE Image&representa,ons&have&three& dimension&proper,es: size,&pixelsWide,&pixelsHigh Resolu'on)is)calculated)from)the) representa'on's)size)and) pixel)dimensions #Pragma'Conference'2014
CONVENIENCE'DRAWING It's%very%easy%to%draw%an%image: [NSImage imageWithSize:(NSSize)size flipped:(BOOL)drawingHandlerShouldBeCalledWithFlippedContext drawingHandler:^BOOL (NSRect dstRect) { //
your drawing commands here... }]; #Pragma'Conference'2014
COLORS #Pragma'Conference'2014
COLORS The$Mac$supports$fully$ color1calibrated$workflows Specify(a(colorspace(when(instan2a2ng( color(objects #Pragma'Conference'2014
COLORS #Pragma'Conference'2014
COLORS +[NSColor colorWithSRGBRed: green: blue: alpha:] #Pragma'Conference'2014
SANDBOXING #Pragma'Conference'2014
SANDBOXING Sandboxing*is*a*good*thing*conceptually Sandboxing*on*the*Mac*doesn't*work* for*everyone Feels%more%restric,ve%on%OS%X,% because%there%were%no%restric,ons%before #Pragma'Conference'2014
CONSIDER)IT)early)IN)THE DEVELOPMENT)PROCESS! #Pragma'Conference'2014
SUPERPOWERS #Pragma'Conference'2014
MAC$ONLY Inter&process+communica0on Scrip&ng Plugins Daemons ... #Pragma'Conference'2014
OBJC.IO/ISSUE+14 #Pragma'Conference'2014
THANK&YOU! @FLORIANKUGLER OBJC.IO'[/BOOKS] DECKSETAPP.COM #Pragma'Conference'2014
FURTHER'READING AppKit&for&UIKit&developers&on&objc.io objc.io&issue Mike&Ash&on&windows&and&window&controllers Adding&view&controllers&to&the&responder&chain&pre&10.10 IntroducAon&to&View&Programming&Guide&for&Cocoa Cocoa&Drawing&Guide WWDC:&Layer&Backed&Views:&AppKit&+&Core&AnimaAon WWDC:&OpAmizing&Drawing&and&Scrolling WWDC:&Best&PracAces&for&Cocoa&AnimaAon
Layer&properAes&you're¬&supposed&to&touch Jonathan&Willing's&guide&to&OS&X&animaAons IntroducAon&to&Color&Programming&Topics IntroducAon&to&Color&Management Sandboxing&Guides #Pragma'Conference'2014