Question

I have a gradient image that’s blue in color. it’s 100px (height) x 1px (width). Now I’m trying to use it as the background image for the highlighted state. But somehow, it turns into orange color at run time. What might be wrong here? The height of the button is 40px, so I am doing a resize before setting it

UIImage *image = [UIImage imageNamed:@"pressed.png"];
UIImage *stretchedImage = [[UIImage imageWithImage:image scaledToSize:frame.size] stretchableImageWithLeftCapWidth:0 topCapHeight:0];
[button setBackgroundImage:stretchedImage forState:UIControlStateHighlighted];

Answer 1

There’s a few possible explanations, in roughly descending order of likelihood:

1) Your scaledToSize category code has a bug in it where it’s reversing the RGB order of the bytes in the image, changing blue to orange. Try not scaling the image and see if it’s the correct color. You don’t actually need to scale it anyway, button background images are already stretched to fit at runtime.

2) You have two pressed.png images in your project, probably in different folders so you haven’t noticed, but since the compiler dumps all the images into the same folder at build time, your blue pressed.png is being overridden by an orange pressed.png. Search your project on disk to see if this is the case.

3) You previously had an orange image called pressed.png and when you build the app it’s using the old image due to some caching issue. Try a clean build, reset your simulator and delete the app off the device.

4) You have an [e-mail] version of the image that is orange. When you run on the device it’s using the retina version, so it looks different.

5) Your PNG s corrupt somehow – delete it and re-create from scratch. I’ve had issues ebfore with images that are only 1px wide, so try making it wider if that’s the case.