Draw the border around particular part of text in label

Question

I have attached a screen shot of label should show following contents. Time stamp text appended by two images and again one text having white border. I've append images to label by using NSTextAttachment then i'm appending the text that has to show either at last or in between two images depends on condition. With one more label I can achieve this easily if text comes every time at the end but it won't.I saw so many tutorials to create the border for complete text of label.Is there any way to create border only for particular part of label text.

That's not easy. `NSAttributedString` doesn't have anything build for this, and so you may have to play with CoreText. Best solution? Have image pre-built, for the "PG-n", draw yourself the image and then you can use `NSTextAttachment`, use a specific font (or create one) that have this "PG-13" considering it as a "symbol"/char with the border... — Larme, Dec 05 '17 at 15:56
Hi Larme, You mean to say create border and text as image and append to label. Could you explain briefly. — manideep, Dec 05 '17 at 16:07
Some lead/idea: https://stackoverflow.com/questions/23236703/draw-text-with-a-border-and-background-for-a-nstableview-cell — Larme, Dec 05 '17 at 16:19

Reinier Melian · Answer 1 · 2017-12-05T16:48:02.147

You need to make an image with your needed text and attach to the text as NSTextAttachment here is the implementation for that

Objective-C Version You can make your PG image like this

@implementation ImageHelper

+(UIImage*)imageForText:(NSString*)text{
        UILabel * lblBadge = [[UILabel alloc] initWithFrame:CGRectMake(0,0,16,16)];
        [lblBadge setTextAlignment:NSTextAlignmentCenter];
        [lblBadge setLineBreakMode:NSLineBreakByClipping];
        [lblBadge setTextColor:[UIColor darkGrayColor]];
        [lblBadge.layer setCornerRadius:2.0f];
        [lblBadge.layer setBorderWidth:1];
        [lblBadge setText:text];
        [lblBadge sizeToFit];
        [lblBadge setBounds:CGRectMake(0,0,lblBadge.bounds.size.width + 4,lblBadge.bounds.size.height)];

        UIGraphicsBeginImageContextWithOptions(lblBadge.bounds.size, NO, [UIScreen mainScreen].scale);
        [lblBadge.layer setAllowsEdgeAntialiasing:YES];
        [lblBadge.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return img;
}

@end

example of Use

NSMutableAttributedString * normalNameString = [[NSMutableAttributedString alloc]initWithString:@"testing "];

NSTextAttachment * attachment = [[NSTextAttachment alloc] init];
attachment.image = [ImageHelper imageForText:@"PG-13"];
attachment.bounds = CGRectMake(0, -6, attachment.image.size.width, attachment.image.size.height);
[normalNameString appendAttributedString:[NSAttributedString attributedStringWithAttachment:attachment]];

self.lblText.attributedText = normalNameString;

Swift Version

You can make your PG image like this

class imageHelper{
    static func pgImage(textValue:String) ->UIImage{
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 15, height: 16))
        label.lineBreakMode = .byClipping
        label.textAlignment = .center
        label.textColor = UIColor.darkGray
        label.layer.borderColor = UIColor.darkGray.cgColor
        label.layer.borderWidth = 1
        label.layer.cornerRadius = 2
        label.text = textValue
        label.sizeToFit()
        label.bounds = CGRect(x: 0, y: 0, width: label.bounds.size.width + 4, height: label.bounds.size.height)

        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, UIScreen.main.scale)
        label.layer.allowsEdgeAntialiasing = true
        label.layer.render(in: UIGraphicsGetCurrentContext()!)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

example of Use

        let normalNameString = NSMutableAttributedString.init(string: "testing ")

        let attachment = NSTextAttachment()
        attachment.image = imageHelper.pgImage(textValue: "PG-13")
        attachment.bounds = CGRect(x: 0, y: -6, width: (attachment.image?.size.width)!, height: (attachment.image?.size.height)!)
        normalNameString.append(NSAttributedString(attachment: attachment))

        self.lblText.attributedText = normalNameString

RESULT

how to decrease the font size and then in an image form?Actually when i do that the font size looks very big so any solution @Reinier Melian — Aashi, Oct 01 '20 at 07:03
@Aashi you need to change the font size in `imageForText` method something like `[lblBadge setFont: YourFont];` — Reinier Melian, Oct 01 '20 at 07:34
If I want to give space between testing and PG-13, what I need to do @ReinierMelian. Thanks in advance. — Ambrose Jesuraj, Nov 16 '20 at 13:39

Draw the border around particular part of text in label

1 Answers1

Linked