Question

I have a button that uses a stretchable PNG as the background image, like so:

[btnCall setBackgroundImage:[[UIImage imageNamed:@"button1"]     
    stretchableImageWithLeftCapWidth:20 topCapHeight:35] 
    forState:UIControlStateNormal];

I have another image (basically a small phone with a transparent background) that I want to place in the center of the button. This button resizes itself in response to orientation changes, so I cannot just add the phone image to the button image in Photoshop (because the resultant stretching of the combined image would distort the phone image).

If I subclass UIButton and override drawRect:, everything I draw manually is drawn underneath the stretched button image, so that approach doesn’t work.

Is there any way to do this with a UIButton, or do I have to do this completely myself with a UIView subclass?

Answer 1

There are two images for a button: Background Image and Image.

Background Image is placed behind all content, and stretches (as you’ve seen, as this is what you have been using).

The image value places an image that will appear to the left of any title you set or the center if no title appears. This is what you want as it will not change size as the button expands.

[btnCall setImage:image forState:UIControlStateNormal];