Question

I have 3 images, a left cap, right cap, and center. Perhaps using CGImageRefs (?), is there a way to build a bitmap based on a CGRect that would center the center piece in some container, stretch the left cap until it reaches the center piece and the same for the right then produce a UIImage?

Answer 1

Ok I looked it up as promised. Here is a solution:

The Basic Idea

• take the left cap and make an UIImage with stretched right side
• “glue” it with the arrow UIImage
• and now glue it with right cap with a left stretched side

And here is a small graphic how i think it could word

  ______ ........    ________      .........___________
 {______|........|  | arrow  |    |.........|__________)
left cap|lc flex     --------      rc flex  | right cap

The code

// get the images from disk
UIImage *leftCap = [UIImage imageNamed:@"leftCap.png"];
UIImage *arrow = [UIImage imageNamed:@"arrow.png"];
UIImage *rightCap = [UIImage imageNamed:@"rightCap"];

// stretch left and right cap
// calculate the edge insets beforehand !

UIImage *leftCapStretched = [leftCap resizableImageWithCapInsets:UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset)];
UIImage *rightCapStretched = [rightCap resizableImageWithCapInsets:UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset)];

CGFloat widthOfAllImages = leftCapStretched.size.width + arrow.size.width + rightCapStretched.size.width;

// build the actual glued image

UIGraphicsBeginImageContextWithOptions(CGSizeMake(widthOfAllImages, arrow.size.height), NO, 0);
[leftCapStretched drawAtPoint:CGPointMake(0, 0)];
[arrow drawAtPoint:CGPointMake(leftCap.size.width, 0)];
[rightCapStretched drawAtPoint:CGPointMake(leftCap.size.width + arrow.size.width, 0)];
UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext();

// now you should have a ready to use UIImage ;)

The alternative

Inspired by Jonathan Plaketts answers the same should ne possible with just UIImageViews and stretching the UIImages as above.