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 setting width for my button so that it's greater than text size - as on image below:
The width of it is 120px. My problem is that I have center vertical alignment for it so when I hit "update frames" then my button gets resized to it's minimum so that text fits the button as below:
I can't leave it that way because I've added frame programatically and it looks bad when it's so close to the text.
Is there any way to set some properties for xcode to stick to my width as oppose to auto-align it? I'd prefer to have it in xcode properties than in swift code.
You are not adding a constraint to the width. You need to add a constraint to it, not change de width at the Size Inspector.
Select the element, click at the Pin option at the bottom bar, and set the width of your element. Update Frames and voilà.
Remember: when working with Auto Layout you cannot use any manual configuration (size, position, etc.) for that element, always use constraints or stack views.
Apple documentation about Auto Layout
I have a list with titles coming from data source. The length of the title is unknown and could be one line, two lines and even more... under the title I want to place the name of the author of the post.
I placed the two labels (the title label and the author label inside a View with layout: 'vertical' which places the author label under the title label. But still had to somehow limit the number of rows displayed by the title - I want to have maximum 2 rows. So I've set the height of the subject label.
While setting the height of the label does limit the number of rows displayed, it causes another problem - on rows where the title is 2 lines or more everything looks great. but on rows where the title is only one row, there's now space between that row and the author name - and I want to have the author name right under the label (important thing to notice - the author label has a different font size and color than the title).
If it was just plain old html I would just set max-height css property - but Titanium doesn't have that kind of property on Views/Labels. Is there a way to have maximum height on a View?
There is no such property max-height being supported by Appcelerator for views. But what you can do is, you can listen for the postlayout event for the view and once triggered you can get the rect, to get the height of the view. Now in here you can do your magic. If the height of the view is greater than some value you want, then you can fix it, else let is remain as is.
Do let us know if it works for you. If not, we can try to come up with some other solution.
On Android you can use maxLines on a Label.
For Views and iOS you could do the following. Set the view's height:Ti.UI.SIZE and use bottom to set the minimum space between the views bottom and that of its parent. This only works if the parent has a fixed size.
Listening to post layout on a ListView won't work since you would have to set this on the ListView but don't have a way to access the rect or size property of the ListItem views.
I've just added the numberOfLines in the iOS SDK: https://jira.appcelerator.org/browse/TIMOB-24071
It's called maxLines for Android parity. It really works for Labels inside ListView templates.
I am looking into taking the plunge and use Auto Layout on an existing app. The interface has a button on the main window. The button changes its title depending on the state of the app. I plan to localize the app.
Since Auto Layout does not know (in the NIB) the length of the various titles that the button will adopt, how can I guarantee that the button will, for each localization, be sized in such a way that it will fit the longest-length title in each localization?
What is the right way to accomplish this? Many thanks.
You don't need to change much. You just add the alignment constraints whatever you added. Now give it width and height constraints and make them greater than equals to the minimum value you wanted. See this.
I have added center horizontal and vertical for alignment. This you can change to any. Now the width is here greater than equals to 42.0 and the height is greater than equals to 21.0 . Now if you just change the text of the button then it will increase its height and width according to that. You just need to call this line just after changing the text.
[self.view layoutIfNeeded];
Now you may have question that you want to limit the width and then increase height. Here is the solution. You give it width less than equals to max width and it will not increase the width more than that. See here.
Here my max width is 200.0. But make sure that if you are adding those layout constraints in iOS and it is a UILabel then than Lines is 0 and if it is a UIButton then the Line Break is Word Wrap or Character Wrap, but in OS X increasing height of NSButton depends on your button type.
If you have given constraints to your button, just remove it's fixed width constraint, button will automatically fit as per text's width.
I am trying to build a screen similar to twitter/instagram profile page where there is a header section and below that scrollable content.
I have a view controller which has a table view. I wanted to include a header view on top of the table cells. So i dragged and dropped a "View" just above my cell and it works fine. Now i have a label inside this header view and i want the label height and UI view height to adjust automaticlly based on the content length of the label. (If the content is a long string, the number of lines of label should automatically increase and the container view(headerview)'s height should increased based on it's content items property.
I tried to set auto layout on the table(top left right and bottom to the container view(headerview). But then the label is shown in single line, truncated at the very right corner. If i remove the bottom constraint from my constraints, the label appear in multiple lines, but the container view(headerview)'s height is not increased, thus producing an overlap of the label on top of the table below that.
I have the number of lines property set to 0 for the label.
Can anyone share some ideas how to do this ? I am using Xcode 7 and swift 2
There are several approaches for what you want to accomplish. If you do not care if the header scrolls with the cells, the easiest way is to do something like this:
----------------
Header
Label
TableView
----------------
You should pin your header Top,Right,Left.
You should pin your tableView Right,Bottom,Left.
You should pin Header.bottom = TableView.top.
You should pin your Label 4 sides to it's superview(Header).
Set Label numberOfLines = 0
If your header has a fixed width, the label will automatically inherit that width, and setting numberOfLines=0 (a.k.a unlimited number of lines) will make your label increase it's height. Because your label is pinned to it's superView by it's 4 sides (and the header has no fixed height), your header must increase it's height to match the label height.
Hope it helps!!