Set top alignment for labels with different font sizes, Swift 3

Question

I have seen similar SO questions with Objective C code, without much help.

I have 2 labels (currencyLabel, costLabel) with different font sizes, I would like them to be aligned to the top as you can see in the below picture. I tried by setting the same top spacing (viewHeight / 3) for both, but that doesn't seem to work.

Constraints are set in the last 4 lines of the code.

Please advice if there is a better approach to do this.

Here is the code:

override func viewDidLoad() {
    super.viewDidLoad()

    let viewWidth   =   self.view.bounds.width
    let viewHeight  =   self.view.bounds.height

    // 1. Creating Currency Label
    currencyLabel                 =   UILabel()
    currencyLabel.numberOfLines   =   1
    currencyLabel.text            =   "$"
    currencyLabel.textColor       =   Colors.curieBlue
    currencyLabel.font            =   UIFont.systemFont(ofSize: 50)

    // 1.1 Creating Cost Label
    costLabel                 =   UILabel()
    costLabel.numberOfLines   =   1
    costLabel.text            =   "15"
    costLabel.textColor       =   Colors.curieBlue
    costLabel.font            =   UIFont.boldSystemFont(ofSize: 150)

    // Disabling auto constraints
    currencyLabel.translatesAutoresizingMaskIntoConstraints =   false
    costLabel.translatesAutoresizingMaskIntoConstraints     =   false

    // Adding subviews to main view
    self.view.addSubview(currencyLabel)
    self.view.addSubview(costLabel)


    let views = [
        "currencyLabel"     :   currencyLabel,
        "costLabel"         :   costLabel
        ] as [String : Any]



    // Setting constraints for Cost Label
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-\(costLabelLeftSpacing)-[costLabel]", options: [], metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-\(viewHeight / 3)-[costLabel]", options: [], metrics: nil, views: views))

    // Setting constraints for Currency Label
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[currencyLabel]-10-[costLabel]", options: [], metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-\(viewHeight / 3)-[currencyLabel]", options: [], metrics: nil, views: views))

}

Answer 1

solution by programming:

you may use UILabel's attributed string property to handle this situation.

attribute options have one option named "NSBaselineOffsetAttributeName", it will render text offset the default baseline. and this offset can be measured through UIFont properties

offset = ascender - capHeight

code sample:

 class CustomViewController: UIViewController {

        override func viewDidLoad() {
            super.viewDidLoad()    
            setupViews()
        }

        let currencyLabel: UILabel = {
            let label = UILabel()
            let font = UIFont.systemFont(ofSize: 50)

            // measure baseline offset
            let offset = font.ascender - font.capHeight

            label.attributedText = NSAttributedString(string: "$", attributes: [NSFontAttributeName: font, NSBaselineOffsetAttributeName: offset])
            label.translatesAutoresizingMaskIntoConstraints = false
            label.backgroundColor = UIColor.blue
            return label
        }()

        let costLabel: UILabel = {
            let label = UILabel()
            let font = UIFont.systemFont(ofSize: 150)
            let offset = font.ascender - font.capHeight
            label.attributedText = NSAttributedString(string: "15", attributes: [NSFontAttributeName: font, NSBaselineOffsetAttributeName: offset])
            label.translatesAutoresizingMaskIntoConstraints = false
            label.backgroundColor = UIColor.green
            return label
        }()

        func setupViews() {
            view.backgroundColor = UIColor.red

            view.addSubview(currencyLabel)
            view.addSubview(costLabel)

            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[v0]-[v1]", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": currencyLabel, "v1": costLabel]))
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[v0]", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": currencyLabel]))
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[v0]", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": costLabel]))
        }

    }

result:

Answer 2

You can use align tool, next to pin tool, to add constraints between currency and value label. Align top edges of both the label. . Hope it helps!!