Using and Creating Images in iOS

This talk will cover using images in iOS, from loading from the disk and network efficiently to creating images from scratch in your iOS app. WIth five separate screen resolutions to account for, images can quickly get out of hand, increasing the size of your binary and making it a nightmare to support. We'll look at making stretchable images that can support any resolution, creating thumbnails of large images, and even look at a new library I've created for rendering images on the fly.

Transcript

1. Using Images in iOS Jeff Kelley | @SlaunchaMan MobiDevDay, May 4, 2013 Saturday, May 4, 13
2. Who Am I? Saturday, May 4, 13
3. Using Images in iOS Saturday, May 4, 13
4. Using Images in iOS Saturday, May 4, 13
5. Why A Talk About Images? Saturday, May 4, 13
6. iDevice Displays Saturday, May 4, 13
7. Image Pitfalls • One uncompressed Retina iPad image file: ~12 MB • App Store download limit for non-WiFi connections: 50 MB • One uncompressed background image for all resolutions: ~18 MB Saturday, May 4, 13
8. Special Images in the Bundle • Icon Files • 29x29 (iPhone Settings) • 50x50 (iPad Search Results) • 57x57 (iPhone Icon) • 58x58 (iPhone Settings, Retina) • 72x72 (iPad Icon) • 100x100 (iPad Search Results, Retina) • 114x114 (iPhone Icon, Retina) • 144x144 (iPad Icon, Retina) Saturday, May 4, 13
9. Special Images in the Bundle • iTunes Artwork • Include as ‘iTunesArtwork’ (no extension) for ad-hoc builds • now must be 1024x1024 • Warn your designer! • Consider using vector graphics Saturday, May 4, 13
10. Special Images in the Bundle • Default Images • Display while your app is launching • One for each resolution/rotation • Separate image for iPhone 5 • The presence of this image indicates whether your app has iPhone 5 support Saturday, May 4, 13
11. How can we balance good UIs with image sizes? Saturday, May 4, 13
12. Retina Graphics • Everything on an iOS display is measured in points, not pixels • To get the pixel dimensions of an image, multiply scale by size • Images created with +imageNamed: automatically seek out image files with the “@2x” suffix before the extension • “image.png” and “image@2x.png” Saturday, May 4, 13
13. Retina Graphics • Tell your designers: design for non-Retina, create for Retina • Yes, this is hard. • Retina graphics must be exactly twice the scale—no odd dimensions. • Even with drop shadows! Saturday, May 4, 13
14. Stretchable Images • Once you have an image, you can create a resizable version that can resize to any arbitrary size •- (UIImage *)resizableImageWithCapInsets: (UIEdgeInsets)capInsets; • The inner portion is tiled or stretched Saturday, May 4, 13
15. Stretchable Images Top Bottom Left Right Saturday, May 4, 13
16. Demo Saturday, May 4, 13
17. Animated Images • Load individual frames of an animation as separate images and cycle through them • Can initialize with an array of images or with a prefix • Up to 1,024 frames Saturday, May 4, 13
18. Animated Images • Creating from a prefix: + (UIImage *)animatedImageNamed:(NSString *)name duration:(NSTimeInterval)duration; • Creating from an array: + (UIImage *)animatedImageWithImages:(NSArray *)images duration:(NSTimeInterval)duration; Saturday, May 4, 13
19. Demo Saturday, May 4, 13
20. Animated Images • If you’re really crazy: •+ (UIImage *)animatedResizableImageNamed:(NSString *)name capInsets:(UIEdgeInsets)capInsets duration: (NSTimeInterval)duration; Saturday, May 4, 13
21. Image Patterns • Sometimes you want to make a tiny image repeat, such as in a background • Create a UIColor object with the image as a pattern: UIColor *myPatternColor = [UIColor colorWithPatternImage:myImage]; • Great way to save space Saturday, May 4, 13
22. Demo Saturday, May 4, 13
23. “We’ll Do It Live!”: Rendering with CoreGraphics Saturday, May 4, 13
24. CoreGraphics • AKA QuartzCore •<QuartzCore/QuartzCore.h> • Allows you to draw graphics yourself as opposed to including images Saturday, May 4, 13
25. Custom View Rendering • The easiest path to custom drawing • Override -drawRect: Saturday, May 4, 13
26. Graphics Contexts • Graphics contexts, represented by the CGContext opaque type, are the thing you draw into • In -drawRect:, you can get the current context with UIGraphicsGetCurrentContext() Saturday, May 4, 13
27. Demo Saturday, May 4, 13
28. Custom Drawing • A view doesn’t always redraw itself • Call -setNeedsDisplay to mark it as dirty • When marked as dirty, will re-draw in the event loop Saturday, May 4, 13
29. Custom Drawing • Can be a performance problem • Lots of duplicate rendering effort Saturday, May 4, 13
30. Problem: Interpolation • Images resized in UIImageViews have no control over interpolation quality • Bad solution: multiple images in the bundle, resized to the necessary sizes • How can we resize an image with good quality? Saturday, May 4, 13
31. Interpolating with CoreGraphics • Create a new bitmap graphics context • Set its interpolation quality to high • Draw the original image into the context • Get a new image Saturday, May 4, 13
32. Demo Saturday, May 4, 13
33. Image Data • CoreGraphics is fun and all, but sometimes you need to access pixel data • What is pixel data? How is it formatted • iOS uses (mostly) RGBA8888 format • What the heck does that mean? Saturday, May 4, 13
34. Color Spaces • CGColorSpace opaque type • Two main color spaces to worry about: • CGColorSpaceCreateDeviceGray() • CGColorSpaceCreateDeviceRGB() • Defines the number of components Saturday, May 4, 13
35. Graphics Context Options CGContextRef CGBitmapContextCreate ( void *data, size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow, CGColorSpaceRef colorspace, CGBitmapInfo bitmapInfo ); Saturday, May 4, 13
36. Getting Pixel Data • Create a buffer of pixel data to draw into • We’ll use uint8_t for unsigned 8-bit integers • Create a bitmap image context • Draw the image into the context • Voilà! Saturday, May 4, 13
37. Getting Pixel Data • Why didn’t we just ask the image for its data? • Drawing it into our own context give us a mutable version of it • We know the color space we’re using Saturday, May 4, 13
38. Demo Saturday, May 4, 13
39. Generating Pixel Data • Remember before when we made a bitmap graphics context with data? • Turns out you can pre-fill that data with your own pixels Saturday, May 4, 13
40. Demo Saturday, May 4, 13
41. Edge Cases Saturday, May 4, 13
42. Huge Images • What do you do if you get an image URL and the image is 2GB? • How do you fit a super hi-res image on an iPhone 3GS screen? Retina iPad? Saturday, May 4, 13
43. Huge Images • Instead of keeping the downloaded bits in memory, write them directly to the disk • Instead of loading the entire image to resize it, use ImageIO to generate a thumbnail efficiently Saturday, May 4, 13
44. ImageIO Saturday, May 4, 13
45. Demo Saturday, May 4, 13
46. Huge Images • That works well for a static image, but what if it’s a .gif? • Most apps punt and put it in a UIWebView. Then crash when the image is huge. • Theoretically we should be able to run a 2GB .gif on an iPhone 3GS • Working on it! Saturday, May 4, 13
47. Huge Images • What if you want to zoom into an image? • CATiledLayer to provide individual tiles • Have the image already? Cut it up beforehand. • Downloading the image? Split it up dynamically using libjpeg with PhotoScrollerNetwork Saturday, May 4, 13
48. Demo Saturday, May 4, 13
49. Additional Topics • OpenGL • CoreImage • Vector Graphics Saturday, May 4, 13
50. AmazeKit • Image rendering library for iOS • Uses stacked image effects, analogous to Photoshop layer styles • Renders UI into image, caches heavily • Allows for small bundle sizes, rendered-on- demand UI • Open-Source Saturday, May 4, 13
51. AmazeKit Example Saturday, May 4, 13