CODEWITHSUNDEEP
iphoneiosuiviewuiimageviewuiimage
Gavin Hope
Gavin Hope

Reputation: 2193

How to resize UIImage created with resizableImageWithCapInsets when used for an UIImageView / UIView

I'm writing code to use a custom image as the background for a UIView.

The app runs in portrait only. Prior to the 4" retina screen, I used fixed size, hand-drawn png as the background image (card.png below). I had code like this:

UIView* frontView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
frontView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

UIImage* cardImage = [UIImage imageNamed:@"card.png"];
UIImageView* im = [[UIImageView alloc] initWithImage:cardImage];
im.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;
[frontView addSubview:im];

// frontView has a bunch of stuff added...

As you'd expect, when I run this on an iPhone 5, everything can be dynamically sized and positioned, except for the hand drawn png, card.png. So that background image isn't using the full height that is available...

So what (I think) I want to do, is something like this...

UIImage* cardImage = [[UIImage imageNamed:@"card_resizable.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(72, 0, 60, 0)];

I've redrawn card.png as card_resizable.png - it's 140 pixels in height, there's an 8 pixel chunk in the middle, which I want to tile, so the top inset is 72 pixels tall and the bottom inset is 60 pixels tall.

What's the next step?

Should I create the UIImageView with the dynamic size of frontView?

How do I make the resizable image, resize?

The few things that I've tried... none of them have resulted in tiling the resizable image.

Cheers, Gavin

Update:

I was incorrectly setting the pixel values for UIEdgeInsetsMake(72, 0, 60, 0) These values are based on the @2x image. When changed to UIEdgeInsetsMake(36, 0, 30, 0) - I get the correct, vertical resizing.

As Mike pointed out, I needed to set the size of the UIImageView to the parent, and correctly set it's autoresizingMask:

im.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

I know have the UIImageView sized dynamically sized, correctly, to fill its parent view - frontView (I've given it a green background to check visually on both 3.5" screen and 4" screen.

The resizable image, cardImage, is also resizing, correctly, in the vertical plane.

Upvotes: 1

Views: 4325

Answers (3)

Anupdas
Anupdas

Reputation: 10201

Can you try with stretchableImage

UIImage *image = [UIImage imageNamed:@"card_resizable.png"];
UIImage* cardImage = [image stretchableImageWithLeftCapWidth:0.0f 
                                                topCapHeight:70.0f];

Upvotes: 0

Mike Weller
Mike Weller

Reputation: 45598

Once you've passed the stretchable image to a UIImageView you just resize that image view to whatever height you need.

In your case, you probably want to make the image view fill its parent by doing this:

im.frame = frontView.bounds;
im.autoresizingMask =
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[frontView addSubview:im];

We make im fill the frontView and tell it to automatically increase its width/height when its parent (frontView) changes size. This should do what you want.

Upvotes: 2

Avi Tsadok
Avi Tsadok

Reputation: 1843

Take a look at UIView contentMode property. it should give you some sense about how the UIImageView render the image inside, whenever it change it's size.

Upvotes: -1

Related Questions