Is there a nine-patch loader for iPhone?

Question

Android has a nice way of defining stretchable images called a nine-patch. See these docs for a description of the concept. The idea is to surround a png image with a 1-pixel border where you can define the stretchable areas and the padding dimensions of the image. This is absolutely brilliant and I'd like to use the idea in my iPhone app. Before writing my own nine-patch to UIImage loader I thought I'd see if one already exists. Google doesn't return any results so I don't have much hope, but it doesn't hurt to ask, right? :-)

EDIT: Folks, I appreciate the answers but I know about stretchableImageWithLeftCapWidth.... I'm looking for code that takes a path @"foo.9.png" and returns a stretchable UIImage. This code will undoubtedly use stretchableImageWithLeftCapWidth... internally. I'm sure I could write the code myself using that method. But I'm asking if somebody else has already done it.

Answer 1

Yes UIImage does support something like it. See

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight and the documentation for leftCapWidth and topCapHeight

basically the image is not stretched in the area leftCapWidth pixels from the left and right edge and topCapHeight pixels from the top and the bottom. When the image is scaled the area inside of these limits is subject to stretching.

Answer 2

All UIImage images support this natively. By default the entire images is stretchable, but you can set caps with the leftCapWidth and topCapHeight properties or you can generate one from an existing UIImage with the - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight method.

Do note that in apple's implementation, when you set one or both of these values, the stretchable area is forced to be a single pixel high/wide.

Answer 3

I received an e-mail from Tortuga22 software who informed me that they have created such a library and released it under the Apache license:

Announcement: http://blog.tortuga22.com/2010/05/31/announcing-tortuga-22-ninepatch/

Source code: http://github.com/tortuga22/Tortuga22-NinePatch

Example usage:

// loads-and-caches ninepatch and rendered image of requested size
UIImage buttonImg = [TUNinePatchCache imageOfSize:buttonSize 
                                forNinePatchNamed:@"buttonNormalBackground"];
[self.buttonNeedingBackground setImage:buttonImg
                       forControlState:UIControlStateNormal];

Answer 4

Also look at UIView's contentStretch property. It is more robust and well-behaved than stretchableImageWithLeftCapWidth. Basically, it works by just defining the stretchable rectangle within your image and automatically creating a scaled nine-patch. This internal rectangle can be anything - it doesn't even have to be in the center of the image. Plus unlike stretchableImage this method will properly shrink graphics and behave as expected for graphics with lighting or gloss. I can't think of any real-world application where you would want more than this.