Create buttons similar to iOS 6 App Store buttons (pic included)

Question

I'm trying to recreate the tableView Apple uses to view the details of an app.

I've successfully completed the implementation, except for the shadow inside the buttons. Notice how there is a subtle shadowing effect bordering the details button.

Here is my code that I use to draw the button itself:

if(self.isSelected) {

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, COLORWITHRGB(204, 204, 204).CGColor);
    CGContextSetStrokeColorWithColor(context, COLORWITHRGB(141, 141, 141).CGColor);


    CGSize labelTextSize = [self.titleLabel.text sizeWithFont: self.titleLabel.font];
    CGRect labelFrame = CGRectMake(rect.size.width - labelTextSize.width - 24, (rect.size.height - labelTextSize.height - 4) / 2, labelTextSize.width + 14, labelTextSize.height + 4);


    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, NULL, labelFrame.origin.x + labelFrame.size.width - labelFrame.size.height / 2, labelFrame.origin.y + labelFrame.size.height / 2, labelFrame.size.height / 2, M_PI / 2, M_PI * 3 / 2, YES);
    CGPathAddArc(path, NULL, labelFrame.origin.x + labelFrame.size.height / 2, labelFrame.origin.y + labelFrame.size.height / 2, labelFrame.size.height / 2, M_PI * 3 / 2, M_PI / 2, YES);
    CGPathAddLineToPoint(path, NULL, labelFrame.origin.x + labelFrame.size.width - labelFrame.size.height / 2, CGRectGetMaxY(labelFrame));

    CGContextAddPath(context, path);
    CGContextDrawPath(context, kCGPathFillStroke);

    CFRelease(path);
}

Here's what it looks like so far:

It doesn't look bad, but it's not quit what I'm looking for.

Does anyone have any suggestions?

Answer 1

You want to apply an inner shadow.

Go try this app out http://www.paintcodeapp.com ... it'll write the code for you, it's really handy.