在标签中绘制文本特定部分周围的边框

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.

Answer 1

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