2

I am working on a music player and have labels set up for the song, album, and artist. Now, just for the sake of UI, I would like the song label to always use space for 3 lines, even if the text is 1 line. I have set the number of lines to 3 in the attributes inspector, but it only shows 3 lines if the song title is actually that long!

My first idea of a workaround is to lock the height of the label to 3X the text size(and then some for spacing). Is there maybe a better solution? Or a different object I could use?

Jake Dobson
  • 1,716
  • 3
  • 11
  • 29
  • I suggest to add screenshots, they will be very helpful to describe what are you trying to achieve. – Ahmad F Jan 29 '17 at 21:04
  • I need a label to always present 3 lines...Is a screenshot really necessary? – Jake Dobson Jan 29 '17 at 21:09
  • Do you know where you want to split up the lines? Can you split the string into substrings, because you can force a line break by saying `\r` in between quotes (that's a backslash). – Pierce Jan 29 '17 at 21:13
  • Also, please note that if you _do_ force a height of `3 x whatever_pointsize`, your text (even if it is smaller than 3 lines) will be always centered vertically. If you're fine with that, I could provide a possible solution, but it would require subclassing the `UILabel`. Having said that, if your overall layout is relatively simple, probably the best solution would be a couple of constraints in the label. – Alladinian Jan 29 '17 at 21:19
  • Well, the strings are coming from the system music player. So it is grabbing it from the information my phone has on it for that song. To display the text of the song I use: songLabel.text = nowPlayingItem.title (which is a string) I locked the height and it did center it vertically. Any idea on how to start the text at the top of the label rather than centered vertically? – Jake Dobson Jan 29 '17 at 22:38
  • Answered this, let me know if it helps or not! – owlswipe Jan 30 '17 at 02:55
  • @owlswipe you answered this where??? – Jake Dobson May 05 '17 at 02:30
  • @JakeDobson I deleted my answer because you didn't really like it, and I don't understand your complaint with it (if you elaborate I'd be happy to try to help more). Anyway, I've undeleted that answer. – owlswipe May 05 '17 at 11:53

3 Answers3

1

To force a UILabel to take up three lines as in a music player, you'll just need to add line breaks at the appropriate places with \n and set the label's lines to 3.

Adding line breaks:

var title = "Title"
var album = "Album"
var artist = "Artist"

label.text = "\(title)\n" +
      "\(album)\n" +
      "\(artist)\n"

Setting label to 3 lines:

label.numberOfLines = 3 // or set this to 4 or higher if the title of the song might exceed one line
owlswipe
  • 19,159
  • 9
  • 37
  • 82
  • This is actually great info! Not quite what I was looking for, though. There are separate labels for each the song title, album, and artist. I wanted the song title label to always be the height of 3 lines of text, and the Album/artist are locked at 1 line. The workaround I've been using is locking the height to a little more than 3X the text's height(for 24-pt font it came out to 86 pts). – Jake Dobson Jan 30 '17 at 18:37
0

I needed to accomplish something similar - I needed the UILabel to always be two lines tall, regardless of the text.

After some experimentation, I found that naively adding a new line to the end of the text only gives the desired behavior if the text is one line tall. If the text is already two lines tall due to its content then it results in ellipses at the end of the second line.

I used the code from another question to determine how many lines my text actually renders, and if it is less than desired I append a line feed \n to the end of the string. How to find actual number of lines of UILabel?

Just add as many lines feeds to the end as your UILabel as you need to reach your desired number of lines. (note that the code I used from the above question would return 1 line more than the text actually spans, so my logic is something like if desiredLines >= myLabel.numberOfVisibleLines { /*Appened \n to string*/})

Dan
  • 473
  • 3
  • 7
0

You can try this approach:

  1. Take a UILabel and put it in a UIStackView.

  2. Set the UILabel.amountOfLines = 3

  3. Add another UIView to the UIStackView beneath the label.

  4. Configure auto layout to have the UILabel intrinsic content be with with higher priority than the UIView.

  5. Set the UIStackView height to be constrained exactly to 3 lines height.

The result should be that whatever amount of lines the text is, the Stack view will be in the expected height. But the intrinsic nature will have the text push the label as long as it has text to fill in the 3 lines it has.

As opposed to the accepted answer, you don’t need to care about what the text is, so this is more likely to help other readers who need something of this sort.

Eyzuky
  • 1,843
  • 2
  • 22
  • 45
  • 1
    But wouldn't you accomplish the same by setting the UILabel's height to be exactly to 3 lines height? Problem with this approach is that what is the height of 3 lines? Users might have dynamic font sizes so height varies. – Rauli Rikama Mar 05 '20 at 11:52