6

I want to align a UILabel's text vertically with line spacing via xib in iOS, for example:

 hello,
 how are
 you?

Please help me.

Krunal
  • 77,632
  • 48
  • 245
  • 261
IKKA
  • 6,297
  • 7
  • 50
  • 88
  • @holex,I think it is possible via programatically(setLineSpacing property for NSMutableAttributedString),But i want to know how to implement same process using xib? – IKKA Jul 18 '14 at 08:33
  • possible duplicate of [Xcode: Is there a way to change line spacing (UI Label) in interface builder?](http://stackoverflow.com/questions/12112657/xcode-is-there-a-way-to-change-line-spacing-ui-label-in-interface-builder) – Kathiravan G Jul 18 '14 at 08:37
  • Check this link http://stackoverflow.com/questions/12112657/xcode-is-there-a-way-to-change-line-spacing-ui-label-in-interface-builder – Kathiravan G Jul 18 '14 at 08:37
  • @KathiravanG,generate UILabel for each line of text..Any other way?? – IKKA Jul 18 '14 at 08:54
  • i did't get what you say. could you elaborate what u asking? – Kathiravan G Jul 18 '14 at 09:09

4 Answers4

10

Yes it is possible to adjust line spacing via xib. Click on UIlabel on xib,then change ‘text’ property type to ’Attributed’,then go through following images. Then enter new line(press ctrl-return shortcut key)and keep cursor in between two lines then adjust ‘line’ property and ‘Max Height’ property you want. My UILael text is "Hello,how are you?"

enter image description here

Kara
  • 6,115
  • 16
  • 50
  • 57
IKKA
  • 6,297
  • 7
  • 50
  • 88
  • while setting text you must do myLabel.attributedText = @"My texts....". This will not work-->myLabel.text = @"...." – Dipu Rajak Jul 18 '14 at 19:07
6

Create this simple UILabel subclass:

@interface CustomLabel : UILabel
@property (assign, nonatomic) CGFloat myLineSpacing;
@end


@implementation CustomLabel

- (void)setMyLineSpacing:(CGFloat)myLineSpacing {
    _myLineSpacing = myLineSpacing;
    self.text = self.text;
}

- (void)setText:(NSString *)text {
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = _myLineSpacing;
    paragraphStyle.alignment = self.textAlignment;
    NSDictionary *attributes = @{NSParagraphStyleAttributeName: paragraphStyle};
    NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:text
                                                                         attributes:attributes];
    self.attributedText = attributedText;
}

Set myLineSpacing property value with IB.

screenshot

Still you cannot preview in IB, but line spacing value is in xib!
You can set label.text in your code without caring about line spacing.

Note:
don't make property name "lineSpacing". UILabel do have undocumented lineSpacing property, and overriding that breaks something.

rintaro
  • 51,423
  • 14
  • 131
  • 139
  • 1
    "Note: don't make property name "lineSpacing". UILabel do have undocumented lineSpacing property, and overriding that breaks something." @rintaro this really helps – user1139921 May 05 '15 at 00:29
  • Couldn't get this to work for a month. de-prioritised this feature, had character spacing, underlining etc working. Finally, on the eve of our UAT thought i would have another crack at this and came across that simple 'note' and it solved it :| what a pain that thats not more obvious. Thanks @rintaro – ssh88 Dec 09 '15 at 01:46
3

*From Interface Builder:**

enter image description here

Programmatically:

SWift 4

Using label extension

extension UILabel {

    // Pass value for any one of both parameters and see result
    func setLineSpacing(lineSpacing: CGFloat = 0.0, lineHeightMultiple: CGFloat = 0.0) {

        guard let labelText = self.text else { return }

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = lineSpacing
        paragraphStyle.lineHeightMultiple = lineHeightMultiple

        let attributedString:NSMutableAttributedString
        if let labelattributedText = self.attributedText {
            attributedString = NSMutableAttributedString(attributedString: labelattributedText)
        } else {
            attributedString = NSMutableAttributedString(string: labelText)
        }

        // Line spacing attribute
        attributedString.addAttribute(NSAttributedStringKey.paragraphStyle, value:paragraphStyle, range:NSMakeRange(0, attributedString.length))

        self.attributedText = attributedString
    }
}

Now call extension function

let label = UILabel()
let stringValue = "How\nto\nimplement\nUILabel\nline\nspacing\nusing\nxib?"

// Pass value for any one argument - lineSpacing or lineHeightMultiple
label.setLineSpacing(lineSpacing: 2.0) .  // try values 1.0 to 5.0

// or try lineHeightMultiple
//label.setLineSpacing(lineHeightMultiple = 2.0) // try values 0.5 to 2.0

Or using label instance (Just copy & execute this code to see result)

let label = UILabel()
let stringValue = "How\nto\nimplement\nUILabel\nline\nspacing\nusing\nxib?"
let attrString = NSMutableAttributedString(string: stringValue)
var style = NSMutableParagraphStyle()
style.lineSpacing = 24 // change line spacing between paragraph like 36 or 48
style.minimumLineHeight = 20 // change line spacing between each line like 30 or 40

// Line spacing attribute
attrString.addAttribute(NSAttributedStringKey.paragraphStyle, value: style, range: NSRange(location: 0, length: stringValue.characters.count))

// Character spacing attribute
attrString.addAttribute(NSAttributedStringKey.kern, value: 2, range: NSMakeRange(0, attrString.length))

label.attributedText = attrString
Krunal
  • 77,632
  • 48
  • 245
  • 261
-8

Type it exactly the same way you desire in any text editor like TextEdit etc and then paste in the text section of your label in xib.

But make sure height of your label is more to fit the content and also increase the number of lines. For this case it can be 3 or more.

enter image description here

Subhransu
  • 108
  • 4
  • how to increase line space between "hello" and "This is"? – IKKA Jul 18 '14 at 08:57
  • @user Just add space in the text in TextEdit and paste it here. You can't edit the text directly in Xib. So type it in a text editor exactly how you want and then paste in the text section of your Xib. – Subhransu Jul 18 '14 at 09:00