Feb 012012

It is easy to draw images in an iOS app, but you can make them special by dropping a frame around them. For example, one of my apps uses the old Poloroid SX-70 type of frame as a branding element, so I’m always dropping UIImages into a frame so they look something like this:


This is very easy to do in CocoaTouch.

@interface EnkiUtilities : NSObject
+ (UIImage *) putThumbnailInFotoFrame:(UIImage *)image ;

@implementation EnkiUtilities

+ (UIImage *) putThumbnailInFotoFrame:(UIImage *)image 
    UIImage *blankThumb =  [UIImage imageNamed:@"Blank Foto Thumb.png"];
    // put the thumbnail into the blank Foto frame
    CGSize size = CGSizeMake(blankThumb.size.width, blankThumb.size.height);
    if (UIGraphicsBeginImageContextWithOptions != NULL) {
        UIGraphicsBeginImageContextWithOptions(size, YES, 0.0);
    } else {
    CGPoint point = CGPointMake(0, 0);
    [blankThumb drawAtPoint:point];
    point = CGPointMake(3, 3);
    [image drawAtPoint:point];
    UIImage* finalImage = UIGraphicsGetImageFromCurrentImageContext();
    return finalImage;

Note the gross code on line 23 with the hardcoded (3,3). That works for my picture frame, you’ll probably want something different, or better yet, add that as a parameter to the method.

You just call it like this:

        log.thumbnailImage = [EnkiUtilities putThumbnailInFotoFrame: [UIImage imageNamed:@"cezanne.png"]];

Seems simple enough, so how did I resize it to be the correct size? I didn’t! In the real app I’m using Nimbus Kit NINetworkImageView to download my images from the server and Nimbus is handling that for me.