CODEWITHSUNDEEP
iosswiftsketch-3
Mukesh Gami
Mukesh Gami

Reputation: 1230

convert sketch line height into ios line 'height multiple' property

enter image description here

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.

Upvotes: 10

Views: 9751

Answers (4)

Tancrede Chazallet
Tancrede Chazallet

Reputation: 7245

@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

Upvotes: 14

bbjay
bbjay

Reputation: 1820

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

Upvotes: 10

dirtydanee
dirtydanee

Reputation: 6151

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.

enter image description here

Upvotes: 6

xmhafiz
xmhafiz

Reputation: 3538

In storyboard, use the Atributed style of UILabel. Below is example with 2.5 line height

enter image description here

Upvotes: 1

Related Questions