Simple way of using irregular shaped buttons

Question

I've finally got my main app release (Tap Play MMO - check it out ;-) ) and I'm now working on expanding it.

To do this I need to have a circle that has four seperate buttons in it, these buttons will essentially be quarters. I've come to the conclusion that the circlular image will need to be constructed of four images, one for each quarter, but due to the necessity of rectangular image shapes I'm going to end up with some overlap, although the overlap will be transparent.

What's the best way of getting this to work? I need something really simple really, I've looked at this http://iphonedevelopment.blogspot.com/2010/03/irregularly-shaped-uibuttons.html

Before but not yet succeeded in getting it to work. Anyone able to offer some advice?

In case it makes any difference I'll be deploying to a iOS 3.X framework (will be 4.2 down the line when 4.2 comes out for iPad)

Answer 1

Skip the buttons and simply respond to touches in your view that contains the circle.

Create a CGPath for each area that you want to capture touches, when your UIview receives a touch, check for membership inside the paths.

[Edited answer to show skeleton implementation details -- TomH]

Here's how I would approach the problem: (I haven't tested this code and the syntax may not be quite right, but this is the general idea)

1) Using PS or your favorite image creation application, create one png of the quarter circles. Add it to your XCode project.

2) Add a UIView to the UI. Set the UIView's layer's contents to the png.

self.myView = [[UIView alloc] initWithRect:CGRectMake(10.0, 10.0, 100.0, 100,0)];
[myView.layer setContents:(id)[UIImage loadImageNamed:@"my.png"]];

3) Create CGPaths that describe the region in the UIView that you are interested in.

self.quadrantOnePath = CGPathCreateMutable();
CGPathMoveToPoint(self.quadrantOnePath, NULL, 50.0, 50.0);
CGPathAddLineToPoint(self.quadrantOnePath, NULL, 100.0, 50.0);
CGPathAddArc(self.quadrantOnePath, NULL, 50.0, 50.0, 50.0, 0.0, M_PI2, 1);
CGPathCloseSubpath(self.quadrantOnePath);

// create paths for the other 3 circle quadrants too!

4) Add a UIGestureRecognizer and listen/observe for taps in the view

UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
[tapRecognizer setNumberOfTapsRequired:2]; // default is 1

5) When tapRecognizer invokes its target selector

- (void)handleGesture:(UIGestureRecognizer *) recognizer {

  CGPoint touchPoint = [recognizer locationOfTouch:0 inView:self.myView];
  bool processTouch = CGPathContainsPoint(self.quadrantOnePath, NULL, touchPoint, true);

  if(processTouch) {
     // call your method to process the touch
  }
}

Don't forget to release everything when appropriate -- use CGPathRelease to release paths.

Another thought: If the graphic that you are using to represent your circle quadrants is simply a filled color (i.e. no fancy graphics, layer effects, etc.), you could also use the paths you created in the UIView's drawRect method to draw the quadrants too. This would address one of the failings of the approach above: there isn't a tight integration between the graphic and the paths used to check for the touches. That is, if you swap out the graphic for something different, change the size of the graphic, etc., your paths used to check for touches will be out of sync. Potentially a high maintenance piece of code.