Trying to set table view width between 290 and 460 points.
It's pretty enough to fir content for the small screens and looks good for the big ones, like iPad Pro.
Also I want to have leading and trailing space >= 20.
Today's the second day I've tried to fix "inequality constraint ambiguity"...
Thanks for the helping!
I'm new in iOS dev so please do not kick me too much :)
If I understand your goal correctly, you want your table view to be:
20-pts Leading and Trailing
unless that makes the table view wider than 460-pts
in which case the table view should be centered horizontally
So, to recap my comment... your constraints say to:
Center the table view horizontally
make Leading and Trailing >= 20-pts
make Width between 290 and 460
The problem is that you haven't told auto-layout where between 290 and 460 you want the width to end up.
So, you need a couple more constraints.
Start simple... tableView constrained 20-pts Top / Leading / Trailing and Zero-pts Bottom (all to Safe Area, of course):
Next, add a second set of 20-pt Leading and Trailing constraints:
Now set one pair to >=, and give the other pair a Priority less-than required:
The Default High 750 priority on the = pair of Leading/Trailing constraints tells auto-layout to "try to pull the sides to 20-pts from the edges, but allow that to break if a conflicting constraint has a higher priority", and the Required 1000 priority on the >= pair gives us a minimum of 20-pts on each side.
If we switch to Landscape orientation (iPhone 11), everything looks the same... 20-pts Top / Leading / Trailing and Zero-pts Bottom:
But... your goal is a max-width of 460, so let's add a Width constraint of <= 460:
We see Red issues with the constraints, because we still haven't given auto-layout quite enough information - so, we'll add a Horizontal Center constraint:
and here's how it looks on a 9.7" iPad:
We don't need -- and don't want -- the >= 290 Width constraint. The = 20 constraints will handle that. And, while unlikely these days, if your app ends up on an iPhone 4s or 1st-gen SE, the view width is only 320... and 290 + 20 + 20 == 330 and you'd have constraint conflicts.
Related
I have a constraint error,
What I want to do is "center the view, have 20 margin on the view, and have a maximum width of 320"
So that on iPad the view is not stretched, but on smaller devices the view can be less than 320 width, and have 20 pts of margin.
However using these rules gives me an error, probably because I say that margins can be >= 20, and width <= 320, and view has no idea how to match that.
I tried using priority but I'm not sure how it works, and I couldn't get anything.
How can I achieve the desired effect using only one view and its constraints?
As you have deduced, autolayout needs to know which constraint it should break in the event of a conflict, and this is done by priorities. However, you have another conflict since the leading/trailing and width constraints are all relative. This means that autolayout cannot determine the view's width.
Change the leading/trailing constraints to = 20 and set their priority to 999 so they can be broken on a wider device. This will allow the width to be determined and eliminate your conflicts.
Like this:
Note that (1) we don't need a trailing margin constraint, as we are already horizontally centered, and (2) the width of 320 has a lowered priority, thus giving the inequality leading margin constraint something to aim at when in doubt but otherwise not interfering.
This is what it looks like on iPhone 4s in Portrait: we are restrained by the side margins:
This is what it looks like on an iPhone 4s in Landscape (and of course on anything wider than that): we expand our width, but only up to 320:
I don't understand how having together left and right orizontal constraints together.. I still don't understand the exact mechanism beyond interface builder, its constraints and the effective results on the simulator:
I expected the label "ingredienti" in the center of my view (like my input text above with same type of constraints).. Why does it go outside my "screen" in simulation preview?
A leading or trailing constraint (which is what you've set up) sets a fixed distance between the left edge of the view and whatever you've associated it with.
The default simulated size for view controllers in the new universal storyboards and xib files in Xcode is 600x600. But none of the current devices actually have this size.
So, if your label has, let's just say, 100 width, then in order to "center" it using left & right constraints using the simulated interface builder width of 600, we'd create a left constraint of 250 and a right constraint of 250 (250 + 100 + 250 = 600).
But again, none of the actual devices have this width. So if we run your app on an iPhone 6, it'll have a width that translates to 375 "points". If we run it on an iPhone 4s or iPhone 5/5s, it has a width that translates to 320 points.
So, our 100 point wide label is constraint with a constant distance of 250 points from the left edge of the parent view. 250 + 100 = 350. But the iPhone 5 only has a width of 320 points, so part of label appears off the edge of the screen, and the right constraint is broken because the left and right constraints cannot be simultaneously satisfied (you probably have a bunch of warning messages about this in your log when you run the app).
If we want the label centered, we must create a horizontal center constraint (as mikle94's answer demonstrates).
You have to remove left and right constraints from your label and then add "center-horizontally to superview" constraint.
I am testing my app on an iPhone 4 and iOS Simulator (4S). The label positioning is fine on the simulator but displays incorrectly on the device.
I am using the following constraints on the label:
What could be causing this to happen?
You have a case of conflicting constraints. Let's step through the rules you applied to your label:
Align Center X to Superview
This is just aligning the center X of your superview with the center X of your label. No trouble here.
Bottom space to: SIGN UP <= 50
This constraint applies the rule "make the bottom of my label at MOST 50 points away from SIGNUP."
The issue is with your last constraint:
Top Space to: Top Layout Guide >= 5
This constraint adds the rule that the top space of your label must be AT LEAST 5 points away from the Top Layout Guide.
Auto Layout recognizes it can't possibly satisfy both the Bottom Space and Top Space constraints at the same time, so it destroys your bottom constraint, resulting in the bad behavior.
Your top constraint is still valid, because in that case the space between the top layout guide is greater than 5.
Try making your Top Layout Constraint a <=, or lowering the content compression resistance priority of your label.
The answer is in your constraint itself.
It shows that the topspace can be greater than or equal to 5. And bottom space can be less than or equal to 50. So that's why it shows such a behavior.
In my suggestion edit that constraints like:
Top Space equal to 5
Bottom Space less than or equal to 50
In my iOS application, I have enabled Use Auto Layout option and I'm using storyboards to design my UI. There in one of my View I'm having UIDatePicker with following constraints.
Trailing space to: Superview
Leading space to: Superview
Bottom space to: MyUILabel Equal <= 20
Top space to: MyImageView = 20
The highlighted constraint gives me following warning
Inequality Constraint Ambiguity
When I see the issue using Issue Navigator, it tells me
Ambiguous Layout MyUILabel is vertically ambiguous.
That MyUILabel is having following constraints
Trailing space to: Superview
Leading space to: Superview
Top space to: UIDatePicker <= 20
Bottom space to: AnotherUILabel = 20
Why I need this kind of constraint is when I load the application in 3.5 inch screens some of my bottom UI elements overlapped. By adding that highlighted constraints solve that issue and give me two separate issues.
The first one is the above mention Inequality Constraint Ambiguity and the second one is, even in 4 inch screen size this constraint is getting apply. I mean for 4 inch screen sizes and above I can have Bottom space to: MyUILabel Equal = 20 and it appears fine without any overlapping.
How can I solve this?
Simply I need having <= 20 constraint for 3.5 inch screens and = 20 constraint for 4 inch and above screen sizes.
Thanks in advance.
Its hard to tell without seeing your whole view. Base on your description, I would check your topmost view to make sure its vertically pinned to it's superview. For your case I think that is the "MyImageView"; try setting it's "Top Space to Superview/Top Layout Guide" equal to 10/15/etc whatever you want.
I want to have the bottom view be at least 20 away from both the image and the label above it. The label is multiline, so it can be taller or shorter than the image view, depending on how much text there is. When I add two "distance to nearest neighbour >= 20" constraints like shown in the screenshot, Xcode tells me constraints are ambiguous.
How do I fix it?
I think you can do it like this, if I understand your requirements:
The image view has a fixed width and height, and constraints to the left side and top, as well as a constraint to the bottom view of =20 with a priority of 700. That's crucial -- that will set the y position of that bottom view (which has fixed height and constraints to the two sides), but will allow it to move lower if another constraint with higher priority makes it. That constraint with higher priority is the constraint to the label -- it's >=20 with priority of 1000 (the label also has constraints to the top, right side, and trailing edge of the image view).