Sviluppando App iOS capita spesso di dover implementare parti di Design che includono paragrafi di testo. Molto spesso può accadere che l’interlinea di sistema non sia quello desiderato.
9/16/2015
Luca D'IncĂ
In love with design, tidy processes, and bitter coffee.
Interlinea
L’interlinea, come riportato nell’immagine, è l’altezza di ogni riga del paragrafo di testo includendo l’altezza del font stesso.
UILabel + LineHeight
Sfortunatamente le API native di iOS non mettono nulla a disposizione per impostare il LineHeight all’interno di una UILabel. Per ovviare a questo problema Apple propone due classi molto potenti:
The NSMutableParagraphStyle class adds methods to its superclass, NSParagraphStyle, for changing the values of the subattributes in a paragraph style attribute. See the NSParagraphStyle and NSAttributedString specifications for more information.
NSMutableParagraphStyle fornisce il metodo che fa al caso nostro: lineSpacing.
LineSpacing ci consente di applicare ad una stringa un lineHeight desiderato.
Per integrare questa funzionalità all’interno di una UILabel ho creato un estensione della UILabel implementando un apposita funzione, setLineHeight(lineHeight: CGFloat).
Di seguito è riportato il frammento di codice da integrare all’interno dei vostri progetti:
LineHeight
Line height
LineHeight, as shown in the image, is the height of a single text line including the font size too.
UILabel + LineHeight
Unfortunately, iOS native APIs won’t make anything available to the developer to set up the LineHeight within a UILabel. Apple offers two very powerful classes to solve this issue, which are NSMutableAttributedString and NSMutableParagraphStyle
As specified by Apple records:
The NSMutableParagraphStyle class adds methods to its superclass, NSParagraphStyle, for changing the values of the subattributes in a paragraph style attribute. See the NSParagraphStyle and NSAttributedString specifications for more information.
NSMutableParagraphStyle provides lineSpacing, which will be our solution.
LineSpacing allows the developer to apply a desired lineHeight to a text line.
I created an UILabel extension implementing a specific feature, setLineHeight(lineHeight: CGFloat), to complement this feature inside a UILabel.
This is the code fragment to implement within your projects:
import UIKit
extension UILabel {
func setLineHeight(lineHeight: CGFloat) {
let text = self.text
if let text = text {
let attributeString = NSMutableAttributedString(string: text)
let style = NSMutableParagraphStyle()
style.lineSpacing = lineHeight
attributeString.addAttribute(NSParagraphStyleAttributeName, value: style, range: NSMakeRange(0, count(text)))
self.attributedText = attributeString
}
}
}
‍
‍
9/16/2015
Luca D'IncĂ
In love with design, tidy processes, and bitter coffee.
Un nuovo articolo ogni mese
Non perdere il prossimo! Resta aggiornato sul mondo della progettazione e dello sviluppo dei prodotti digitali.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Iscrivendoti accetti di ricevere la nostra newsletter periodica. Useremo il tuo indirizzo e-mail unicamente per inviarti aggiornamenti sulle nostre attività . Leggi l’informativa completa.