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.
Related
I have a table cell, and it has a label (which has the username), and a button (which takes to a location). There are constraints set to be the same on the y axis (center vertically to each other) and 5 px trailing/leading to each other. Works great. What doesnt work great, is if the label text is extremely long. It will push the text off the screen. How do I make the button go down to below the label? Similar to float in css?
^^This is the cell, and as you can see it goes off the screen. I need "San Francisco, CA" to be pushed below the label "#VeryReallyReallyLongUsername". I know you can do dynamic cell resizing using AutomaticDimension...
For that you should manage many thing programmatically. You can take outlet of constraint by ctrl + dragging from constraint to class file.
Then you can manipulate it's constant.
So if you want to let your button goes down when text is large then you can take outlet of top constraint of button and then increase it's constant by some pixels that you want and do same for label take outlet of it's width constraint and increase it's constant by some pixels that you want to increase width.
Second thing if you don't want to manage stuff like mentioned above then you can use multi line label. just set the numberOfLines property of your label to 0.
So if text size will be large then label distributes in two line or three line.
Or you can set Autoshrink property from attribute inspector from IB(story board) to minimum font size and set minimum font size with it. so if text is larger then it reduce font size that it fits exactly to label but not reduce more than that minimum size that we have set.
Hope this will help :)
Not easily. It may be possible to set up constraints which would do this, but I wouldn't know where to start.
I would pick another option such as having the label truncate the long value (it will put ... at the end), or to have the label scale the text smaller, or to have the label grow vertically and wrap the text.
Edit: I found the correct solution and will include it at the bottom of the question
I have a textfield. I constrain the textfield to nearest neighbour, which is in this case the view and when i do this, height for the textfield goes out of my control and matches the size of the text exactly. How can I constrain the text box to nearest neighbour without the text box automatically resizing. Below is an image that shows my constraints and the orange outline of what the textfield wishes to resize to. It also shows that the view will shrink to an expected height of 62 aka the size of the text box.
I would add, that when i checked the constraints in inspector, i found that the text box was not always set to first items. when I made the text box the first item in all constraints the width became editable.
Answer:
1) The secret to adding constraints to a text box it to put content hugging as a low priority eg. 250. Look at the above picture and you can see content hugging vertically is at 750 or high priority while content hugging horizontally is at low priority(=250). Therefore i am able to constrain to nearest neighbor for the width which is at low priority but not for the height which is at high priority.
For more info check this documentation
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html#//apple_ref/doc/uid/TP40010853-CH10-SW2
2) each constraint has a first and second item in the inspector. The second item gets its attributes(eg. size) from the first. double click on the contraints in the size inspector as pictured above to inspect the constraint more closely
The layout engine does not know what size you want the parent view (your view controller in this case), so it takes the intrinsic content size of the textfield.
Do you want the textfield to be exactly as big as it needs to be? Then don't touch it, your textfield will resize to contain the text, using your constraints to place itself.
Do you want your view controller to have a certain size? (e.g. if you want a specific background image to fit) Then you might want to consider adding constraints to your parent view so that it keeps a certain size or aspect ratio.
I will suggest to remove existing constraints, and add vertically and horizontally center constraints.
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 :)
I have a UITextField positioned in a view next to a button. It has a trailing constraint of 8 to the button (which has a trailing constraint of 8 to the superview) and when I type long text in it, it simply scrolls along, which is I want. However, in order to retain the text typed in the field if the view is switched to another one (it's in a tab controller), I save the text in a holder variable and when it switches back to that view, I set the text in the field to the saved text.
The problem is that this causes the field to expand horizontally if the text is long enough, sometimes pushing the button off-screen, even with the trailing 8 constraint. I have tried to save the original frame of the field in a holder variable, and then after setting the text, set the frame to the saved original frame like so:
fieldFrame = messageField.frame
println(messageField.frame.width)
messageField.text = holderMessage
println(messageField.frame.width)
messageField.frame = fieldFrame
However, the field still expands, and it printed out 502.0 twice. My current thought is that the frame hasn't registered the change in width after the setting of the text in time for the println, but I'm not sure if this is correct.
Also, I've read some similar questions that suggested using a width constraint. If I use a less than or equal to width constraint on the field, will it still expand if on a device that's thinner? That is to say, since I'm currently using an any width and any height storyboard, it's wider than, say, an iPhone 6. So if I set a less than or equal to width constraint on the current width of the field, it seems possible that the field can still expand on a smaller device and not break that constraint.
Is there a better way to do such a width constraint? If not, how else can I keep the field from expanding and pushing the button offscreen?
Here's the problem. The text field has a tendency to size itself horizontally to its contents. The button has a tendency to size itself horizontally to its contents. Thus you have an ambiguity: those tendencies have the same priority, so the runtime doesn't know which one to collapse as the text field's text gets too long.
The solution is to adjust those priorities. You must lower the horizontal compression and hugging priorities for the text field - one point lower should be sufficient. Now the button will have a stronger tendency to match its own size to its contents, and the text field will clip its contents.
You can also lower the Content Compression Resistance programmatically (this also works if you are using a UIViewRepresentable in SwiftUi):
uiTextField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
For more info on this topic please refer to:
https://medium.com/#dineshk1389/content-hugging-and-compression-resistance-in-ios-35a0e8f19118
Selecting the Text view, then within Size inspector:
1) Set "Layout Margins" to "Fixed".
2) Under "Content Compression Resistance Priority", set the "Horizontal" to be "Low (250)".
I'm trying to make a Facebook clone for practicing iOS and I can't see why a label I have on my news feed gets unnecessary padding.
It only occurs on some labels, others on my news feed turn out fine. However for a select few there's a block of white pace above and below. At first I thought it was an alignment issue so I changed the labels background to green to show that the constraints hold out.
Anyone know as to why it's placing the padding, only for a select few?
By default UILabel will center its content vertically. Therefore, if label.bounds.size.height is greater than size of the text, the label's instinct is to center the content vertically, which will results in the vertical padding that you see in the attached image. Ensure that the label's height is being set according to the height of the text it contains and the problem should go away.
As dbart pointed out your label's frame is likely higher than the text needed. You can fix this by calling -sizeToFit. You can also check the amount of space the label is actually using for text by using +textRectWithBounds:maximumNumberOfLines:
If your cell is using autolayout to determine the height of the label you should set the preferredmaxlayoutwidth to an appropriate value (for example table width) before laying out the cell.