My designer send me sketch file which says 'Line height: 22' for label. How can i achieve this in xcode interface builder. Is there any way to define this line height using code or UI builder.
Asked
Active
Viewed 9,200 times
10
-
is it a single line label? – dirtydanee Jun 16 '17 at 09:12
-
@dirtydanee --- no.. its paragraph. – Mukesh Gami Jun 16 '17 at 09:16
-
your designer should be defining font size and paragrah/line spacing, not line height. – dirtydanee Jun 16 '17 at 10:12
-
@dirtydanee .. thanks for suggesition.. i just uploaded the spec. where font size/ and line height both are mention – Mukesh Gami Jun 16 '17 at 10:27
4 Answers
12
@bbjay did put me on the right track.
If you want to obtain the exact result of Sketch, the formula is:
paragraphStyle .lineSpacing = sketchLineHeight - font.lineHeight
Provided that the font was given sketchFontSize
Tancrede Chazallet
- 7,035
- 6
- 41
- 62
9
I've found the following formula to work well for me. It converts form Sketch line height to iOS line spacing:
lineSpacing = sketchLineHeight - sketchFontSize - (font.lineHeight - font.pointSize)
In code, for your case this would be:
let font = UIFont.systemFont(ofSize: 18) // or whatever font you use
textLabel.font = font
let attributedString = NSMutableAttributedString(string: "your text")
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 22 - 18 - (font.lineHeight - font.pointSize)
attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
textLabel.attributedText = attributedString
bbjay
- 1,728
- 3
- 19
- 35
6
Line height is coming from CSS, so your designer must have a web designer background. On the mobile platforms, we do not specify line height, but line spacing.
In general NSMutableParagraphStyle offers capabilities to modify multiline labels for iOS.
NSMutableParagraphStyle has a property called maximumLineHeight, but this will only set the maximum line height to a certain value, if the containment of the label would exceed a certain value.
To set this up in IB, you need to add the label, and change the Text property to Attributed. Than click on paragraph style icon, and set the line spacing for the label. Looking at the design, it is around 2 points of line spacing, what you need. You can either ask your designer to provide you with line spacing attribute or try to find the right line spacing value by randomly trying out different values.
dirtydanee
- 6,081
- 2
- 27
- 43
1
In storyboard, use the Atributed style of UILabel. Below is example with 2.5 line height
xmhafiz
- 3,482
- 1
- 18
- 26
-
1thank you for response but i would like to know how can i change 18pt to 'Height Multiple; dimension. – Mukesh Gami Jun 16 '17 at 09:41
-
Actually my designer gave me line height in point. But i suspect in attributed Line property unit is point. – Mukesh Gami Jun 16 '17 at 09:48