Définir l'alignement supérieur pour les étiquettes avec différentes tailles de police, Swift 3

Question

J'ai vu des questions SO similaires avec le code Objective C, sans beaucoup d'aide.

J'ai 2 étiquettes (currencyLabel, costLabel) avec différentes tailles de police, je voudrais qu'ils soient alignés en haut comme vous pouvez le voir dans l'image ci-dessous. J'ai essayé en définissant le même espacement supérieur (viewHeight/3) pour les deux, mais cela ne semble pas fonctionner.

Les contraintes sont définies dans les 4 dernières lignes du code.

Veuillez nous aviser s'il existe une meilleure approche pour ce faire.

Voici le code:

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

solution

par programmation:

vous pouvez utiliser chaîne attribué de UILabel propriété pour gérer cette situation.

options d'attribut ont une option nommée "NSBaselineOffsetAttributeName", il va rendre le texte compenser la ligne de base par défaut. et ce décalage peut être mesurée par des propriétés UIFont

offset = Ascender - capHeight

exemple de code:

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

    } 

Résultat:

Answer 2

Vous pouvez utiliser align outil, à côté de la broche outil pour ajouter des contraintes entre la monnaie et l'étiquette de valeur. Alignez les bords supérieurs des deux étiquettes. . J'espère que cela aide!!

Answer 3

Je n'utilisant sous le code:

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