Alignement du haut de l'étiquette

Question

J'essaie de mettre la température dans mon application. Je voudrais le montrer comme ça:

Mais tout ce que je suis en mesure d'obtenir que:

J'ai essayé d'utiliser ce code pour aligner les deux étiquettes sur le dessus:

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

il a travaillé sur le « ° C », mais il ne fonctionne pas pour le 25. quelqu'un peut-il me aider à trouver une solution à mon problème?

Answer 1

Une manière très simple de résoudre c'est avec des cordes attribuées:

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 

Vous pouvez continuer à ajouter plusieurs attributs différents sur tout plage que vous voulez en utilisant la méthode addAttributes.

Answer 2

Une police a de multiples caractéristiques, y compris Ascender, Descender, CapHeight, etc ... Donc, ce que votre code obtient est pas un moyen d'aligner les glyphes de caractères affleurant le haut du cadre de l'étiquette, mais il aligne le Font encadrant le haut du cadre.

Calculer le décalage entre les métriques de police pourrait vous donner ce que vous recherchez. Voici un exemple (vous pouvez l'exécuter dans une page 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 

Et voici le résultat:

En fonction de police que vous utilisez réellement, cependant, que peut ne pas être assez bon. Si oui, vous aurez envie de regarder dans CoreText/CTFont/CTFontGetGlyphsForCharacters()/etc