PDA

View Full Version : Irregular shaped buttons or image views




savemeanegg
Apr 30, 2009, 08:11 AM
Does anyone know if it is possible to have an custom shaped UIButton or UIImageView?

For example say you wanted to create a pie slice look where each slice was acting as a touchable object be it a button or an image.

Is it possible to create a button or an image fits into this shape?

I know you can use an image over a UIButton but the button itself is rectangular which would not work in the pie slice example!



PhoneyDeveloper
May 1, 2009, 08:11 AM
UIView has a frame that is a rectangle. All drawing on iPhone OS happens inside UIViews. You can write your own subclass of UIView that draws whatever shapes that you like. You can use the alpha property or clearColor to draw views that appear to have shapes other than rectangular, but they will still be rectangular. You can implement or override the touches methods to ignore touches that aren't in the sections of these views that correspond to their apparent shapes.

If I wanted to have a pie with different responses to touches in different slices I would start with a UIView subclass, draw the content, and implement the touches methods to handle touches in a custom manner. I think that trying to make buttons and imageviews do what you want would be too difficult.

savemeanegg
May 1, 2009, 02:04 PM
Thanks, I suspected the limitation was rectangular but just wanted to check.

Regarding the modifying the touch detection this seems complex too surely?

Lets say we have a half a pie with 3 equal segments.

Each segment has a small amount of space between them acting as borders.

Obviously each slice is wider at the extreme boundary than the centre of the pie.

It I place a rectangle image over each slice there will be overlap so does this not mean some fancy math is going to be required?

dejo
May 1, 2009, 02:18 PM
It I place a rectangle image over each slice there will be overlap so does this not mean some fancy math is going to be required?
I would place a frame over the entire pie and then use some fancy math to determine in which slice the touch is detected.

PhoneyDeveloper
May 1, 2009, 10:19 PM
Fancy math huh? It's called trigonometry. We all learned it in high school.

Just use a single view. Either use an image or an algorithm to draw the pie. Use trig to find out where the touches are. You may be able to use a set of CGPaths for hit testing. Not really sure about that.

There's an example project in Xcode called ClockControl. It has code that draws a clock face. It uses some of that there fancy math.

savemeanegg
May 2, 2009, 03:06 AM
Fancy math huh? It's called trigonometry. We all learned it in high school.


well some of us did and others were asleep and it was over 30 years ago so I guess I got some catchup to do!

Thanks ;)

dejo
May 2, 2009, 02:13 PM
Fancy math huh? It's called trigonometry. We all learned it in high school.
Yeah, I knew that. Was just trying to be cheeky. And although I learned it in high school, almost 30 years ago, you mustn't forget that there may be some posters here who aren't even in high school yet.

kainjow
May 2, 2009, 02:33 PM
For something like this there's no need for trig. Quartz has methods for drawing arcs, and you could store a CGPath for each section, and use the built-in API to check if a path contains a point.