Outline UILabel text in UILabel Subclass

ios uilabel text outline
border to uilabel
uilabel clickable text swift
nsattributedstring border
swift underline text
uilabel extension swift 4
nsattributedstring -- swift 4 example
underline uilabel

I'm trying hard to find a way to simply add an outline/stroke/contour to my UILabel text. Talking about a stroke around the letters of the text not around the background of a UILabel.

I'm using swift 3 and I'd like to outline my text directly into my subclass: UILabel.

I found multiple answers suggesting this way to do things :

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

    self.attributedText = NSMutableAttributedString(string: self.text!, attributes: strokeTextAttributes)

But the thing is that it doesn't work. My text is still the same with no outline...

Could anyone help me here ? That would be a great thing :)

Thanks a lot. Cheers guys.

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)

ios - Outline UILabel text in UILabel Subclass, I'm trying hard to find a way to simply add an outline/stroke/contour to my UILabel text. Talking about a stroke around the letters of the text not around the  Summary of the text UILabel in subclass UILabel I'm trying hard to find a way to simply add an outline/stroke/contour to my UILabel text. Talking about a stroke around the letters of the text not around the background of a UILabel. I'm using swift 3 and I'd like to outline my text directly into my

@anandnimje answer converted to Swift 4.2 and wrapped it into a function:

public func stroke(font: UIFont, strokeWidth: Float, insideColor: UIColor, strokeColor: UIColor) -> [NSAttributedStringKey: Any]{
    return [
        NSAttributedStringKey.strokeColor : strokeColor,
        NSAttributedStringKey.foregroundColor : insideColor,
        NSAttributedStringKey.strokeWidth : -strokeWidth,
        NSAttributedStringKey.font : font
        ]
}

Usage:

label.attributedText = NSMutableAttributedString(string: "Hello World", 
attributes: stroke(font: UIFont(name: "SourceSansPro-Black", size: 20)!, 
strokeWidth: 4, insideColor: .white, strokeColor: .black))

Make sure you have the right name for your UIFont, else it crashes. Should never be a problem if you have the right name.

Custom Label Effects in Swift 5.1 - Anand Nimje, Creating the custom label effects in your application it's not a big deal you can easily attributedText = NSMutableAttributedString(string: “Your outline text”,  MarqueeLabel is a UILabel subclass adds a scrolling marquee effect when the text of the label outgrows the available width. The label scrolling direction and speed/rate can be specified as well. All standard UILabel properties (where it makes sense) are available in MarqueeLabel, with the intent of MarqueeLabel behaving just like a UILabel.

Here you have class with implementation, copy and paste to playgrond for test:

    class StrokedLabel: UILabel {

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

                let customizedText = NSMutableAttributedString(string: newValue,
                                                               attributes: strokeTextAttributes)


                attributedText = customizedText
            }
        }
    }


//////////// PLAYGROUND IMPLEMENTATION PART /////////
    let text = "Stroked text"

// UILabel subclass initialization
    let label = StrokedLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
// simple assign String to 'strockedText' property to see the results
    label.strockedText = text

    label.backgroundColor = UIColor.white


    label

Swift 4.2

import UIKit

class StrokedLabel: UILabel {

var strockedText: String = "" {
    willSet(newValue) {
        let strokeTextAttributes : [NSAttributedString.Key : Any] = [
            NSAttributedString.Key.strokeColor : UIColor.black,
            NSAttributedString.Key.foregroundColor : UIColor.white,
            NSAttributedString.Key.strokeWidth : -4.0,
            NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 30)
            ] as [NSAttributedString.Key  : Any]

        let customizedText = NSMutableAttributedString(string: newValue,
                                                       attributes: strokeTextAttributes)


        attributedText = customizedText
    }
}

}

//////////// PLAYGROUND IMPLEMENTATION PART /////////
  let text = "Stroked text"

  // UILabel subclass initialization
  let label = StrokedLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
  // simple assign String to 'strockedText' property to see the results
  label.strockedText = text

  label.backgroundColor = UIColor.clear


  label

Maybe refactoring for this class will be welcomed, but should work for you at this form

As you can see usage is very convenient. 👾

Programming IOS 7, Here is the code for a UILabel subclass that will respond to that situation by Instead ofletting a label grow, you can elect to permit its text font size to shrink if this For example, this is the code from a UILabel subclass that outlines the label  DWAnimatedLabel. An UILabel subclass that lets you animate text with different types, inspired by RQShineLabel. Features. Subclass of UILabel, easy to use; Use CADisplayLinkto perform smooth animation

Below is what I used in my App written in Swift 4.1

Swift 4.x

let strokeTextAttributes: [NSAttributedStringKey: Any] = [
    NSAttributedStringKey.strokeColor: UIColor.black,
    NSAttributedStringKey.foregroundColor : UIColor.white,
    NSAttributedStringKey.strokeWidth : -3.0,
    NSAttributedStringKey.font : UIFont.boldSystemFont(ofSize: 18)
]

IOS 7 Programming Fundamentals: Objective-C, Xcode, and Cocoa Basics, Here's an example from one of my own apps, in which I subclass UILabel to make a label that draws its own rectangular border and has its content inset  How do I add a black outline to my white UILabel text? Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise

Update to Swift 5

This answer is built on Anandnimje and J.Doe answers, and is meant to update and streamline it to make the usage clearer and simpler.

Simply use these two functions:

func outline(string:String, font:String, size:CGFloat, outlineSize:Float, textColor:UIColor, outlineColor:UIColor) -> NSMutableAttributedString {
    return NSMutableAttributedString(string:string,
                                     attributes: outlineAttributes(font: UIFont(name: font, size: size)!,
                                                        outlineSize: outlineSize, textColor: textColor, outlineColor: outlineColor))
}

func outlineAttributes(font: UIFont, outlineSize: Float, textColor: UIColor, outlineColor: UIColor) -> [NSAttributedString.Key: Any]{
    return [
        NSAttributedString.Key.strokeColor : outlineColor,
        NSAttributedString.Key.foregroundColor : textColor,
        NSAttributedString.Key.strokeWidth : -outlineSize,
        NSAttributedString.Key.font : font
    ]
}

Then use outline with your labels as the following:

label.attributedText = outline(string: "Label Text", font: "HelveticaNeue", size: 14, outlineSize: 4, textColor: .white, outlineColor: .black)

Programming IOS 6, Here's an example from one of my own apps, in which I subclass UILabel to make a label that draws its own rectangular border and has its content inset  up vote 82 down vote favorite 72 All I want is a one pixel black border around my white UILabel text. I got as far as subclassing UILabel with the code below, which I clumsily cobbled together from a few tangentially related online examples.

Programming IOS 5: Fundamentals of IPhone, IPad, and IPod Touch , Here's an example from one of my own apps, in which I subclass UILabel to make a label that draws its own rectangular border and has its content inset  UILabel subclass, which additionally allows shadow blur, inner shadow, stroke text and fill gradient.

tobihagemann/THLabel: UILabel subclass, which , Carthage Compatible Platform Twitter. THLabel is a subclass of UILabel, which additionally allows shadow blur, inner shadow, stroke text and fill gradient. UILabel.UILabelAppearance Remarks This appearance class is a strongly typed subclass of UIAppearance that is intended to be used with objects of class UILabel .

uilabel · GitHub Topics · GitHub, UILabel subclass, which additionally allows shadow blur, inner shadow, stroke text and fill An UILabel subclass that lets you animate text with different types. An UILabel subclass that lets you animate text with different types, inspired by RQShineLabel.

Comments
  • The number is (from the documentation): NSNumber containing floating point value, in percent of font point size, default 0: no stroke; positive for stroke alone, negative for stroke and fill (a typical value for outlined text would be 3.0).
  • Thanks mate. Setting a var in the sublass and doing label.strockedText = text directly from my VC did the trick for me. I didn't new this willSet method. Well thanks to you @roher
  • Don't copy paste
  • Oh gosh...I simply missed the reply with the same answer. I was looking the at the best answer.