Question

I have the following image representing my button:

I want to use that image to create a button that uses that as the background, but that is much wider than the image I supplied.

Here are the two methods that I have tried:

  UIButton *emailSupportButton = [[UIButton alloc] initWithFrame:CGRectMake(25, 315, 200, 60)];
  [emailSupportButton setTitle:@"Email Support" forState:UIControlStateNormal];
  [emailSupportButton setImage:[UIImage imageNamed:@"toolbar-button"] forState:UIControlStateNormal];

This method results in the button image not being stretched and displaying exactly how the .png would display normally.

The other method I have tried is setting the background image, like so…

  UIButton *emailSupportButton = [[UIButton alloc] initWithFrame:CGRectMake(25, 315, 200, 60)];
  [emailSupportButton setTitle:@"Email Support" forState:UIControlStateNormal];
  [emailSupportButton setBackgroundImage:[UIImage imageNamed:@"toolbar-button"] forState:UIControlStateNormal];

This method stretches the image in a really ugly fashion instead of achieving the desired effect, causing the button to be almost elliptical with a really ugly border.

Is the problem that I am not using the right method of creating a custom button, or that my image is not suitable for the task I am trying to accomplish? Is my image supposed to be rectangular and not include the button’s border, letting UIButton take care of the border/rounding for me? Is my image supposed to already be the size of the button (this seems a bit limiting)?

Answer 1

The second method you listed (code-wise) is what you want. What you are missing is the stretchable image. Try this:

UIButton *emailSupportButton = [[UIButton alloc] initWithFrame:CGRectMake(25, 315, 200, 60)];
[emailSupportButton setTitle:@"Email Support" forState:UIControlStateNormal];
UIImage *backgroundImage = [UIImage imageNamed:@"toolbar-button"];
CGSize size = backgroundImage.size;
backgroundImage = [backgroundImage stretchableImageWithLeftCapWidth:size.width/2.0 topCapWidth:size.height/2.0];
[emailSupportButton setBackgroundImage:backgroundImage forState:UIControlStateNormal];

If you are deploying on iOS 5 and greater only, then you will want to use the new -[UIImage resizableImageWithCapInsets:(UIEdgeInsets)capInsets]; iOS 6 also adds -[UIImage resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode];