After hours of attempting to find a solution, as well as trying and failing myself I decided to ask here.
As shown on the picture below I have 15 Image views in a pyramid shape that I would like to set constraints on.
I have tried to:
Constraint equal width and height on all images
Constraint center image on line 1, 3 and 5 to horizontal center
Align vertical centers to all images on each line
Etc etc
The result is always the image view going out of bounds or similar issues. (Clip to Bounds is true)
Anyone have a solution or suggestions?
try putting them all in stack views then putting all those stack views inside a stack view and putting constraints on that
like this take a look at the view hierarchy on the left
to get the spacing i achieved just adjust the spacing on the right inside the attributes inspector
and its even able to have constraints on the highest stack view
all the errors go away once you add constraints to the top stack view
like shown here
Embed all your imageViews in a UIView.
set the top, bottom, leading and trailing constraint inside that view (top image to the superview, etc.).
align the UIView horizontally and vertically in the container.
You probably also want to set a width to your UIView, but I let you think about the final result you want.
Related
everybody some I'm having some trouble vertically centering the or label between the Sign in with apple button and also the login button. Keep in mind that I am creating the SIWA button programmatically and setting the constraints that way also. I have tried getting the origin y coordinate for both buttons, dividing them by 2 and then setting the vertical constraint from the login button to the or label to be (loginButton.frame.origin.y - (divided by 2 value)) but that doesn't seem to work. Thanks for your help.
There's a couple ways to solve this:
Put the 2 buttons and the label in a vertical UIStackview with distribution set to equal spacing. Stackviews are very flexible too, especially in more complex layouts.
Create an empty UIView that sits between the two buttons, then add the label as a subview and center it. Alternatively, you can create 2 spacer views with equal height constraints above and below the label:
V:|[Button][space][Label][spacer2(==spacer1)][Button2]|
Very easy approach: by default, UILabel centers its text vertically in its frame.
So,
constrain the Top of the Label to the Bottom of the top button
constrain the Bottom of the Label to the Top of the bottom button
All done :)
Im trying to create a profile screen for an App. The only element that i cant get the width set dynamically is a 3 x 1 button grid in a stackview.
You can see in the second screenshot how it resizes rather than dynamically resize like every other element
This is my approach. I made stack view which trailing and leading constraints are 0 and image height is set to 30 with aspect ratio 1:1 (this can be customized). Each image has its own View where its centered and then stack view aligment is set to center and distribution to fill equally. This can be used for buttons too.
IMPORTANT: This is not a main view but a view I added on the main one and it has its size.
I'm trying to constraint this view in order to make it resizable on every iOS device. I want it to look exactly how you see it.
I followed multiple guides online but even if I do exactly what I see it doesn't seem to work for me.
Here's what I tried:
I set the cancel's button width, then I constrained it to the view (trailing, bottom, leading) and vertically in container. I did the same for the one above it but the bottom constraint was attached to the button.
As regards the view with a lot of square buttons I:
Constrained the view to the button below it (bottom), set its width, placed it vertically in container, top space to safe area (I have a navigation bar above my view) and trailing and leading space to view.
As regards the buttons inside my view I set equal widths and hights for each of them and then I constrained them all top leading trailing and bottom (they all have a space of 7 between them or their view).
None of this works since the blue sky view either becomes bigger and wider, either goes outside of the screen, either everything gets very weird... How could I do?
I think this question is a bit tricky to answer. But I'll try my best :D
So, the first thing I would do is to put the pink squares inside a stackView and let autolayout help us a little. Then I would constrain the blueSkyView.top .leading and .trailing. After constrain the stackView .top, .leading, .trailing, .bottom to the blueSkyView, so that blue sky view could enlarge to fit the stack inside.
Then constrain the buttons to the bottom, just like you made. Consider using some constraints of Greater than from blue sky to Random Color button, for example, guaranteeing they will never overlap.
If you want to make this view a square for very time while using different devices, you need to give a height constraint for the view and also a leading and trailing.
Then make an outlet for the height constraint. In the viewDidAppear method you should wright the below code:
heightConstraint.constant = myView.frame.size.width
I'm trying to recreate the following page:
My idea was to divide the screen to three parts and have a stack for each one.
When i create the upper Stack (everything that's in the red backgorund in the image) i cannot center my content inside of it.
How could i center my content inside of the stack view ?
Here is what i have done :
Make sure the axis is vertical, alignment is center, and distribution is equal spacing.
And you should remove the height constraint of the stackview.
I have a ViewController that contains a Stack View. In this Stack View there are 3 more Stack Views. The first contains 3 labels, the second contains more Stack Views with buttons and labels, and the third contains 2 buttons and a label. And at the bottom, there is a button. The layout is fine on screen sizes from 4,7" and bigger. But when the screen size is smaller, it cuts out the top Stack View. I have tried to set constraints on leading, trailing, top and bottom in different variations (with and without top and bottom constraints) But I can't make it work properly. I have attached screenshots of the different screen types.
EDIT* Depending on the selection from the previous ViewController, the middle Stack View(the one with the check boxes) can be isHidden When its hidden, the view is correct.
Generally you don't set height on UIStackView. They are dependent on it's content. This will cause your stackview to get out of the screen height. Have you used the view hierarchy? If you want to cover the small sized phones you could put your main stackView inside a scrollView to still be able to see all content.
It's a bit difficult to diagnose what's happening without seeing the constraints you apply to the views, however I'll recommend you some things that may help:
Set the space between views using size classes so you can set the right one depending on the screen size and avoid the overlap with the below views.
In case you are doing it, don't set a height constraint for any stackView.
To align the top StackView I would use not only a top constraint to the top bar (of type greater than or equal) but also a vertical center constraint with a right multiplier (with a high priority). In this way you ensure the top stack view is aligned vertically in proportion to the screen size and with the top constraint you ensure the stackView doesn't hide below the top bar.
Make sure you are hiding the right stackView.