iOS Cone Shaped Buttons

[newtoiphonesdk]

I am working on a design to where each button is a cone shaped, and they fit together to make a pie chart. I use IB and the issue I have is that the Round Rect Button doesn't conform to the image, and I keep getting some overlap of all of the buttons. How can I properly do this?

 

[jnoxx]

if you use the "custom" buttons, and insert an image, and use the command + function to get them properly automatically shaped.
Or create your shapes with hand, but i think you should go with option 1

 

[ArtOfWarfare]

You could also make a single graphic for your pie chart of buttons, and then layer some invisible buttons on top to handle recognizing touches in the different segments.

Or, make it a single button with the pie chart graphic and then make it recognize where the touch is within the graphic, and calculate the angle it's at to determine which segment it's in.

 

[cMacSW]

if you use the "custom" buttons, and insert an image, and use the command + function to get them properly automatically shaped.

Haven't heard of this is it documented somewhere? Searching the dev docs so far has turned up nothing.

 

[jnoxx]

Look, you have your cone buttons in images right?
just set the option of the button from UIRectButton to Custom, set the Background of the Button to your image.. And Command + is just an shortcut for it to fit your image..

 

[cMacSW]

OK I misunderstood, I was thinking that you were saying that the Cmd + would make the button area conform to the shape of the image. So you still have the button overlap issue with this.

 

[seepel]

You could also make a single graphic for your pie chart of buttons, and then layer some invisible buttons on top to handle recognizing touches in the different segments.

Or, make it a single button with the pie chart graphic and then make it recognize where the touch is within the graphic, and calculate the angle it's at to determine which segment it's in.

I second this approach, seems to bethe simplest nd clear solution.

 

[jnoxx]

OK I misunderstood, I was thinking that you were saying that the Cmd + would make the button area conform to the shape of the image. So you still have the button overlap issue with this.

Excuses, this is indeed not what I meant, I had the issue of overlapping buttons too, but my buttons were big enough to have a really dumb user to click in the millimeter between them (hint, the overlap).
But in specific cases, you'd have to go with the angle I think, i saw some tutorials I think about that, but don't know where you can find them fast.

 

[cMacSW]

Here is a way to achieve this:

http://oleb.net/blog/2009/10/obshapedbutton-non-rectangular-buttons-on-the-iphone/

 

[newtoiphonesdk]

Here is a way to achieve this:

http://oleb.net/blog/2009/10/obshapedbutton-non-rectangular-buttons-on-the-iphone/

This was definitely the way to go. Takes about 5 seconds to implement, and works wondrously.

 

[cMacSW]

Takes about 5 seconds to implement, and works wondrously.

Nice!