2

I have a multiline UILabel with the text "I would like to ride a boat in indian ocean". In iPhone 5 the UILabel displays the text "ocean" in the second line because of width size.

What I want is If text in UILabel appears in two lines, then the text "indian ocean" should display in second line or in case of sufficient width available, all text should appear in one line.

Any ideas how to achieve this.

Sujay
  • 2,510
  • 2
  • 27
  • 47
Surya Subenthiran
  • 2,217
  • 1
  • 15
  • 22
  • 1
    Reduce the width of the label? or force a line break? `"I would like to ride a boat in\nindian ocean"` – Wez Mar 31 '16 at 08:09
  • @Wezly, If I reduce the width or force a line break, It may cause the problem in iPhone 6 and iPad devices. I don't want it to happen. – Surya Subenthiran Mar 31 '16 at 08:10
  • 1
    Then maybe think about [detecting the iPhone model](http://stackoverflow.com/questions/26028918/ios-how-to-determine-iphone-model-in-swift) – Wez Mar 31 '16 at 08:12
  • @Wezly I also thought of doing this. As far as I know, I think that's the only way to achieve this. – Surya Subenthiran Mar 31 '16 at 08:35
  • @SuryaSubenthiran are you using auto layout constraints ? or you creating UILabel programatically? – Raj Tandel Mar 31 '16 at 08:49
  • You can use this wonderful `Marquee Label` which works same as android label marquee effect. You can review it on [GitHub](https://github.com/cbpowell/MarqueeLabel) – Dipen Panchasara Mar 31 '16 at 09:04
  • @SuryaSubenthiran, No need to use auto-layout or to detect your device type...with the help of attribute property you can fix this...check my answer. – Sujay Mar 31 '16 at 10:06

5 Answers5

1

Its a work around. But this suits your requirement with no need of determining the device on which app runs. Generally UILabel wraps the words around whitespaces. So probably you should make indian ocean a single word, but still it should be displayed as two separate words.

let string = "<font size = 5 face = Avenir Next>I would like to ride a boat in<font color = white>_</font>indian ocean</font>"
let attributedString = try? NSAttributedString(data: string.dataUsingEncoding(NSUTF8StringEncoding)!, options:[NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType, NSCharacterEncodingDocumentAttribute: NSUTF8StringEncoding], documentAttributes: nil)
label.attributedText = attributedString

You can specify the required font size, family and set the color of _ to the backgroundColor of UILabel.

Mathews
  • 733
  • 5
  • 11
1
  1. You should calculate iPhone width.
  2. Calculate text width in label.
  3. If text width > iPhone width then set "indian ocean" in new line

Please check the following code:

let screenRect = UIScreen.mainScreen().bounds;
let screenWidth = screenRect.size.width;

let text:String = self.label.text!
let attr:NSDictionary = [NSFontAttributeName: self.label.font];
let textSize = (text as NSString).sizeWithAttributes(attr as? [String : AnyObject])
let textWidth = textSize.width

if textWidth > screenWidth{
    self.label.text = "I would like to ride a boat in\nindian ocean"
}
Ahmed Lotfy
  • 3,806
  • 26
  • 28
1

No need to use device detection...using one trick you can solve this problem "if label displays the text in two lines, then the text "indian ocean" will display second line or it will display in first line."

Steps to follow :

  1. Change UILabel's text type from plain to attribute in attribute inspector.
  2. Put any character between "indian ocean" e.g. "indian_ocean".
  3. Select that character (in my case i have used underscore "_") and change text color and set opacity to 0% (no need to change color only opacity is enough to make transparent so that user can not see the character).

That's it.

Or follow the gif image. enter image description here

Sujay
  • 2,510
  • 2
  • 27
  • 47
0
label.numberOfLines = 0;
label.text = @"I would like to ride a boat in indian ocean"; 
[label sizeToFit];
PhoebeC
  • 33
  • 3
0

Here is an UILabel extension for showing consecutive text components in same line. https://github.com/Umair-Bhatti/ConsecutiveComponents
Just add the file and following line of code

label.addConsectiveComponents(["indian ocean"])

It will show "indian ocean" always in one line i.e. if there is space in current line it will be shown there otherwise in next line.

UmairBhatti
  • 1