Simple way of using irregular shaped buttons

问题:

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)

回答1:

I can't see, why overlapping is needed.
Just create 4 buttons and give each one a slice of your image.

edit after comment

see this great project. One example is exactly what you want to do.

It works by incorporating the alpha-value of a pixel in the overwritten

pointInside:withEvent: and a category on UIImage, that adds this method

- (UIColor *)colorAtPixel:(CGPoint)point {
    // Cancel if point is outside image coordinates
    if (!CGRectContainsPoint(CGRectMake(0.0f, 0.0f, self.size.width, self.size.height), point)) {
        return nil;
    }


    // Create a 1x1 pixel byte array and bitmap context to draw the pixel into.
    // Reference: http://stackoverflow.com/questions/1042830/retrieving-a-pixel-alpha-value-for-a-uiimage
    NSInteger pointX = trunc(point.x);
    NSInteger pointY = trunc(point.y);
    CGImageRef cgImage = self.CGImage;
    NSUInteger width = self.size.width;
    NSUInteger height = self.size.height;
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    int bytesPerPixel = 4;
    int bytesPerRow = bytesPerPixel * 1;
    NSUInteger bitsPerComponent = 8;
    unsigned char pixelData[4] = { 0, 0, 0, 0 };
    CGContextRef context = CGBitmapContextCreate(pixelData, 
                                                 1,
                                                 1,
                                                 bitsPerComponent, 
                                                 bytesPerRow, 
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);
    CGContextSetBlendMode(context, kCGBlendModeCopy);

    // Draw the pixel we are interested in onto the bitmap context
    CGContextTranslateCTM(context, -pointX, pointY-(CGFloat)height);
    CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, (CGFloat)width, (CGFloat)height), cgImage);
    CGContextRelease(context);

    // Convert color values [0..255] to floats [0.0..1.0]
    CGFloat red   = (CGFloat)pixelData[0] / 255.0f;
    CGFloat green = (CGFloat)pixelData[1] / 255.0f;
    CGFloat blue  = (CGFloat)pixelData[2] / 255.0f;
    CGFloat alpha = (CGFloat)pixelData[3] / 255.0f;
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

回答2:

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.

回答3:

Here's an awesome project that solves the problem of irregular shaped buttons so easily: http://christinemorris.com/2011/06/ios-irregular-shaped-buttons/