Custom UILabel View not updating it's frame in Interface Builder

Question

I'm trying to create a UILabel for Font Awesome, which seems to work well so far. The issue I'm having is that when I change the font size for the label in prepareForInterfaceBuilder(), it's not reflected in the Interface Builder.

This is my code:

import Foundation
import UIKit

@IBDesignable
class FALabel : UILabel {

    @IBInspectable
    private var icon: String = ""

    @IBInspectable
    private var weight: NSInteger = 0

    /**
     * The type for the Font Awesome Label
     */
    enum FAType {
        case Brands
        case Light
        case Regular
        case Solid
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }

    /**
     * Prepare the view or the Interface Builder.
     */
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupView()
    }

    /**
     * Set up the view.
     */
    func setupView() {
        let type: FAType =  {
            switch self.weight {
            case 0:  return .Light
            case 2:  return .Solid
            case 3:  return .Brands
            default: return .Regular
            }
        }()

        setFontAwesomeIcon(faType: type, size: self.font.pointSize, icon: FAIcons.iconNamed(name: self.icon))
        self.sizeToFit()
        self.frame = CGRect(x: self.frame.minX, y:self.frame.minY, width:self.frame.width, height:self.frame.height)
        self.invalidateIntrinsicContentSize()
    }

    /**
     * Calculate the intrinsic content size.
     */
    override var intrinsicContentSize: CGSize {
        return CGSize(width: self.frame.width, height: self.frame.height)
    }

    /**
     * Set the Font Awesome Icon for the label.
     *
     * - parameter fatype: The type to set.
     * - parameter size:   The size for the font.
     * - parameter icon:   The icon to use.
     */
    func setFontAwesomeIcon(faType: FAType, size: CGFloat, icon:String) {
        if faType == .Regular {
            self.font = UIFont(name: "FontAwesome5Pro-Regular", size: size)
        } else if faType == .Solid {
            self.font = UIFont(name: "FontAwesome5Pro-Solid", size: size)
        } else if faType == .Light {
            self.font = UIFont(name: "FontAwesome5Pro-Light", size: size)
        } else if faType == .Brands {
            self.font = UIFont(name: "FontAwesome5Brands-Regular", size: size)
        }
        self.text = icon
    }
}

When I change anything in the Interface Builder, the frame seems to stay the same size but the icon itself is drawn larger like I want.

I thought that calling self.sizeToFit() from prepareForInterfaceBuilder() should resize the view and change those 15x18 dimensions, but it doesn't seem to be.

Answer 1

I think that any size related adjustments should be put in layoutSubviews.

override func layoutSubviews() {
   super.layoutSubviews()
   setupView()
}

You might use prepareForInterfaceBuilder to populate some samples data, for example to preview in the IB, but you shouldn’t recall the setup you already did in init methods (like setupView()).

You can also omit the init methods I guess and simplify everything down to:

import Foundation
import UIKit

@IBDesignable
class FALabel : UILabel {

    @IBInspectable
    public var icon: String = "" { 
        didSet { setupView() } 
    }

    @IBInspectable
    public var weight: NSInteger = 0 { 
        didSet { setupView() } 
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setupView()
    }

    /**
     * The type for the Font Awesome Label
     */
    enum FAType {
        case Brands
        case Light
        case Regular
        case Solid
    }

    /**
     * Set up the view.
     */
    func setupView() {
        let type: FAType =  {
            switch self.weight {
            case 0:  return .Light
            case 2:  return .Solid
            case 3:  return .Brands
            default: return .Regular
            }
        }()

        setFontAwesomeIcon(faType: type, size: self.font.pointSize, icon: FAIcons.iconNamed(name: self.icon))
        self.sizeToFit()
        self.frame = CGRect(x: self.frame.minX, y:self.frame.minY, width:self.frame.width, height:self.frame.height)
        self.invalidateIntrinsicContentSize()
    }

    /**
     * Calculate the intrinsic content size.
     */
    override var intrinsicContentSize: CGSize {
        return CGSize(width: self.frame.width, height: self.frame.height)
    }

    /**
     * Set the Font Awesome Icon for the label.
     *
     * - parameter fatype: The type to set.
     * - parameter size:   The size for the font.
     * - parameter icon:   The icon to use.
     */
    func setFontAwesomeIcon(faType: FAType, size: CGFloat, icon:String) {
        if faType == .Regular {
            self.font = UIFont(name: "FontAwesome5Pro-Regular", size: size)
        } else if faType == .Solid {
            self.font = UIFont(name: "FontAwesome5Pro-Solid", size: size)
        } else if faType == .Light {
            self.font = UIFont(name: "FontAwesome5Pro-Light", size: size)
        } else if faType == .Brands {
            self.font = UIFont(name: "FontAwesome5Brands-Regular", size: size)
        }
        self.text = icon
    }
}