0

I have a UIButton with a custom background that I set in the Interface Builder (see picture). It looks nice, but in the pressed state it gets really ugly (see the 2nd picture). What's going on here?

Normal:

see picture

Pressed:

enter image description here

TotoroTotoro
  • 17,524
  • 4
  • 45
  • 76
  • It honestly doesn't look that bad – Jtaylorapps Mar 09 '12 at 18:37
  • 1
    I'd recommend setting the background images for the button in the normal state and a different one for touch down, say with a highlighted inner edge for example. – Luke Mar 09 '12 at 18:43
  • What about perhaps changing what it does in the highlighted state? I recall there is a section in the right column of the Ib when you select a button to choose what it does, along with other attributes in the highlighted state – Jtaylorapps Mar 09 '12 at 19:24

2 Answers2

1
[btn setBackgroundImage:[[UIImage imageNamed:@"button_red.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 20, 12)] forState:UIControlStateNormal];
[btn setBackgroundImage:[[UIImage imageNamed:@"button_red_pressed.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 20, 12)] forState:UIControlStateHighlighted];

This should solve the problem.

Also, change your button style to Custom, this will remove that blue button background.

anticyclope
  • 1,577
  • 1
  • 10
  • 26
  • Yes, looks like it'd do the trick. Interesting though that in the similar older discussions people just seem to use one image, not two. I thought iOS would be able to animate the press without an extra image... – TotoroTotoro Mar 09 '12 at 18:54
  • iOS can do as you suggest... see the addition to my answer – QED Mar 09 '12 at 19:03
  • 1
    If you use Custom, you will get only your stuff, not the iOS blue button. – David Dunham Mar 09 '12 at 19:05
  • I changed it to custom, but the ugliness is still there, without the blue peeking through. – TotoroTotoro Mar 09 '12 at 19:12
  • I ended up creating my own "pressed" image (normal and @2x), and doing something similar to your answer: UIImage *btnNameImageNormal = [UIImage imageNamed:@"button_red.png"]; [self.deleteButton setBackgroundImage:btnNameImageNormal forState:UIControlStateNormal]; UIImage *btnNameImagePressed = [UIImage imageNamed:@"button_red_dark.png"]; [self.deleteButton setBackgroundImage:btnNameImagePressed forState:UIControlStateHighlighted]; – TotoroTotoro Mar 09 '12 at 20:10
0

Post some code or maybe the image itself. It looks as if you might need to declare your 'pressed' image with one of UIImage's resizableImage* methods. It's stretching to fill the button rect.

Also, I'm fond of the MOButton and MOGlassButton classes used in the iPhone SOCKS project (handy in itself).

Update

The following worked for me, it even animated it dark when pressed:

enter image description here

QED
  • 9,803
  • 7
  • 50
  • 87
  • This is the image: http://i.stack.imgur.com/2jkRR.png. There isn't any code for this, it's all done in the Interface Builder. I've tried doing it in code as described in http://stackoverflow.com/questions/915416/is-there-an-way-to-make-an-invisible-uibutton-that-will-still-be-there-and-cat, but got the same result: looks good in normal state, bad in pressed state. – TotoroTotoro Mar 09 '12 at 18:51
  • 1
    You've set the image property, not the background. This way, your button can't have any text. – TotoroTotoro Mar 09 '12 at 19:14
  • So... does it look OK on a device when pressed? – TotoroTotoro Mar 09 '12 at 19:24
  • It might be something you missed in the setup. Did you copy a previously-existing button? I set mine up from scratch. Anyway, glad you found a solution! – QED Mar 09 '12 at 20:24