In previous lecture we learned how to create views and graphics in iphone. We also learned how to create complex graphics like stars, triangle in iphone using CoreGraphics (CG). In this lecture we’ll continue on that discussion of creating animated views.

When creating images from context we need to dynamically generate a bitmap image. Similarly as drawing a view

  • Create a special CGGraphicsContext with a size
  • Draw
  • Capture the context as a bitmap
  • Clean up


UIImage is class that represents an image in the UIKit. To create using UIImage:

  • Fetching image in application bundle
    • Use +[UIImage imageNamed:(NSString *)name]
    • Include file extension in file name, e.g. @”myImage.jpg”
  • Read from file on disk
    • Use -[UIImage initWithContentsOfFile:(NSString *)path]
  • From data in memory
    • Use -[UIImage initWithData:(NSData *)data]

Bitmap Image Example

- (UIImage *)polygonImageOfSize:(CGSize)size {
  UIImage *result = nil;
  UIGraphicsBeginImageContext (size);
  // call your drawing code...
  result = UIGraphicsGetImageFromCurrentContext();
  return result;

Getting Image Data

Following lines of code describes how to retrieve image data from UIImage. Following examples get PNG and JPG representation of image:

NSData *UIImagePNGRepresentation (UIImage * image);
NSData *UIImageJPGRepresentation (UIImage * image);

UIImage also has a CGImage property which will give you a CGImageRef to use with CG calls.

Drawing Text & Images

You can draw UIImages in -drawRect:

- [UIImage drawAtPoint:(CGPoint)point]
- [UIImage drawInRect:(CGRect)rect]
- [UIImage drawAsPatternInRect:(CGRect)rect]

You can draw NSString in -drawRect:

- [NSString drawAtPoint:(CGPoint)point withFont:(UIFont *)font]

Constructing Views

How to implement this view in iPhone? A PolygonView that displays shape as well as name of the shape e.g. Ocatagon.

Outer shape will definitely be PolygonView. But how to draw inner text. Initial thought would have been PolygonView to draw the text inside. But it is inefficient when animating. Using UILabel will be efficient as well as easy to fill.


UIView subclass that knows how to draw text. Properties include:

  • font
  • textColor
  • shadow (offset & color)
  • textAlignment


UIView that draws UIImages. Properties include:

  • image
  • animatedImages
  • animatedDuration
  • animatedRepeatCount
  • contentMode property to align and scale image wrt bounds


UIView with Target-Action event handling. Properties include:

  • enabled
  • selected
  • highlighted


font, title, titleColor, image, backgroundImage


font, text, placeholder, textColor

Note: See UIKit headers for plenty more

Animating Views

What if you want to change layout dynamically? For example, a switch to disclose additional views.

UIView supports a number of animatable properties. frame, bounds, center, alpha, transform. Create “blocks” around changes to animatable properties. Animations run asynchronously and automatically.

Additional animation options:

  • delay before starting
  • start at specific time
  • curve (ease in/out, ease in, ease out, linear)
  • repeat count
  • autoreverses (e.g. ping pong back and forth)

View Animation Example

- (void)showAdvancedOptions {
// assume polygonView and optionsView
[UIView beginAnimations:@”advancedAnimations” context:nil];
[UIView setAnimationDuration:0.3];

// make optionsView visible (alpha is currently 0.0)
optionsView.alpha = 1.0;

// move the polygonView down
CGRect polygonFrame = polygonView.frame;
polygonFrame.origin.y += 200;
polygonView.frame = polygonFrame;
[UIView commitAnimations];

Knowing When Animations Finish

  • UIView animations allow for a delegate
    • [UIView setAnimationDelegate:myController];
  • myController will have callbacks invoked before and after
    • - (void)animationWillStart:(NSString *)animationID context:(void *)context;
    • - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;
  • Can provide custom selectors if desired, for example
    • [UIView setAnimationWillStartSelector:@selector(animationWillStart)];
    • [UIView setAnimationDidStopSelector: @selector(animationDidStop)];

How Does It Work?

  • Is drawRect view invoked repeatedly?
  • Do I have to run some kind of timer in order to drive the animation?
  • Is it magic?


iPhone has hardware accelerated rendering engine. UIViews are backed by “layers”.

  • -drawRect: results are cached
  • Cached results used to render view
  • -drawRect: called only when contents change
  • Layers drawn from a separate render tree managed by separate process
  • Property animations done automatically by manipulating layers

Every view has a transform property. It is used to apply scaling, rotation and translation to a view. Default “Identity transform” CGAffineTransform structure used to represent transform. You can use CG functions to create, modify transforms.

  • CGAffineTransform
  • CGAffineTransformScale (transform, xScale, yScale)
  • CGAffineTransformRotate (transform, angle)
  • CGAffineTransformTranslate (transform, xDelta, yDelta)

For more on animations in iPhone you can explore Core Animation Programming Guide.

Tagged with: C/C++ languageClassesiPhone

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Related News Feeds

Set your Twitter account name in your settings to use the TwitterBar Section.