How to create Badges like Foursquare did?

Question

I want to create these blue and red badge labels Foursquare did as shown in the following screenshot.

How to create Badges like Foursquare did?

Answer 1

This might not be the best code in the world but it should work. You must import QuartzCore/QuartzCore.h, and don't forget to add the button as a subview.

    UIButton * btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 15)];
    [btn setTitle:@“Hello” forState:UIControlStateNormal];
    [btn sizeToFit];
    CGRect frame = btn.frame;

    // adding horizontal spacing
    frame = CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), CGRectGetWidth(frame) + 24, CGRectGetHeight(frame));

    // decreasing vertical spacing
    frame = CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), CGRectGetWidth(frame), CGRectGetHeight(frame) - 8);

    btn.frame = frame;
    btn.layer.cornerRadius = CGRectGetHeight(frame)/2;
    btn.clipsToBounds = YES; // not sure if needed

    // if you want a border:
    btn.layer.borderWidth = 1;
    btn.layer.borderColor = [UIColor greenColor].CGColor;