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!