How do I make UILabel display outlined text? How do I make UILabel display outlined text? ios ios

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;}


A simpler solution is to use an Attributed String like so:

Swift 4:

let strokeTextAttributes: [NSAttributedStringKey : Any] = [    NSAttributedStringKey.strokeColor : UIColor.black,    NSAttributedStringKey.foregroundColor : UIColor.white,    NSAttributedStringKey.strokeWidth : -2.0,    ]myLabel.attributedText = NSAttributedString(string: "Foo", attributes: strokeTextAttributes)

Swift 4.2:

let strokeTextAttributes: [NSAttributedString.Key : Any] = [    .strokeColor : UIColor.black,    .foregroundColor : UIColor.white,    .strokeWidth : -2.0,    ]myLabel.attributedText = NSAttributedString(string: "Foo", attributes: strokeTextAttributes)

On a UITextField you can set the defaultTextAttributes and the attributedPlaceholder as well.

Note that the NSStrokeWidthAttributeName has to be negative in this case, i.e. only the inner outlines work.

UITextFields with an outline using attributed texts


After reading the accepted answer and the two corrections to it and the answer from Axel Guilmin, I decided to compile an overall solution in Swift, that suits me:

import UIKitclass UIOutlinedLabel: UILabel {    var outlineWidth: CGFloat = 1    var outlineColor: UIColor = UIColor.whiteColor()    override func drawTextInRect(rect: CGRect) {        let strokeTextAttributes = [            NSStrokeColorAttributeName : outlineColor,            NSStrokeWidthAttributeName : -1 * outlineWidth,        ]        self.attributedText = NSAttributedString(string: self.text ?? "", attributes: strokeTextAttributes)        super.drawTextInRect(rect)    }}

You can add this custom UILabel class to an existing label in the Interface Builder and change the thickness of the border and its color by adding User Defined Runtime Attributes like this: Interface Builder setup

Result:

big red G with outline