Changing Stack View dimensions to be a ratio - swift

I am wondering how I can change the dimensions of a stack view to be a ratio, specifically 7:6. So far, I have constrained the Stack View with "Align Center X to: Superview" and "Height Equals: 400" and "Align Top to: Safe Area Equals: 100." How can I maintain a constant ratio between the width and the height across all devices? Thanks!
For User Interface, I am using Storyboard, not SwiftUI.
What I have right Now
I am not exactly sure why this doesn't work, but it is probably my understanding of aspect ratio. My main issue is how to use the (phone width - 20 points) to determine the height so that it is a ratio.
Expected result, but I don't want to manually set the height and width, rather a ratio


I don't want to manually set the height and width
Then you should remove the "Height Equals: 400" constraint that you currently have! After that the layout should be fixed. It should look like:
Just for completeness' sake, all the stack views should have distribution=fill equally, and alignment=fill.
The height=400 constraint is causing the constraints to conflict. If height = 400, then width would be about 467 to get an aspect ratio of 7:6, but the width of the super view isn't enough for that. But you also require the leading and trailing of the stack view to be pinned on the leading and trailing of its super view! These constraints can't be simultaneously satisfied.
Note that this layout doesn't look quite nice when in landscape, since the width would be very large and the available height is small. You might want to add variations to install/uninstall constraints based on size classes. In landscape mode, you could pin top and bottom rather than leading and trailing, for example.

Related

Aspect ratio constraint is not working for UIStackview with nested UIstackviews

I have a view controller with six buttons.
I want to show them in 3 rows and 2 columns.
I decided to put each column of buttons (3 buttons) in a stack view and put 2 vertical stack views in 1 horizontal stack view.
I want my buttons to look square shaped.
I applied following constraints for the horizontal (main) stack view:
Align Center X to Safe Area
Align Center Y to Safe Area
Align leading to Safe Area Equals:50
Aspect Width:Aspect Height = 2:3
For some reason aspect ratio is not working and the width is still
larger than the height and more importantly the buttons are not square shaped.
I tried to update frames, to apply all possible alignment and distribution properties, however, it didn't solve the problem. Please check images below for your reference.
View Controller
Constraints
Thanks in advance!

Is it possible to use AutoLayout to make an aspect ratio of 1:1 based on the largest of either Screen Height or Screen width, at runtime?

I'm getting very confused with traits and constraints.
I have a view that needs to be in a 1:1 ratio, and it needs to have it's size dependent on the larger of either the screen width or screen height, at runtime, and with all device orientations.
On top of that, I need to move it down from the centre of the screen, by an amount that is calculated at runtime depending on orientation and iPhone vs iPad.
Is this possible or is it better to do all this in code and remove all AutoLayout constraints from this view?
I've read this: Aspect ratio constraint relative to the screen width
And also this: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/Size-ClassSpecificLayout.html
But I still can't seem to get it to do what I want.
Can someone please clarify what I need to do?
Thanks

You need to add at least these 2 constraints to your UIView in storyboard.
1st will be for the aspect ration and the 2nd will be for the width of the UIView with a constant of a value.
You will drug an outlet of the 2nd contraint to your UIViewController class named widthConstraint
On the delegate function ViewWillAppear() you will add this code that computes the max side and it adds that value to the contraint constant.
UIView.animate(withDuration: 0.0) {
let largestOfScreenSide = max(UIScreen.main.bounds.width, UIScreen.main.bounds.height)
self.widthConstraint.constant = largestOfScreenSide
self.view.layoutIfNeeded()
}

Which view to expand when adding constraint between two views

I'm taking the cs193p online course to learn ios development. Yet I'm confronted with a problem when I tried to add spacing constraint between two stack views. (The one with blue buttons(view1) and the one with labels(view2) )
I want the view1 to expand while keeping view2 unmodified. But it turned out that view2 always expand, even if I set the content hugging priority of view 2 higher than that of view1. How could I solve this problem?

Unless you've given your labels an explicit width, their width will be set by their intrinsic content size. The hugging priority for the labels is low, so the labels are free to grow to fill their container. So, the containing stack view will always be hugging its content since the labels can grow. You need to restrict the growth of the labels' widths in order for the hugging priority of the stack view to have any effect.
The solution is to either give your labels an explicit width constraint, or even easier to set their hugging priorities to be high as well. This will keep the labels from growing and will allow the stack view to hug the label's minimum size. Finally, Auto Layout will choose to expand view1 instead.

Stack view constraints changes top-layer's view width

I have a stack view holding 2 images.
One image's width to be lower or equal to 140 and 1:1 ratio
Stack view top constraint 20 and trailing constraint 5
When I want to set the stack view leading constraint to 5 (looking at the safe area leading) it enlarges the safe area to a width of 1920 and I have no idea why it does that.
It might have something to do with that the total width of the stack view (including the constraints) is smaller than the width of the safe area so it's ignoring the images width constraint and enlarging it to the default size (1920)? Because, when I change the stack view's distribution to fill proportionally instead of fill equally it does obey to the image's width constraint and the safe view's width stays normal.
If I am thinking correctly, how can I find a workaround for this?
Thanks in advance.
EDIT: I was trying to think logically and I found a solution by changing the image's width to GREATER or equal to instead of SMALLER or equal to. I was following a devslopes guide and in that Xcode version (Beta XCode9) it did work, it just gave a warning it wasn't obeying that constraint anymore (I think it was saying that, I just saw the width being red). So it works now, if anyone has this problem following their guide, just do what I said and it will work.

Position and size are ambiguous for "Image view"

I am trying to set a UIImageView has no fixed size and width in the storyboard. I set the leading space to container to greater than or equal to 20, top space to the container to greater than or equal to 20 and trailing space to container to greater than or equal to 20 and vertical spacing to a UICollectionView, the UICollectionView satisfy the constraints. But the UIImageView don't work, it's telling me it's Position and size are ambiguous. How can I make it work? My Idea is no matter how large the image view, it will always keep 20 space to leading, top, trailing and bottom.
I have set the height and width to be greater than or equal to some value and their priority to 999, it's lower than the leading, top and trailing priority. and I have set the imageview to center horizontally. but i get height and vertical position are ambiguous for “Image view”.

Can you see what happens when you add height and width constraints to the UIImageView, but set their priorities to some low value, e.g. 1? It should help, but now UIImageView won't be centered. You can fix it by enclosing UIImageView in another view (empty UIView) and centering it in it both horizontally and vertically.

When you get this error:
Position and size are ambiguous for “view”
Probably following constraints are missing/incorrectly set:
Width constraint (size issue)
Height constraint (size issue)
Alignment constraints (position issue)

If you are using Stack Views, make sure the Photo Image View is inside the Stack View! (As in the Apple Tutorial)

If you want to give margin kind of thing into button through coding than please try these if it'll work
[button_Name setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 12.0, 0.0, 0.0)];
I hope this will work..!!!

In cases where the height/width are not ambiguous at runtime, but ambiguous at storyboard time, e.g., setting an image dynamically, having a container view, etc, I try to add constraints with the placeholder checkmark checked to silence xcode.