How to make a label display multiple lines before the leading constraint of another label?

Question

I'm doing an assignment from a book for learning iOS development. The assignment requires that the name label at the upper left area of a table cell should be able to display multiple lines if the name is too long and it should not go beyond the leading constraint of the value label at the far right of the same cell like this:

Besides the other usual constraints, I added the trailing constraint to the name label, which is equal to the trailing constraint of the value label, like this:

And the run result is like the following:

The name label text undesirably runs over the top of the value label text.

I've also tried to add a horizontal space between the name label and the value label, but the compiler reported a conflict of constraints. Would you please tell me what I should do to make it right?

Thank you very much!

Answer 1

If you typed that correctly, then your problem is you set the trailing anchor of the name label equal to the trailing anchor of the value label. That would mean that the right edge of each label has to be equal. You don't want that. The system is probably breaking your constraint and making its own weird one instead which is causing the undesirable behavior.

Set the trailing anchor of the name label equal to the leading anchor of the value label minus some constant (whatever padding you want).

Programmatically you do something like this

nameButton.translatesAutoresizingMaskIntoConstraints = false
nameButton.trailingAnchor.constraint(equalTo: valueButton.leadingAnchor, constant: -10)

If you must use storyboard, which I advise against in general, I think this or some other tutorial page will show you how. I don't know how to use storyboard very well at all.

https://www.raywenderlich.com/811496-auto-layout-tutorial-in-ios-getting-started

Answer 2

First You need to set Your name label trailing constraint to your value label leading like as below

Then If you try to increase content of your name label it shows error like this

To Solve this error go to View Controller View hierarchy and change the priority of name label

Then You achieved...

Answer 3

tried this one, hoping the following is the result you required

final result

in order to acquire this

1. first insert two labels in the cell as follows

labels added

2. given top and leading constraints for the title label

title label constraints

3. in order to give constraints (Horizontal spacing) between title and the amount right click and hold in title label and drag to amount label. it will show a
   pop up window as follows

horizontal spacing

once we select the horizontal spacing we have to change according to our need

in-order to change select title label then select size inspector from the
right window

then change the trailing space to the amount label

updated value

now given constraints for title label

• leading
• top
• horizontal spacing to amount label (trailing)

once it given it will show error in the constraints since the amount label constraints are not given

next have to give constraints for amount label

• trailing
• width and size
• vertical position on the cell

constraints for amount label

now try to input larger text values in title label

look like one more step to complete

in order to get multiple line change the number of line property value of title label to 0 in attribute inspector

final output