I have a Vertical UIStackView with 7 elements inside. These elements are not collectively tall enough to fill the entire view, so they get spaced based on the distribution value. I would like the arranged views to stack at the top of the view, with no space at the top and empty space at the bottom. I would also like to be able to control the spacing below each view as well, if possible.
I have tried every available distribution option, none of them accomplish what I'm trying to do. Help is appreciated!
Update: Adding an image of my desired result to make it easier to understand
The views have variable heights (no problem, I have this working)
The views should appear in the order I add them (also working)
The functionality I want is this: The first view is anchored to the top of the stack view, the second view is anchored to the bottom of the first view, etc.
Have you tried using a stack view that embeds another stack view and an empty view. This could give you the results that you require. Create your view hierarchy this way.
Stackview
Stackview
FirstView
SecondView
ThirdView
....
SeventhView
PaddingView
By embedding your 7 views inside a stack view and then use a padding view and then embed the first stack view and the padding view inside another stack view you could achieve all the things that you want.
Related
I have in my main view two elements. A Stack View on the top of the frame, and a View at the bottom. Inside the top Stack View I have some labels. One of these two labels I want to have with a fixed distance to the parent container (The Stack View), while the other one I want to the edge. As it is shown here:
I believe the constrains are visible correctly in this image.
Now, the constrain adding 50 units to the lead/trail of the label Foo do not work. The error shown is the following:
For some reason, there is another extra constrain I have not added (The second one in the image) and that one, I cannot delete, but only the one I added (The 50 units). If I apply this suggested change, it looks stretched to the lead/trail, as I want to avoid.
What am I doing wrong? Why this is behaving in such an unpredictable way? What is blocking my label to have a fixed lead/trail to its parent container, the Stack View?
One of these two labels I want to have with a fixed distance to the parent container (The Stack View), while the other one I want to the edge
Okay. So that would not be a stack view! Just put these labels into an ordinary view and configure the constraints.
The reason is that it is the job of a stack view to make constraints. It manufactures a bunch of constraints on the arranged subviews. Therefore you must not apply constraints to those arranged subviews; they will, as you have seen, conflict with what the stack view is doing.
What a stack view does is fixed, and limited. If you don't like what it does, don't use it. Remember, a stack view is not doing anything that you couldn't do yourself by writing the constraints yourself. So just do that.
I've been having some problems centering text vertically beside an icon in a horizontal stack view. Here are some facts:
1) I create a view to hold stack view - add constraints
2) I place a horizontal stack view inside of that view - add width and height constraint, add vertically center constraint, add height constraint
3) Add an image and a label to the horizontal stack.
4) I make the image a certain width and match the height
5) I leave the label alone
6) I select the stack view and specify to set the Alignment to Center
In a new view controller this works great! Everything is perfectly aligned vertically. BUT in any existing controller I've created, it doesn't work! The text is rendered a few points above the center of the image, AND not at the top.
The only difference I can see is new view controller vs existing view controller, and simple layout compared to my more complex layout.
I have no auto layout errors, and don't really consider recreating all my view controllers to be an option. Anyone have any ideas?
Wow, so I have this partially figured out. Its the custom font we are using for our app!
This was the primary difference. All my normal app views inherit from a base view where I set the font for the entire view. That is why when I tested in new view controllers (not inheriting from base) it would work.
If you are having trouble getting text perfectly vertically centered and you think you have done everything right, check your font.
Happy coding...
I am trying to embed 4 UILabels and a UIView into a stack view. I selected all the labels then click the 'embed in stack' option. This then causes the labels to disappear from the view controller with ridiculous widths and X positions (e.g. one of the labels went from a width of 300 pts to 61,000,000 pts.) All the views I am trying to embed have correct constraints with each other and the rest of the view controller.
I've attached a photo of the views I am trying to embed in a stack (giving them background colours for visibility).
UI elements I want to embed in stack
All the views I am trying to embed have correct constraints with each other
There's your problem (at least in part). Do you understand what a stack view is? It is nothing but a shortcut for making constrains on its embedded views. It is a contraint maker.
For a stack view to work on your labels, therefore, your labels must have no constraints to one another. Rather it is the stack view itself that must be constrained (and the failure to do that sounds like the other half of your problem).
If u have a space when u want to put stackView, first put stackView, add constrains to that stackView and add the subviews on it.
I am unable to get a stack view to fill the view canvas in order for my widgets to be automatically resized to fill the entire screen... i've seen this done on may tutorial/youtube video but for some strange reason it doesn't seem to work for me
How I went about it:
I have a view controller scene where I am trying to display three buttons layed out horizontally with three labels beneath them. I dragged the buttons and labels onto the view canvas from the object library and then added each button and it's label to a verticle stack view. Then I added the three verticle stack views to a horizontal stack view and set the distribution of the horizontal stack view to fill equally. I then control-dragged from the horizontal stack view to view in the view controller scene in storyboard and set the following constraints. (I zero'ed all the constants set automatically by storyboard and then have the following 4 constraints)
trailingMargin = Stack View.trailing
Stack View.leading = leadingMargin
Stack View.top = Top Layout Guide.bottom
Bottom Layout Guide.top = Stack View.bottom
When I run the app I don't see anything displayed on the simulator's iPhone screen and I get a message saying that one or more of the constraints could not be satisfied. Any idea what I am doing wrong?
Check Axis,Alignment and Distribution of the stack views. The outer stack has to have Horizontal,Centre, Equal Centring respectively and the inner stack view's need to be vertical,fill,fill.
Maybe your images are differently sizes, hence making the main stack view show content out of proportions.
I have tried to replicate your scene here.
Link To edited project.
I tried your Project.
Just removed your constraints and apply
Alignment constraints horizontally container and vertical container
at last use update constraints and I got the result on simulator.
It may help to solve your issue.
How to set up autolayout in Interface Builder to arrange views vertically as shown on image:
Top view pinned to top screen edge, Bottom view pinned to bottom screen edge. My view should be centered between top and bottom views (so distance to Top view equals to distance to Bottom view)
The way to do this is to have 2 invisible "spacer" views between you visible views.
You can't make spaces have equal height. But you use the "spacer" views and place them between your views (with 0 gap to the surrounding views).
Then you give these views equal heights and they will push your views around to centre the My View with equal gap to the Bottom View and Top View.
i.e. like this...
V:|[Top View][spacer1][My View][spacer2(==spacer1)][Bottom View]|
EDIT - Another way
I just thought of another way of doing this. You could have an invisible container UIView that is between Top View and Bottom View with no gap.
Then you place My View inside this invisible view and centre it vertically.
One more solution is to add an invisible view between top view and botom view and place my view in center of this view:
(5 years later) I've found the most canonical solution:
UILayoutGuide is specially introduced to solve this kind of tasks (since iOS 9).
Use layout guides to replace the dummy views you may have created to represent inter-view spaces or encapsulation in your user interface - Ref docs
It works pretty fine in code, but unfortunately Interface Builder doesn't support custom layout guides.