Fontsize of two labels on one line

Question

So what I want: I'd like to have a label on one line. The first word should have the font size 100 and the other has the font size 10. Does anybody have an idea how to achieve this? When I'm calling the method below I would get a string composed of both label with the exactly same properties.

    public let speedLabel: UILabel = {
       let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.sizeToFit()
        label.font = UIFont(name: "Helvetica-Bold", size: 100)
        label.text = "0.0"
        label.textColor = UIColor.blue
        label.textAlignment = .left
        return label
    }()
    
    public let speedUnitLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.sizeToFit()
        label.font = UIFont(name: "Helvetica-Bold", size: 10)
        label.text = "km/h"
        label.textAlignment = .right
        label.textColor = UIColor.blue
        return label
    }()

This is how I set up those labels:

        func setupSpeedLabel() {
            SpeedContainerView.addSubview(speedLabel)
            speedLabel.centerXAnchor.constraint(equalTo: TopBackGroundView.centerXAnchor, constant: 0).isActive = true
            speedLabel.centerYAnchor.constraint(equalTo: SpeedContainerView.centerYAnchor, constant: 0).isActive = true
            speedLabel.isUserInteractionEnabled = false
            view.bringSubviewToFront(speedLabel)
        }
        func setupSpeedUnitLabel() {
            SpeedContainerView.addSubview(speedUnitLabel)
            speedUnitLabel.centerXAnchor.constraint(equalTo: speedLabel.leftAnchor, constant: 0).isActive = true
            speedUnitLabel.centerYAnchor.constraint(equalTo: SpeedContainerView.centerYAnchor, constant: 0).isActive = true
            speedUnitLabel.isUserInteractionEnabled = false
            view.bringSubviewToFront(speedUnitLabel)
        }

Answer 1

Tried the code and labels had different properties, so the problem could be related to the parent view of the labels.

What I did though was to change speedUnitLabel.centerXAnchor.constraint on setupSpeedUnitLabel() from speedLabel.leftAnchor, constant: 0 to speedLabel.rightAnchor, constant: 20 (the 20 constant is just to give a little space in between text).

Ended up with this

func setupSpeedUnitLabel() {

    SpeedContainerView.addSubview(speedUnitLabel)
    speedUnitLabel.centerXAnchor.constraint(equalTo: speedLabel.rightAnchor, constant: 20).isActive = true
    speedUnitLabel.centerYAnchor.constraint(equalTo: SpeedContainerView.centerYAnchor, constant: 0).isActive = true
    speedUnitLabel.isUserInteractionEnabled = false
    view.bringSubviewToFront(speedUnitLabel)
}

And this is the output:

enter image description here

What I assume is what you are trying to achieve.

Make sure SpeedContainerView and its parent view are big enough to support the 100 font size.

Hope this helps.