为不同字体大小的标签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属性测量此偏移量

offset = ascender - 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]))
        }

    }

结果：

Answer 2

您可以使用pin工具旁边的对齐工具在货币和值标签之间添加约束。 对齐标签的顶部边缘。 。 希望能帮助到你！！

Answer 3

我使用下面的代码：

let font:UIFont? = UIFont(name: "Helvetica", size:30)

let fontSuper:UIFont? = UIFont(name: "Helvetica", size:18)

let fontspace:UIFont? = UIFont(name: "Helvetica", size:8)

let attString:NSMutableAttributedString = NSMutableAttributedString(string: "₹ 6000.00", attributes: [.font:font!])

attString.setAttributes([.font:fontSuper!,.baselineOffset:8], range: NSRange(location:0,length:1))

attString.setAttributes([.font:fontspace!,.baselineOffset:8], range: NSRange(location:1,length:1))

attString.setAttributes([.font:fontSuper!,.baselineOffset:0], range: NSRange(location:attString.length-3,length:3))

lblPrice.attributedText = attString