I downloaded the new Xcode and in Interface Builder I'm having a ton of problems with warnings that say things like:
Fixed Width Constraints May Cause Clipping
It looks like this:
I do have localization for several languages and I understand the warning that in another language a label's size may change, but my app doesn't have this problem. I ran and tested it in Xcode 8 yesterday, it was fine. I don't want to spend hours and hours adding pointless new constraints.
Any suggested solutions?
I was getting the same warnings even without multiple languages in my app, which led me to find out what was really going on. . .
There are a few different things going on here. I was able to silence the fixed-width warnings in my own app by changing the width of the object spacings from fixed width to greater than or equal or less than or equal.
This can be done by selecting the object in interface builder, going to the size inspector and changing it there:
Or, select the constraint from the document outline, go to size inspector, and change it there:
As far as the warning at the top of your screenshot:
Fixed leading and trailing constraints with a center constraint may
cause clipping
Here is a screenshot from my own app in which I was getting the exact same warning:
I had the label with the # sign set to leading and trailing to the buttons but also to align the center with the rating label. Once I removed the center alignment constraint, the warning disappeared, but I was left with an improperly laid out set of objects.
It is then that I resigned myself to embrace the Stack View. As annoying as it is to use, when you get all of the constraints and settings right, it lays out beautifully and with no warnings.
Edit
As Repose writes in the comments, sometimes simply adding >= 0 will be what you need, as you are making sure two elements do not overlap.
You can try Disabling "Respect Language Direction" on per Constraint basis to silence the warning and see if it helps. Select your constraint and open Attributes/Size Inspector. Please see image attached.
If you are not planning on localizing your app to other languages, then this solution should not have any drawbacks. For localized apps you have to be more conscious of your label and font sizes.
p.s. This solution works for iOS. For macOS try >= or <= to silence the warning.
p.p.s. Labels in the picture below are much easier to create using AutoLayout and attributedString property on a single UILabel or UITextView using NSMutableAttributedString. The image is for demonstration purposes only.
For labels and buttons which are localized this warning makes sense and you should provide the necessary constraints so your labels don't overlap. If they don't overlap now they might in the future, so it won't hurt to provide the constraints.
Xcode helps you add these constraints automatically:
In the document outline of your storyboard click on the yellow arrow and either choose "fixed leading" or "fixed trailing", depending on where the text is on your screen (left or right). This will fix it for most issues.
If you have this issue with a Button without any text (only image), try to remove the "default title" which might still be set for the button:
With Labels, you can set Lines is 0 and Autoshrink properties is Minimum Font Size to remove Fixed Width Constraints May Cause Clipping warnings, like this:
Another quick solution !
For a UIButton by changing the title from plain to Attributed text also resolved my issue:-
I know this question has already been answered but what I did to fix this error in my case was to add the "Aspect ratio" property and then eliminate the width or height constraint this worked pretty well and was less effort, and I managed to keep the same output and adapt my view for the different devices.
Swift 4 , Xcode 9.1 :
About this issue, I think your object don't know what it's the correct center position in the context of it's superview, and using remove, greater than or other leading/trealing settings most of times don't work correctly. First, you must check the correct constraints of your superview.
If your superview/s are correctly setted, you can try to "explain" to your object what is the correct position in the view by setting the "horizontally in Container" constraint:
If you need fixed width constraint for button just set width constraint priority to 700.
I had the same problem, but when I changing to >= it automatically set the constant to 0, if I choose 60 for instance, the warning appears again. So I was in a loop with the problem.
I could fix embedding my Label in a View
Editor > Embed In > View
In Label I set Top, Bottom, Leading and Trailing with constant = 0
In View I set the constraints that I was expecting before.
I had the same problem when moving to Xcode 9 and found an approach that's useful for certain kinds of layouts. In my case, I wanted a table header in which two columns (UILabels) were of fixed width and another was of variable width. Regardless of how I specified column widths (including using constraints greater than or equal instead of equal, etc.), I kept getting the warning about possible clipping. In my case, I wanted the variable width column (UILabel) to clip if necessary. I could have just ignored the warning, but don't like doing that.
The approach that worked here was to create a UIView with appropriate size constraints and embed the UILabel as a subview in the UIView. Then truncation happens if necessary and I get no warning. This works whether the UIView/embedded UILabel is in a StackView or not.
This is essentially the same approach as that of Haroldo Gondim but here you can see it also works with or without StackView.
The following image shows the approach, with and without StackView. "SpacerName" is a variable width UIView containing a label and "SpacerPD" is one with a fixed width of 80. [Colors are not significant; just there to show where the views are.]
As you can see in the image below, I was having the error "Fixed Width Constraints May Cause Clipping" because although I had set my textbox to be vertically centered and my label to have a left margin constraint, I hadn't defined a constraint for the text box in relation to the label, so XCode was alerting me that the textbox could clip (be rendered above) the label.
After adding the left constraint to the text box to always stay some distance apart from the label the error was considered solved by XCode and it didn't bothered me with the constraint warning anymore.
I had a similar issue when trying have the button with the same paddings from the edges of the super view.
I've ended up using horizontal center constraint and equal widths constraint to the super view.
To Fix The Error: Fixed Width Constraints May Cause Clipping” and Other Localization
You need to select the view/object, go to the "Show Size Inspector", find the Width Constraint and set the Constant to Greater or Equal to:
To Fix The Error: Leading/Trailing constraint is missing which may cause overlapping with other views
This means that the view/object Xcode is complaining about, is missing a Leading or Trailing Constraint to a neighboring view.
While holding control, drag to a near by view/object
Add a Leading or Trailing Constraint
I'm not sure if I understand UIStackView correctly. I have a UIStackView in a UITableViewCell. It contains 3 UILabel and is set to align and distribute Fill.
When my first labels text is not very long, it looks all good. The second and third label take up as much space as they need and they are aligned to the right. The first label takes up the rest of the space.
However, when the first label contains a lot of text, it pushes the other two labels out of the visible area. What do I have to do to make sure the second and third label are always visible and take as much space as they need to display their content. The first label should always take up the rest of the available space and then truncate its text with "..."
This is my configuration in the Storyboard:
And this is how the result looks like in the TableView:
I tried the others solutions mentioned here and found them to be to difficult or unpractical. I didn't want to setup and change layout constraints programmatically so I continued playing around with the values. In the end, I found a very simple solution which does exactly what I wanted.
All I had to do was, setting the "Content Compression Resistance Priority" to be lower on my first label. Second and third label have 750 and also they have 251 and 252 for the "Content Hugging Priority" whereas the first label has a value of 749 and 250. This gives me exactly the results I wanted.
Thank you guys anyways. Sometimes I feel like I find solutions to my problems a lot faster after asking it here. I hope my answer will help somebody else in the future.
This:
Gives me this as a result (notice that I set "isHidden" to true for second and third label on the third row):
you may consider placing those 3 views directly to the contentView instead of using UIStackView, and set the first label trailing to the second's
I got a weird issue and I suspect it's a bug in UILabel, but I need to be sure first it's not my bug.
The hierarchy and the problem(s): The title label gets small and on multiple lines and the year label is too large, even though there is enough space. The next images will show that.
What's important: Title label is multi-line, the rest are out of the box components. Their content hugging and compression resistances are the same, defaults.
There are two situations when this doesn't happen.
1. If I remove the year label
2. If I embed the title label in a stack view of any kind
So just by doing one of these two changes, the title label resizes properly, which is why I suspect it's an UIKit bug.
I tried everything I could think of, including changing content hugging and compression resistances, stack view alignments and distributions, view modes.
Setting the prefferedMaxLayoutWidth for the title label doesn't work because the text is dynamic.
There is indeed a bug, for which there are at least two workarounds:
Embed the multi-line label into another UIStackView, as Steven Van Impe proposed.
Change its compression resistance to 999 or 1000.
In the end, I was better off not using stack views due to their limitations. Maybe they'll get better with future updates.
This is my first IOS app, just for training, and I got some issue with Label ,check the image
As you can See Object: Photo- Visualizing the Thomas Walther is not properly shown and some words are missing.
So How to fix it and make the string appears on multiLines if it's too long?
In your storyboard, select the UILabel and open the Attributes Inspector (in the utilities, which can be opened with the shortcut opt-command-4). You can change all the the basic properties of the UILabel here.
For multiple lines, ensure that the label height is large enough and set the Lines to 0. You can also change the font scaling in the Autoshrink property (default is fixed font size).
I can't really tell from your screenshot, but you may have some Auto Layout issues with the width of your label to the right side of the window. So you may want to look into setting Auto Layout constraints as well.
I have a view which has a lot of labels. Some of them get the text set dynamically. Sometimes the text is to long to display it within one line. I know how i can display the text in multiple lines. My problem is that when i do display the text in multiple lines then the margins are broken between the labels. Sometimes a label even swapes into the content of the next label.
I want to avoid fixing this "by hand" (repositioning of all other elements). Maybe Autolayout can fix this, but sadly i'm not able to use it for now. But it would be a good argument to convert my project from springs&struts into autolayout. However, maybe there is another way to fix this issue. Would be nice if somebody can help me out. Thanks in advance!
You can use sizeWithFont:constrainedToSize:lineBreakMode: to calculate the height which will be required by each of the labels. You should use this in a loop which iterates over each label in the order they should appear on screen. As you go, increment the y position by the height of the current label and the margin. Each label will now have the correct position and at the end of the loopy will hold the full required height.