CODEWITHSUNDEEP
objective-cimage-resizing
Luke
Luke

Reputation: 9700

resizableImageWithCapInsets: resizingMode: UIImageResizingModeTile isn't working

UIImage's resizableImageWithCapInsets method is all well and good for a standard rectangular button with rounded corners, but I'm trying to create a button that looks like a cloud, with uneven edges. I can't quite get my head around the best way to draw or create it, or how I'll stretch it when I get it into my application. I'm talking about something like this:

enter image description here

The bubbles on the sides of the cloud shouldn't stretch, but new ones will be created for however long / short the button needed to be. For example, if the button needed to be half the size of this image, only 2 of the bubbles would be shown, but if it needed to be taller, more than the 5 here could be, it'd add and remove them as necessary. I'd set minimum sizes so that at least one bubble would always be there, preventing issues if it got too small. The bubbles themselves can be tiled if need be.

Does anyone have any suggestions on how I can achieve such an effect, either from the perspective of software development or graphic design?

EDIT:

I've tried to do this with the image below and the following code, and it's giving a result like the image here. The image isn't even the right size, let alone tiling. I've verified that the frame of the image is larger than its being displayed here, too. Really rather confused here!

cappedCloud = [[UIImage imageNamed: @"cloud.png"] resizableImageWithCapInsets: UIEdgeInsetsMake(9, 9, 9, 9) resizingMode: UIImageResizingModeTile];

[[cell.cloudButton imageView] setContentMode: UIViewContentModeScaleToFill];
[cell.cloudButton setImage: cappedCloud forState: UIControlStateNormal];
[cell.cloudButton setAlpha: 0.85f];

enter image description here

enter image description here

Upvotes: 3

Views: 5284

Answers (2)

Praveen Matanam
Praveen Matanam

Reputation: 2803

Stretching is processed in the vertical direction and then in the horizontal direction (or vice versa). So provide top & bottom offsets considering vertical direction that should not stretch and left & right offsets for horizontal direction.

Upvotes: 0

Dan F
Dan F

Reputation: 17732

You probably want to look into how to create a tiled resizable image using

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

Using a slightly modified version of your code, I was able to get the image to tile on a button, although it doesn't tile very well:

UIImage* cappedCloud = [[UIImage imageNamed: @"cloud.png"] resizableImageWithCapInsets: UIEdgeInsetsMake(9, 9, 9, 9) resizingMode: UIImageResizingModeTile];

[cloudButton setBackgroundImage:cappedCloud forState:UIControlStateNormal];
[cloudButton setAlpha: 0.85f];

cloudImage.image = cappedCloud;

enter image description here

Upvotes: 5

Related Questions