iOS 7 round framed button

the iOS App Store has a blue round framed button for buying/downloading apps.

In my App you can download additional content and I want to have a similar button, just because it looks familiar to the user.

If you don't know, what I mean: these buttons, like "$3.99"

How is this possible?

Solution 1:

You can manipulate the CALayer of your button to do this pretty easily.

// assuming you have a UIButton or more generally a UIView called buyButton

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;
// (note - may prefer to use the tintColor of the control)

you can tweak each of those to get the color and border effect you want.

You will also have to add an import in any file you want to use CALayers

#import <QuartzCore/QuartzCore.h>

Solution 2:

If you are a big fan of using storyboards for your UI design with iOS.. you can set the corner radius (and whichever other parameters as mentioned in dima's answer -- although unfortunately not the color, since it's a CGColor and Apple presently does not have that option in the popup) in the identity inspector->user defined runtime attributes in storyboard as shown here:

bonus: you use runtime attributes for UIButton placeholder text color (see here) and to change fonts of UILabel, UITextField and UIButton as well (see here)

Solution 3:

For standard iOS control elements like UIButton, UILabel, you should use the UIView tintColor property:

buyButton.layer.borderColor = buyButton.tintColor.CGColor;

Solution 4:

For simple border like you described, use the answer from Dima using CALAyer.

If you want more, e.g a rounded rectangle with gradient then use this approach as base:

Create a custom View which draws a rounded rectangle and place it over the button. Use the search function here to search for draw rounded rectangle. The drawing works by drawing 4 arcs with defined radius (corners) and 4 straight lines.

FTR, here's how you make a UIView with the correct iOS7 rounded corners, per Alex and Brian.

I'm pretty sure that CGPathCreateWithRoundedRect does not give you the "new" rounded corners. You have to use bezierPathWithRoundedRect for the "new" corners.

#import "UIViewWithIOS7RoundedCorners.h"
@implementation UIViewWithIOS7RoundedCorners
-(void)drawRect:(CGRect)rect
    {
    // for a filled shape...

    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4];
    [[UIColor blueColor] setFill];
    [path fill];

    // for just a border...

    int thickness=2;
    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:
            CGRectInset(self.bounds, thickness/2, thickness/2)
            cornerRadius: 4];
    path.lineWidth = thickness;
    [[UIColor blueColor] setStroke];
    [path stroke];
    }

@end
// ps don't forget to set .backgroundColor=[UIColor clearColor]
// perhaps in initWithCoder/initWithFrame

Hope it helps someone

Solution 5:

I have implemented the AppStore style button here for your reference: ASButton.m

and the project is here

Hope to help :]