为具有不同字体大小的标签设置顶部对齐，Swift 3

Question

我在 Objective C 代码中看到过类似的 SO 问题，但没有太多帮助。

我有 2 个不同字体大小的标签（currencyLabel、costLabel），我希望它们与顶部对齐，如下图所示。我尝试为两者设置相同的顶部间距（viewHeight / 3），但这似乎不起作用。

在代码的最后 4 行中设置了约束。

请建议是否有更好的方法来做到这一点。

这是代码：

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

通过编程解决：

您可以使用 UILabel 的属性字符串属性来处理这种情况。

属性选项有一个名为“ NSBaselineOffsetAttributeName ”的选项，它将呈现文本偏移默认基线。这个偏移量可以通过 UIFont 属性来测量

偏移量 = 上升 - capHeight

代码示例：

 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]))
        }

    }

结果：