3

I have a multi-line UILabel, and another label that should start right after the first one ends.

Here's what it looks like for one line of text: enter image description here

As you can see, the second label with "39 sec" is aligned to the left and baseline of the message label.

Here's a multi-line label with a truncated tail: enter image description here

This is also fine, but the problem occurs when the message label needs two lines, but the second line is shorter than the first. Here's a pic of what I'm having trouble with: enter image description here

So I need to figure out how to align the second label (the one with the time on it) to the right where the text ends on the first. Is there any known way to do this, or is there a different solution of which I'm unaware?

LulzCow
  • 1,199
  • 2
  • 9
  • 21

3 Answers3

0

Instead of using two different labels, I would use string concatenation and use the same label and combine two different strings. For example, 

let sampleText = "Hey this is a test..." + " " + "1 sec"

If you are worried about different fonts for each line of text, you can use attributed text to customize that as well.

Nevin Jethmalani
  • 2,726
  • 4
  • 23
  • 58
  • Looking at the second picture in my question, how would you know when to cut off the first label? You can't truncate the tail of the label because that would clobber the "1 sec" part. So if the first string is really long, what could I do to know when to replace the text with "..."? – LulzCow May 17 '17 at 23:14
  • You could set a character limit. After x number of characters the first string would get cut off and then you can just append the "1 sec" to the end of that string. I feel like your issue is similar to this one right? http://stackoverflow.com/questions/37409260/uilabel-text-truncation-vs-line-breaks-in-text – Nevin Jethmalani May 17 '17 at 23:45
  • Yes, I think it's basically the same problem. A character limit would make it a bit inconsistent, but it's probably the easiest way to get close to what I want – LulzCow May 18 '17 at 00:18
0

I think that you don't need 2 labels in that case.

If you want part of your label text to have different font, you should use NSAttributedString and set label.attributedText property.

However, you will have to deal with the truncated tail case.

Maybe setting lineBreakMode to .byTruncatingMiddle would work for you?

If not, you have to compute size of your string for given font, set width constraint to less or equal, and truncate your text manually.

Potentially useful resources:

How to calculate the width of a text string of a specific font and font-size?

Figure out size of UILabel based on String in Swift

Community
  • 1
  • 1
kostek
  • 801
  • 2
  • 15
  • 32
  • I was using one label with .byTruncatingMiddle, but my designer didn't like it, so I've been trying to figure it out with two labels. I'm not sure how I can determine the max width of the second line to truncate it manually. – LulzCow May 17 '17 at 23:22
  • Looks like you need something similar: http://stackoverflow.com/questions/24783183/truncate-uilabel-in-specific-location – kostek May 17 '17 at 23:38
0

Your UI seems to be doing exactly what it should. For a multiline label, the width would be dependent on the length of the longest line. Consider the following:

enter image description here

Notice how the first line, "This is the" determines the width of the label so anything you align to this would not necessarily be aligned to the last line.

One option to resolve this would be to set the contents of the second label as part of the first programmatically with consistent spacing. So in your View Controller, do something like:

self.firstLabel.text = [NSString stringWithFormat:@"%@   %@",firstContent,secondContent];

Just determine the spacing you want in the code. I know this is Objective-C but you get the drift. You could also use the attributed text property if you want to maintain different attributes for both texts.

Fourth
  • 630
  • 1
  • 7
  • 22
  • I'm confused about how I would handle truncating the first string and still allow for the second one to always show up. I can't truncate the tail of the label, and I could technically truncate the middle, but that just looks bad. Do you know how I could determine where to replace the end of the first string with "..." if it's width is too big? – LulzCow May 17 '17 at 23:18