Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Images in iOS

Using Images in iOS

Using images in iOS is a constant balancing act between making beautiful UIs and managing the size of your app’s bundle. This talk will go over some things you can do with images to help that balance.

Jeff Kelley

January 10, 2013
Tweet

More Decks by Jeff Kelley

Other Decks in Programming

Transcript

  1. Using Images in iOS
    Jeff Kelley | @SlaunchaMan
    CodeMash 2012

    View Slide

  2. Who Am I?

    View Slide

  3. Using Images in iOS

    View Slide

  4. Using Images in iOS

    View Slide

  5. Why A Talk About Images?

    View Slide

  6. iDevice Displays

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  11. How can we balance good UIs with image
    sizes?

    View Slide

  12. UIImage
    • The highest-level image representation in
    Cocoa Touch
    • Create from a file, from data, or from
    lower-level representations
    • Represents an image, not image data (more
    on that later)

    View Slide

  13. Creating a UIImage
    • From a File:
    UIImage *myImage = [[UIImage alloc]
    initWithContentsOfFile:myPath];
    • From Data:
    UIImage *myImage = [[UIImage alloc]
    initWithData:myData];

    View Slide

  14. Cached Images
    • Using the class method +imageNamed:, you
    can create an image from the main bundle
    • These images are cached automatically
    • For PNG images, you can leave off the
    extension

    View Slide

  15. Image Cache Behavior
    • In low-memory situations, a UIImage’s
    image data will be purged
    • This data will be reloaded once the image is
    needed again

    View Slide

  16. Using Images
    • Usually: UIImageView
    • Occasionally: Create an NSData object
    using UIImagePNGRepresentation() or
    UIImageJPEGRepresentation().

    View Slide

  17. 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 “[email protected]

    View Slide

  18. 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!

    View Slide

  19. Image Tips & Tricks

    View Slide

  20. 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

    View Slide

  21. Stretchable Images
    Top
    Bottom
    Left Right

    View Slide

  22. Demo

    View Slide

  23. 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

    View Slide

  24. Animated Images
    • Creating from a prefix:
    + (UIImage *)animatedImageNamed:(NSString *)name
    duration:(NSTimeInterval)duration;
    • Creating from an array:
    + (UIImage *)animatedImageWithImages:(NSArray
    *)images duration:(NSTimeInterval)duration;

    View Slide

  25. Demo

    View Slide

  26. Animated Images
    • If you’re really crazy:
    • + (UIImage *)animatedResizableImageNamed:(NSString
    *)name capInsets:(UIEdgeInsets)capInsets duration:
    (NSTimeInterval)duration;

    View Slide

  27. 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

    View Slide

  28. Demo

    View Slide

  29. “We’ll Do It Live!”:
    Rendering with
    CoreGraphics

    View Slide

  30. CoreGraphics
    • AKA QuartzCore (QuartzCore.h>)
    • Allows you to draw graphics yourself as
    opposed to including images

    View Slide

  31. Custom View
    Rendering
    • The easiest path to custom drawing
    • Override -drawRect:

    View Slide

  32. 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()

    View Slide

  33. Demo

    View Slide

  34. 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

    View Slide

  35. Custom Drawing
    • Can be a performance problem
    • Lots of duplicate rendering effort

    View Slide

  36. 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?

    View Slide

  37. 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

    View Slide

  38. Demo

    View Slide

  39. 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?

    View Slide

  40. Color Spaces
    • CGColorSpace opaque type
    • Two main color spaces to worry about:
    • CGColorSpaceCreateDeviceGray()
    • CGColorSpaceCreateDeviceRGB()
    • Defines the number of components

    View Slide

  41. Graphics Context
    Options
    •CGContextRef CGBitmapContextCreate
    (
    void *data,
    size_t width,
    size_t height,
    size_t bitsPerComponent,
    size_t bytesPerRow,
    CGColorSpaceRef colorspace,
    CGBitmapInfo bitmapInfo
    );

    View Slide

  42. 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à!

    View Slide

  43. 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

    View Slide

  44. Demo

    View Slide

  45. 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

    View Slide

  46. Demo

    View Slide

  47. Additional Topics
    • OpenGL
    • CoreImage
    • Vector Graphics

    View Slide

  48. 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
    • Soon to be open-sourced

    View Slide

  49. AmazeKit Example

    View Slide