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:

CezanneFramed

This is very easy to do in CocoaTouch.

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

@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 {
        UIGraphicsBeginImageContext(size);
    }
    
    CGPoint point = CGPointMake(0, 0);
    [blankThumb drawAtPoint:point];
    
    point = CGPointMake(3, 3);
    [image drawAtPoint:point];
    
    UIImage* finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return finalImage;
}
@end

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.