I have a problem with a label constraint.
My goal is to have 2 labels on the same Y coordinate of a tableViewCell. One of the labels is pinned on the left side and the other is pinned on the right side.
Like that:
[This is the first label] [Second]
The first label should have a dynamic width based on the text which it has to display, BUT it should end about 20 points to the second label.
I tried that with numerous constraints, but sometimes the first label seem to push the second label out of the view and sometimes the first label just overlaps the second label like in this example:
The first label has constraints for:
Top Space to Superview
Leading Space to Superview
Bottom Space to a third label
Trailing Space to THE second Label (<= 20)
What is the correct way to display the two labels correctly?
Thanks in advance, appreciate your help!
EDIT
Tried the solution with giving the second label a maxwidth. Now, it is randomly working or not working. I don't get this at all.
Like others have said, you need to set the trailing constraint from the left label to the right label as greater than or equal to, so that there is a gap of at least 20 between the two.
But, you also need to designate which label truncates first. By not doing this, iOS will take it upon itself to choose, which is probably why your current solution works only some of the time. This is where Content Compression Resistance Priority comes into play. Set the value lower for the label you want to truncate first.
You can do this on your storyboard under the size inspector.
I'm assuming you want your left label to truncate first. In that case, make sure the left label has a lower horizontal content compression resistance priority than the right label. Notice how above I just dropped it to 749, as the default is 750.
Check out this answer for a good explantation on content compression and content hugging.
if your second label on the right side has fixed width or max width :) here is what you can do :)
Set the distance between left label and right label to >= 20
set the width of the right label with some value using [yourvalue] or [>=your value]
SO overall here is how label's constraints should appear
|-(distance_to_left_Label)-[left-label]-(>=20)-[right_lable(your_value)]-(distance_to_right)-|
Hope my answer helped :)
Related
I have an application in swift,and have encountered an autolayout issue. I've come up with the solution to it, but it doesn't seem to work as expected.
So, here's the issue:
I have two labels in a table view cell. The first one should only have one line, and the second one must have as many lines as needed and take up as much vertical space as needed. The first label should always be shown fully and, therefore, determine the position, the size, and the number of lines of the second label. Texts for both are set programmatically when drawing the cell, of course.
The solution seems to be pretty simple: Anchor the first label to the left, center it vertically, anchor the second label to the parent top, right, bottom and the right side of the first one. Set the number of lines to 0 for the second label. The editor shows no warnings or errors.
This is how it looks like:
In most cases it looks good, like on the picture below, but sometimes not (red arrows at the picture below):
The first label should have absolute priority and never be truncated, wrapped, or cut, but this happens. What am I doing wrong?
UPD: For the question to be more clear, the first label is so called 'margin label', it represents the margin and the indicator of the cell. This is done to imitate a tree structure. The second is, of course, the text itself. '>' is for the closed comment, 'v' is for the opened.
Select the first label (the >) and go into the measurements panel in Interface Builder.
Near the bottom it will have a value for "Content Compression Resistance". Currently it will be 251 or 751 (I can't remember which) and it will be equal to the other label.
Change this value to 1000. This will stop it from compressing and make the second label compress instead.
set height constraint for first label and set 1 for 'lines' attribute
you can set the trailing of the first label is >= to the leading of the second label
Increase the content compression resistance priority of the first label. If needed increase the horizontal content hugging priority of the second label.
I've been learning how to make iOS apps, and have come across a minor annoyance. I can't find an easy way to align my text inputs.
Looking at the below screenshot, you will see that I've managed to align my text fields, which is what I want.
However, I did this manually by changing the individual Leading Space between each Label and Text Field.
My question is, how can I dynamically align my text fields?
Anand has posted nice way, but I personally use equal widths and heights in this kind of situation. So let's make a brief of it:
1) First, put constraints onto the age label:
left leading c.
top leading c.
width c.
height c.
2) Put constraints onto the top right textfield:
right trailing c.
top leading c.
height c.
the constraint, that will be related to spacing between label and textfield, so CTRL drag from textfield to label a select horizontal spacing c.
3) Then, make a second row of you elements - place second label and second textfield approximately of the same width and height in storyboard (with IB you can fix it later using magic function Update frames).
4) Then, set this for your weight label:
left leading c.
top leading c.
then select both labels and check equal widths checkbox, and equal heights checkbox.
5) The same repeat width your second textfield. You don't have to make spacing constraint in the second step.
FINISH Now all four items are aligned.
If you want to change height of labels for example, just select the height constraint of it and your other labels will follow this change as well.
So final experience is here in this animation:
Need to fix width of every label, every textfield's X- coordinate distance should me same according to bottom textfield's make sure every label's width should be same then add constraints to textField.
I have 2 labels attached at top with "zero" constraint. One label have font 12, other 15. I face the problem, that i have unnecessary space between text and cell border. Please take a look:
You can see that left space to top is less then second. How to fix that?
You may want to check if the second label has option "relative to margins" checked, just uncheck it.
If you just want the labels to be on the same y position, just delete the second label's top constraint and add a baseline constraint between two labels.
Evgeniy Kleban,
As per your question you have two labels and for both the labels you have attached the constraint as 0 :)
My suggestion assign top constraint as 0 to only one :) Lets assume you are okay with the placement of label y :) Then delete the top layout constraint on label A16 and instaed hold control and drag from label y to label A16 and when you leave a popup appears select center vertically :)
This will ensure both the labels base lines will be aligned properly :) Hence your problem is solved :)
I have a question about Autolayout - normally i dont have any problems using autolayout, if a cell label has a dynamic length - but it this case ill got 2 labels, 1 top label with a dynamic length, and a second one under the first label.
Ill tried to set to the top label a leading, trailing, a fixed width (its an ipad landscape app, so i want to have and exact with) - and to the second one a bottom, trailing, and set the leading to the first label. Like here:
But i am unable to bring that to work that:
Both labels should have an dynamic length - so update the cell height automatically. Width of both Labels is 700px, width an margin top, right and bottom is 8.
Ill forgot to say, but the left label should have a dynamic height too.
Any ideas? Thanks in advance!
Errors after using "Lukas" Tipp:
By default, both labels will have a same hugging and resistance priority, making one of them less than the other would fix the problem. Ps, I'd avoid using magic numbers like 8 in your auto layout, instead use standard value
I stumbled on to a problem to which i am not sure how to fix.
As you can see here the Label where the name is supposed to be,(i get the name from a user input meaning its dynamic). If it is written to long, it just writes over the other labels.
Also in the storyboard the UILabels are not set to be longer than another label. Each label ends right before the other one starts.
FYI i have already used constraints to make them have the position that they should. Any suggestions?
EDIT1
Also the name label to the right(the last cell) there should be more text but it is not visible. As if it is continuing to write over the edge?
EDIT2
Here is an image showing the constraints i have on the label and some other useful info.
EDIT3
Here is an image after i tried to remove the constraints and i even made the label so small but the results are still the same. The text is going all the way to the score label
Your constraint of the label width is set to 221, so its width will be 221 no matter what screen it is on. Thats why on simulator it behaves like this(different screen size than storyboard). Your constraints are wrong, thats why its overlapping, your label is bigger than its suppose to be.
EDIT
Set score label width constraint, set score label center horizontally and vertically in superview. Now right text label attach to this score label and superview, and left text label attach to this score label and time label, also set this time label width contraint so it doesnt change, its a small text and u know the size of it all the time, so you can keep it at width like 30. Now you are done, your text labels are adjusting their size according to screen.
If its still not working, check your superview has set constraint to adjust to screen size, as well as tableview.