CODEWITHSUNDEEP
iosxcodebadge
Cherr Skees
Cherr Skees

Reputation: 1518

Adding a badge icon to round rect button?

Is there a convenient way to make a button with a badge? Not on the icon... I want to do it within the app. A button or an image with a badge selected by the program. Or do I have to build a library of photoshop images?

Upvotes: 3

Views: 6343

Answers (2)

Ilesh P
Ilesh P

Reputation: 4036

UILabel   *lbl_notification_count = [[UILabel alloc]initWithFrame:CGRectMake(5,0, 18, 18)];

        lbl_notification_count.textColor = [UIColor whiteColor];

        lbl_notification_count.textAlignment = NSTextAlignmentCenter;

        lbl_notification_count.text = [NSString stringWithFormat:@"%d",appDel.NotificationBadge];

        lbl_notification_count.adjustsFontSizeToFitWidth=YES;

        lbl_notification_count.layer.borderWidth = 1;

        lbl_notification_count.layer.cornerRadius = lbl_notification_count.layer.frame.size.height/2;

        lbl_notification_count.layer.masksToBounds = YES;

        lbl_notification_count.layer.borderColor =[[UIColor colorWithRed:241.0/255.0 green:84.0/255.0 blue:67.0/255.0 alpha:1.0] CGColor];

        lbl_notification_count.backgroundColor = [UIColor colorWithRed:241.0/255.0 green:84.0/255.0 blue:67.0/255.0 alpha:1.0];

        lbl_notification_count.font = CustomFontMediumWithSize(12);

        if (appDel.NotificationBadge >= 1) {

            [btnNotification addSubview:lbl_notification_count];

             [lbl_notification_count setHidden:NO];

        }else{

             [lbl_notification_count setHidden:YES];

        }

Upvotes: 0

sooper
sooper

Reputation: 6039

You'll need to use resizableImageWithCapInsets to achieve this without a library of photoshop images. There are some great threads (here and here) that explain its use.

Here's an example I just made to give you an idea:

//Create a label (width/height not important at this stage)
UILabel *yourLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 1, 1)];
yourLabel.text = @"7+";
[yourLabel sizeToFit];

CGRect labelFrame = yourLabel.frame;

//Here we create a UIImage that is resizable, but will not resize the areas concerned with the cap insets you've defined
UIImage *badgeImage = [[UIImage imageNamed:@"badge.png"]resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5)];
UIImageView *badgeImageView = [[UIImageView alloc]initWithImage:badgeImage];

badgeImageView.contentMode = UIViewContentModeScaleToFill;
badgeImageView.backgroundColor = [UIColor clearColor];

labelFrame.size.width += 5; //This is the 'padding' on the right and left (added together)
//If your badge edges are completely circular then you don't want to change the height, but if they're not then go ahead in the same way with the width. If your badge has a static height, you'll need to make sure the font size doesn't exceed this height; better start off with a small font-size

badgeImageView.frame = labelFrame; //The badge is now the right width with padding taken into account

//Center the label on the badge image view
yourLabel.center = CGPointMake(badgeImageView.frame.size.width/2, badgeImageView.frame.size.height/2);

//Finally we add the label to the badge image view
[badgeImageView addSubview:yourLabel];
//Add your badge to the main view
[self.view addSubview:badgeImageView];

[badgeImageView release];
[yourLabel release];

Upvotes: 3

Related Questions