How to Make Uilabel Display Outlined Text

How do I make UILabel display outlined text?

I was able to do it by overriding drawTextInRect:

- (void)drawTextInRect:(CGRect)rect {

  CGSize shadowOffset = self.shadowOffset;
  UIColor *textColor = self.textColor;

  CGContextRef c = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(c, 1);
  CGContextSetLineJoin(c, kCGLineJoinRound);

  CGContextSetTextDrawingMode(c, kCGTextStroke);
  self.textColor = [UIColor whiteColor];
  [super drawTextInRect:rect];

  CGContextSetTextDrawingMode(c, kCGTextFill);
  self.textColor = textColor;
  self.shadowOffset = CGSizeMake(0, 0);
  [super drawTextInRect:rect];

  self.shadowOffset = shadowOffset;

}

Outline UILabel text in UILabel Subclass

This code works for me.

Swift 3

let strokeTextAttributes = [
  NSStrokeColorAttributeName : UIColor.black,
  NSForegroundColorAttributeName : UIColor.white,
  NSStrokeWidthAttributeName : -4.0,
  NSFontAttributeName : UIFont.boldSystemFont(ofSize: 30)
] as [String : Any]

myLabel.attributedText = NSMutableAttributedString(string: "Test me i have color.", attributes: strokeTextAttributes)

---

---

---

Swift 4.2 & 5.1

let strokeTextAttributes = [
  NSAttributedString.Key.strokeColor : UIColor.red,
  NSAttributedString.Key.foregroundColor : UIColor.white,
  NSAttributedString.Key.strokeWidth : -4.0,
  NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 30)]
  as [NSAttributedString.Key : Any]

labelOutLine.attributedText = NSMutableAttributedString(string: "Your outline text", attributes: strokeTextAttributes)

---

Outline for UILabel text

One option is to set the shadow, which might not be exactly what you want, but achieves a similar effect. You can manually adjust the offset:

UILabel *myLabel = ...;
lbl.shadowColor = [UIColor whiteColor];
lbl.shadowOffset = CGSizeMake(0, -1.0);

Please note that you can also define this in Interface Builder for your UILabel.

shadow http://i.minus.com/jbiG0jVdOxJbgh.png

If this is not enough for you check out this blog post which deals with subclassing UILabel to get a glow effect:

_{(source: redrobotstudios.com)}

How do I add an outline to my label in Swift?

You need to use NSAttributedString, set strokeColor and strokeWidth to set outline and foregroundColor to set text color. Try this:

let attrString = NSAttributedString(
    string: "Write Something with Outline",
    attributes: [
        NSAttributedStringKey.strokeColor: UIColor.black, 
        NSAttributedStringKey.foregroundColor: UIColor.white, 
        NSAttributedStringKey.strokeWidth: -2.0, 
        NSAttributedStringKey.font: UIFont.systemFont(ofSize: 17.0)
    ]
)
yourLabel.attributedText = attrString

This will look like below:

How to achieve a thick stroked border around text UILabel

Use this designable class to render labels with the stroke on the storyboard. Most of the fonts I tried look bad (with CGLineJoin.miter), I found the "PingFang TC" font most closely resembles the desired output. Though CGLineJoin.round lineJoin looks fine on most of the font.

@IBDesignable
class StrokeLabel: UILabel {
    @IBInspectable var strokeSize: CGFloat = 0
    @IBInspectable var strokeColor: UIColor = .clear
  
    override func drawText(in rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        let textColor = self.textColor
        context?.setLineWidth(self.strokeSize)
        context?.setLineJoin(CGLineJoin.miter)
        context?.setTextDrawingMode(CGTextDrawingMode.stroke)
        self.textColor = self.strokeColor
        super.drawText(in: rect)
        context?.setTextDrawingMode(.fill)
        self.textColor = textColor
        super.drawText(in: rect)
    }
}

Output: (Check used values in the attribute inspector for reference)

How to add only outer outline to UILabel on iOS

You can subclass UILabel to get this effect

public class StrokedLabel: UILabel{
    internal var mOutlineColor:UIColor?
    internal var mOutlineWidth:CGFloat?

    @IBInspectable var outlineColor: UIColor{
        get { return mOutlineColor ?? UIColor.clear }
        set { mOutlineColor = newValue }
    }

    @IBInspectable var outlineWidth: CGFloat{
        get { return mOutlineWidth ?? 0 }
        set { mOutlineWidth = newValue }
    }

    override public func drawText(in rect: CGRect) {
        let shadowOffset = self.shadowOffset
        let textColor = self.textColor

        let c = UIGraphicsGetCurrentContext()
        c?.setLineWidth(outlineWidth)
        c?.setLineJoin(.round)
        c?.setTextDrawingMode(.stroke)
        self.textColor = mOutlineColor;
        super.drawText(in:rect)

        c?.setTextDrawingMode(.fill)
        self.textColor = textColor
        self.shadowOffset = CGSize(width: 0, height: 0)
        super.drawText(in:rect)

        self.shadowOffset = shadowOffset
    }
}

UILabel custom Text

You can use NSTextAttachment for that behaviour. I modify this for position of attachment.

All code :

  @IBOutlet weak var lbl: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
   
    let string = "Urban points users average montly saving is "

    
    let normalNameString = NSMutableAttributedString.init(string: string)

    let attachment = NSTextAttachment()
    attachment.image = imageHelper.pgImage(textValue: "QAR 115 ", lbl: lbl)
    
    attachment.bounds = CGRect(x: 0, y: (lbl.font.capHeight - attachment.image!.size.height).rounded() / 2, width: attachment.image!.size.width, height: attachment.image!.size.height)

    
    normalNameString.append(NSAttributedString(attachment: attachment))
    normalNameString.append(NSAttributedString(string: "You have saved "))
    
    let attachment2 = NSTextAttachment()
    attachment2.image = imageHelper.pgImage(textValue: "QAR 29",textColor: UIColor.yellow,backgroundColor: UIColor.black , lbl: lbl)
    attachment2.bounds = CGRect(x: 0, y: (lbl.font.capHeight - attachment2.image!.size.height).rounded() / 2, width: attachment2.image!.size.width, height: attachment2.image!.size.height)
   
    normalNameString.append(NSAttributedString(attachment: attachment2))
    normalNameString.append(NSAttributedString(string: " this month"))

    lbl.attributedText = normalNameString
}

}

class imageHelper{
static func pgImage(textValue:String,textColor : UIColor = UIColor.white , backgroundColor : UIColor = UIColor.red,lbl : UILabel) ->UIImage{
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: (textValue as NSString).size(withAttributes: [NSAttributedString.Key.font : lbl.font!]).width, height: lbl.frame.size.height))
    label.font = lbl.font
    label.textAlignment = .center
    label.textColor = textColor
    label.backgroundColor = backgroundColor
    label.layer.borderColor = UIColor.darkGray.cgColor
    label.layer.borderWidth = 1
    label.layer.cornerRadius = label.frame.size.height/2
    label.layer.masksToBounds = true
    label.text = textValue
    label.numberOfLines = 1

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

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

And the result is :

---

Related Topics