In this article we learn setting up different colors in one label using NSAttributedString.

Label has text property and attributedText property.

Here we are going to use attributedText property for customization.

Add the following code:

override func viewDidLoad() {
    super.viewDidLoad()
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textAlignment = .center
    view.addSubview(label)
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    label.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.98).isActive = true
    label.heightAnchor.constraint(equalTo: label.widthAnchor, multiplier: 1).isActive = true
    
    let normalString = "BLUE  RED  GREEN  PURPLE  YELLOW"
    
    let attributedText = NSMutableAttributedString(string: normalString)
    
    attributedText.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.blue, NSAttributedStringKey.font: UIFont(name: "AvenirNext-Bold", size: 15)!], range: getRangeOfSubString(subString: "BLUE", fromString: normalString)) // Blue color attribute
    
    attributedText.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.red, NSAttributedStringKey.font: UIFont(name: "Baskerville-BoldItalic", size: 27)!], range: getRangeOfSubString(subString: "RED", fromString: normalString)) // RED color attribute
    
    attributedText.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.green, NSAttributedStringKey.font: UIFont(name: "Chalkduster", size: 19)!], range: getRangeOfSubString(subString: "GREEN", fromString: normalString)) // GREEN color attribute
    
    attributedText.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.purple, NSAttributedStringKey.font: UIFont(name: "DINCondensed-Bold", size: 13)!], range: getRangeOfSubString(subString: "PURPLE", fromString: normalString)) // PURPLE color attribute
    
    attributedText.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.yellow, NSAttributedStringKey.font: UIFont(name: "Futura-CondensedExtraBold", size: 24)!], range: getRangeOfSubString(subString: "YELLOW", fromString: normalString)) // YELLOW color attribute
    
    label.attributedText = attributedText
}

func getRangeOfSubString(subString: String, fromString: String) -> NSRange {
    let sampleLinkRange = fromString.range(of: subString)!
    let startPos = fromString.distance(from: fromString.startIndex, to: sampleLinkRange.lowerBound)
    let endPos = fromString.distance(from: fromString.startIndex, to: sampleLinkRange.upperBound)
    let linkRange = NSMakeRange(startPos, endPos - startPos)
    return linkRange
}

In above code we are setting attribute color and font attributes for each word using NSRange.

Download sample project with example :

In this article we will learn how to add margins/padding to the label using custom UIEdgeInsets.


In the above image we can clearly see "without padding" and "with padding".

"Without padding" is not looking great, so usually developers prefer labels with padding.

Step 1:

Create new swift file and add the following code:

import UIKit

class SSPaddingLabel: UILabel {
    var padding : UIEdgeInsets
    
    
    // Create a new SSPaddingLabel instance programamtically with the desired insets
    required init(padding: UIEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)) {
        self.padding = padding
        super.init(frame: CGRect.zero)
    }
    
    // Create a new SSPaddingLabel instance programamtically with default insets
    override init(frame: CGRect) {
        padding = UIEdgeInsets.zero // set desired insets value according to your needs
        super.init(frame: frame)
    }
    
    // Create a new SSPaddingLabel instance from Storyboard with default insets
    required init?(coder aDecoder: NSCoder) {
        padding = UIEdgeInsets.zero // set desired insets value according to your needs
        super.init(coder: aDecoder)
    }
    
    override func drawText(in rect: CGRect) {
        super.drawText(in: UIEdgeInsetsInsetRect(rect, padding))
    }
    
    // Override `intrinsicContentSize` property for Auto layout code
    override var intrinsicContentSize: CGSize {
        let superContentSize = super.intrinsicContentSize
        let width = superContentSize.width + padding.left + padding.right
        let heigth = superContentSize.height + padding.top + padding.bottom
        return CGSize(width: width, height: heigth)
    }
    
    // Override `sizeThatFits(_:)` method for Springs & Struts code
    override func sizeThatFits(_ size: CGSize) -> CGSize {
        let superSizeThatFits = super.sizeThatFits(size)
        let width = superSizeThatFits.width + padding.left + padding.right
        let heigth = superSizeThatFits.height + padding.top + padding.bottom
        return CGSize(width: width, height: heigth)
    }
}

Step 2:

Create label and set content insets as follow:

let label = SSPaddingLabel()
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)
label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
label.backgroundColor = UIColor.white
label.padding = UIEdgeInsetsMake(8, 15, 8, 15)
label.text = "Hello Padding!"
label.sizeToFit()
label.layer.cornerRadius = label.frame.height/2
label.layer.masksToBounds = true

Download sample project with example :