3

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

4

2 に答える 2

5

おそらく、次を使用してタイル化されたサイズ変更可能な画像を作成する方法を調べたいと思うでしょう。

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

あなたのコードのわずかに変更されたバージョンを使用して、画像をボタンに並べて表示することができましたが、うまく並べて表示されません。

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;

ここに画像の説明を入力

于 2013-03-06T14:58:40.147 に答える