iOS: Core MacWilliam iOS: Core Graphics and Core...
Transcript of iOS: Core MacWilliam iOS: Core Graphics and Core...
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
iOS: Core Graphics and Core Animation
Tommy MacWilliam
Harvard University
April 19, 2011
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Announcements
I Lectures: http://cs76.net/LecturesI Sections: http://cs76.net/Sections
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Today
I Core Graphics DrawingI Working with ImagesI Core AnimationI Integrating with Other Apps
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Quartz
I 2D drawing engine for iOSI works with all Core Animation, OpenGL ES, and UIKit
I layers painted to canvasI objects drawn in the order the appear
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Context
I CGContextRef: where to draw outputI UIGraphicsGetCurrentContext() for current
windowI also PDFs, bitmaps, etc.
I drawRect: UIView method called to draw contentsI setNeedsDisplay to force redraw
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Paths
I defined by CGMutablePathRef (created viaCGPathCreateMutable())
I point: single point in 2D spaceI CGPathMoveToPoint
I line: defined by endpoints (one endpoint is currentpoint, so define other)
I CGPathAddLineToPoint
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Paths
I cubic Bezier curves: defined by 3 control points andendpoint
I CGPathAddCurveToPoint
I quadratic Bezier curves: defined by 2 control pointsand endpoint
I CGPathAddQuadCurveToPoint
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Paths
I CGPathCloseSubpath: close pathI CGContextAddPath: add path to contextI CGContextFillPath: create shape from pathI CGContextStrokePath: create outline from path
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Paths
I CGContextSetLineWidth: set stroke weightI CGContextSetLineCap: set how lines endI CGContextSetLineDash: draw dotted lineI CGContextSetStrokeColorWithColor: set color
(UIColors have property for CGColor)
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Paths
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Shadows
I need x offset, y offset, blurI CGContextSetShadow orCGContextSetShadowWithColor to draw shadows
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Saving State
I push and pop from stack of statesI resetting everything is annoying
I CGContextSaveGState: push state onto stackI CGContextRestoreGState: pop value off stack
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Shadows and State
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Gradients
I CGGradientRef can create axial and radial gradients(CGGradientCreateWithColorComponents)
I axial: color varies along line (same color alongperpendicular)
I radial: color varies along concentric circles (same coloralong given circumference)
I need color space, colors, and locations for each color
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Color Spaces
I CGColorSpaceCreateDeviceRGB(): RGB (red,green, blue)
I CGColorSpaceCreateDeviceCMYK(): CMYK (cyan,magenta, yellow, key)
I CGColorSpaceCreateDeviceGray(): grayscale
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Gradients
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Custom Views
I drawRect is a method of any UIViewI subclass UIView, UIButton, etc. to create custom
views
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Custom Views
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
UIImageView
I image: UIImage to be displayedI imageWithData can load remote URL
I handles scaling and aspect ratios for you!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
UIImagePickerController
I modal view controller allowing for selection of imagefrom library
I sourceType: where to get images fromI presentModalViewController (just like any other
view controller) to display
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
UIImagePickerControllerDelegate
I make sure to set delegate property!I imagePickerController:didFinishPickingMediaWithInfo: user selected image
I can get UIImagePickerControllerEditedImageor UIImagePickerControllerOriginalImagefrom passed dictionary
I imagePickerControllerDidCancel: user clicked“Cancel” instead of selecting image
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Image Picker
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
UIImage
I UIImage ready to use with Core Graphics viaCGImage
I drawInRect: draw UIImage in given CGRect
I CGContextDrawImage: draw CGImage in givenCGRect
I different coordinate system, so image will beupside-down!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Transforms
I CGContextRotateCTM: rotate about a pointI CGContextScaleCTM: change sizeI CGContextTranslateCTM: move in a direction
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Clipping
I rectangles are boring!I remember CGMutablePathRef?I CGContextClip restricts all drawings to last path
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
UIImage
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Core Animation
I animate 2D layers in 3D spaceI implicit: set new properties, get smooth animationI explicit: full control over timing, etc.
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Core Animation
I add QuartzCore.framework to projectI #import “QuartzCore/CAAnimation.h”
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Implicit Animation
I static methods to UIViews set animation propertiesI enclosed in beginAnimations:context: andcommitAnimation
I changed properties will animate automatically
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Implicit Animation
I setAnimationTransition: lots of stock animationsbuilt in
I setAnimationDuration: time, in seconds, ofanimation
I setAnimationDelegate,setAnimationDidStopSelector: register callbacks
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Implicit Animation
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Layers
I CALayer has contents to be animatedI UIView has underlying layer, so we can animate
them
I provide content via content property, via delegate, orsubclass
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Keyframe Animation
I CAKeyframeAnimation creates a custom animationI key path specifies what property will be animated
I animatable properties: http://developer.apple.com/library/ios/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/AnimProps.html
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Animation Paths
I CGMutablePathRef again!I path specifies path layer can be animated along
(position keypath)I duration for animation in seconds
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Transforms
I CATransform3DMakeRotation: rotation matrixI CATransform3DMakeScale: scaling matrixI CATransform3DMakeTranslation: translation
matrixI values gives NSArray of frames
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Keyframe Animations
I example time!
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Opening Other Apps
I just like Android, other apps opened via URLsI [[UIApplication sharedApplication]openURL:url]
I where url is an NSURL (schemes like http://,tel:, sms:)
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Being Opened by Other Apps
I specify your own URLs with <appname>-Info.plist (like AndroidManifest.xml)
I application:handleOpenURL: fired when appopened from URL
iOS: CoreGraphics and
CoreAnimation
TommyMacWilliam
Core GraphicsDrawing
Working withImages
CoreAnimation
Integratingwith OtherApps
Integrating with Other Apps
I example time!