标签顶部对齐

时间:2017-10-02 13:27:51

标签: ios swift user-interface

我正试着把温度放在我的应用程序中。我想这样表明: enter image description here

但我能得到的是:

enter image description here

我尝试使用此代码将两个标签对齐在顶部:

@IBDesignable class TopAlignedLabel: UILabel {
    override func drawText(in rect: CGRect) {
        if let stringText = text {
            let stringTextAsNSString = stringText as NSString
            let labelStringSize = stringTextAsNSString.boundingRect(with: CGSize(width: self.frame.width,height: CGFloat.greatestFiniteMagnitude), options: NSStringDrawingOptions.usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil).size
        super.drawText(in: CGRect(x:0,y: 0,width: self.frame.width, height:ceil(labelStringSize.height)))
        } else {
            super.drawText(in: rect)
        }
    }
}

它适用于'°C',但它不适用于25.有人可以帮我找到解决问题的方法吗?

2 个答案:

答案 0 :(得分:1)

字体有多种特性,包括Ascender,Descender,CapHeight等......所以你的代码得到的是而不是一种将字符字形与标签框顶部齐平的方法,而是将 Font 边界框对齐到框架的顶部。

计算字体指标之间的偏差可以为您提供您所追求的内容。这是一个示例(您可以在Playground页面中运行它):

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController {

    let labelOne: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 60.0)
        label.text = "25"
        label.backgroundColor = .cyan
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        label.textAlignment = .right
        return label
    }()

    let labelTwo: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 24.0)
        label.text = "°C"
        label.backgroundColor = .cyan
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        return label
    }()


    override func viewDidLoad() {
        super.viewDidLoad()

        // add the scroll view to self.view
        self.view.addSubview(labelOne)
        self.view.addSubview(labelTwo)

        // constrain the scroll view to 8-pts on each side
        labelOne.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
        labelOne.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true

        labelTwo.leftAnchor.constraint(equalTo: labelOne.rightAnchor, constant: 2.0).isActive = true


        if let f1 = labelOne.font, let f2 = labelTwo.font {
            let offset = (f1.ascender - f1.capHeight) - (f2.ascender - f2.capHeight)
            labelTwo.topAnchor.constraint(equalTo: labelOne.topAnchor, constant: offset).isActive = true
        }

    }

}

let vc = TestViewController()
vc.view.backgroundColor = .yellow
PlaygroundPage.current.liveView = vc

这就是结果:

enter image description here

根据您实际使用的字体,可能不够好。如果是这样,您会想要查看CoreText / CTFont / CTFontGetGlyphsForCharacters() /等。

答案 1 :(得分:1)

解决此问题的一种非常简单的方法是使用属性字符串:

let tempText = "25˚C"
let baseFont = UIFont.systemFont(ofSize: 23.0)!
let superscriptFont = UIFont.systemFont(ofSize: 15.0)!
let attrStr = NSMutableAttributedString(string: tempText, attributes: [NSFontAttributeName: baseFont])
attrStr.addAttributes([NSFontAttributeName: superscriptFont, NSBaselineOffsetAttributeName: 10.0], range: NSMakeRange(2,2))

myLabel.attributedText = attrStr

您可以使用addAttributes方法在所需的任何范围内添加更多不同的属性。