schmidt9 schmidt9 - 2 months ago 12
Objective-C Question

resizableImageWithCapInsets: issues

I try to figure out how to fit dropdown image into black border (border just for cenvenience) in

UIImageView
using
resizableImageWithCapInsets:
.

I use AutoLayout,
_imageView
has fixed height constraint

UIImage *dropdown = [[UIImage imageNamed:@"dropdown.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 100)];
_imageView.contentMode = UIViewContentModeScaleAspectFit; // modes see below
_imageView.clipsToBounds = NO;
_imageView.layer.borderWidth = 1;
_imageView.image = dropdown;


UIViewContentModeTopLeft


top left

UIViewContentModeScaleToFill


scale to fill

UIViewContentModeScaleAspectFit


aspect fit

UIViewContentModeScaleAspectFill


aspect fill

Edit

I tried setting top and bottom insets as advised by @Rahul and what I get now if setting
UIViewContentModeScaleToFill
(similar results in other modes). As you may notice, the white down-arrow in now shifted slightly down

UIImage *dropdown = [[UIImage imageNamed:@"dropdown.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(8, 20, 8, 100)];


other pic

Edit 2

Changing offsets seems not to help here, problem seems to be in vertical scaling, as if image view acceps only one vertical offset for some reason, not both, so we get non-symmetric vertical offset

Edit 3

Example project on GitHub: ScaleTest-iOS

Edit 4

Updated GitHub example with custom resizing methods (no avail though), created topic on Apple Dev Forum

Edit 5

Accepted answer I see as a workaround, really I'd prefer to keep fixed height, but it seems to be not possible. Anyway, thanks to @Rahul for assistance.

Answer

Refer this tutorial: How To Make A Stretchable Button With UIEdgeInsetsMake for UIEdgeInsetsMake(8, 8, 8, 8) & apply suitable edge insets for your image....

UIImage *image = [[UIImage imageNamed:@"dropdown"] resizableImageWithCapInsets:UIEdgeInsetsMake(8, 20, 8, 100)];
_imageView4.layer.borderWidth = 1.0;
_imageView4.clipsToBounds = NO;
_imageView4.contentMode = UIViewContentModeScaleToFill;
_imageView4.image = image;

Set the imageview4 height 35 instead 40 pixels & then works perfect...

enter image description here