Creating non-square buttons with highlights in iPhone app

Question

I want to create a "play" button that has a play image (triangle) and highlights on touch.

I kind-of figured out how to do this, but it's not really right. The frame I create for the button is square, and the entire square button lights up when touched. Instead, I want only the triangle to get highlighted, similar to how iPod buttons work. I don't know how to do this though.

My png is square with a transparent background, if it matters. Does that need to change at all?

Any suggestions on how I can accomplish this are much appreciated.

Answer 1

psychotik,

You can set different button images for different buttons states. This will allow you to use an image to give the appearance of highlighting around the edges of the play triangle instead of using the iPhone generic highlight feature.

Example code (fyi.. some people don't like to use imageNamed and don't trust it.. but use whatever you want to load some image in, this is just generic code):

[someButton setImage:[UIImage imageNamed:@"someImage.png"] forState:UIControlStateNormal];
[someButton setImage:[UIImage imageNamed:@"someImageHighlighted.png"] forState:UIControlStateHighlighted];

More information on these here:

http://developer.apple.com/iphone/library/documentation/uikit/reference/UIControl_Class/Reference/Reference.html#//apple_ref/doc/c_ref/UIControlStateNormal

P.S. You can also do this in Interface Builder if you have your button created there.