I have tried the instructions from http://fuckingscrollviewautolayout.com/ to no avail; I have gotten everything to work but the top constraint is not behaving as expected. It says it's 0, but there's clearly a very non-zero line forcing my stackview inside the scrollview to be greatly below the top of the scrollview.
Oh wow, I finally figured it out after extensive research. I think it was because of navigation bar, but it really was extreme complicatedness/obscurity of Apple, no way to spin it otherwise.
First I read on http://commandshift.co.uk/blog/2017/01/09/scrollviews-and-stack-views/ that "The scroll view needs to be pinned to the leading and trailing margins, with a space of zero. It should also be pinned to the top and bottom of the root view (not the layout guides - you’ll need to hold alt down while choosing constraints to get this instead)." Okay, but I couldn't figure out how to hold alt down to get these results.
Finally, I dragged the scroll view all the way to the top of the entire UI preview (PAST the navigation bar). Then, I deleted the "top" constraint of the scrollview. Then, I added another constraint that the top constraint of the scrollview should be zero. Magically, this allowed me to set the top of the scrollview to the "top" rather than the "guide layout top" and this fixed my issue.
Related
I was trying to add a UISTackview in a scrollview. I believe the UIScrollview setup is right as the following screen has scrolled. Please note that it does not have any stackview, I have added a button with big top constraint so that I can see whether the scrollview works or not.
Next, I added the stackview and just added the top, left, right constraint but not bottom constraint like the following image. However, since there is no bottom constraint, the scrollview does not work.
When I added the bottom constraint, it shows the error like the following image because none of the textfields has height constraints.
If I change the distribution to "Fill Equally". The textfields are taking too much blank spaces depending on the screen size.
How can I use the stackview inside the scrollview. I want to use it as I want some of the views hidden based on conditions and claim the space. Any suggestion would be helpful. Thanks
Your second image is correct - but you need one more constraint.
Add a constraint from the Bottom of the Stack View to the Bottom of View (its superview), but set it to >= 0
A couple of tips...
rename your UI elements... it gets very confusing to refer to elements by default generic names (you have more than one View, for example).
give your objects contrasting background colors during development... makes it much, much easier to see the frames.
I am attempting to create a horizontal stack view and have it take up the entire cell width. I have two vertical stack views inside this horizontal stack view. I have pinned the horizontal stack view to the leading and trailing edges of the superview as well as aligned it vertically to the containing view. It seems to look as expected when I see it in the storyboard link to picture here:
but when I run it has this spacing on the right side .
I've tried to see if I could see the width of the content view of the cell by having the background this maroon color. To me, it seems like it is the entire width of the cell so I am not sure what I am doing wrong here.
UPDATE: After adjusting widths to the stack view. I am not quite sure if this is a stackView issue exactly. Setting a fixed width for the stackview fixes my issue for one screen but this does not work for all screens hence the attempt to constrain it to the edges. I ended up stripping out everything out of the cell and just left the title label.
Stripped Down Cell
I centered this to the parent view but it still ignores its constraints.
Run Time View
I am guessing auto layout does this. Not quite sure what takes priority and is forcing it to ignore my constraints.
I looked into the debug view hierarchy and it has a purple label on the UILabel indicating that the position is ambiguous.
Debug View Hierarchy
I am guessing autolayout then tries its best to fix its position. Not sure what is ambiguous here.
UPDATE 2: I dont know what was wrong with the storyboard constraints I set. I ended up removing everything from the controller and starting from scratch. After doing this it worked as expected. Sometimes starting from scratch is the best thing to do.
You need to define the width of your horizontal stack view children (Both vertical stack view). You can set the width of both vertical stack view to equal this way they will take equal space and fill the parent.
I am a pretty new iOS developer and am coming across my first need for a scroll view. The page I need to design is a little complex. Since I was struggling to get that to layout correctly, I decided to create a super simple scene just so I could make sure I understood how to get UIScrollViews to work. Apparently it didn't help as things aren't working and I am stuck after following several tutorials.
I'm working in Xcode 8.1 and Swift 3.
Screenshots at the end of this post.
I have a scene that consists of a scrollview and a child view with two labels in it. I’ve set the labels to be ~700pt apart to try to make scrolling happen. Nothing scrolls and you can only see the first label. Additionally, the child view does not expand to be full height.
You can see in the screen shots that my scroll view has constraints to pin it to the sides of the superview.
The child view has the same.
The label constraints position them within the child view and 700pt from each other. I thought that this would give the views the height they need to make scrolling happen. There are no constraint errors.
I am hoping for the red childview to fill the vertical space and then scroll. At this point I’d take any layout as long as something was scrolling. Nothing is though, what do I not get?
Screenshots:
(removed due to link limit because I'm still a new SO user)
EDIT (6/12/16):
I've made some changes and gotten a little closer. Primarily, it was suggested to me elsewhere to set one of the labels to be equal height with the scroll view. This now gives me the "bounce" effect which means stuff is sort of scrolling; however, we're still only dealing with one screen of content as the second label which is hidden below is clipped off.
Here's where things stand:
edited hierarchy
edited screenshot
When you are using a UIScrollView in a storyboard, you need to ensure that the scroll view is able to compute the size of its content. If you don't have sufficient constraints then you will get an error in Interface Builder:
Scrollable Content Size Ambiguity
Clicking the Info icon on this error will advise you that there needs to be constraints touching all sides of the scroll view and to ensure that you can trace a continual line of constraints from left-to-right and top-to-bottom.
You can achieve this with or without the content view you have added. I will show you how to do it without the content view in scroll view, simply because there are fewer constraints that way and therefore less typing.
Add the scroll view to the root view
Constrain the top/left/top/bottom of the scroll view to its superview (the root view). Remember to turn off constrain to margins if you want the full width of the screen
Add label 1 and label 2 to the scroll view
Constrain top/leading/bottom of label 1 to the scroll view
Constrain top/trailing/bottom of label 2 to the scroll view
Constrain the trailing edge of label 1 to the leading edge of label 2 with 0 space
Constrain label 1 width to be equal to the width of the scroll view
Constrain label 1 height to be equal to the height of the scroll view
Constrain the width and height of label 2 to be equal to the width and height of label 1
There is no step 10 :)
ScrollViews are particular in that they like to know explicitly how much they are supposed to scroll. The best way I have found to handle this is to have the following hierarchy with some constraints:
-Scroll View
-Content View
-View (constrained to top, bottom, leading, trailing anchors)
-Your other views (e.g. Label)
By having one View living underneath the Content View and then containing all of your other Views within that View, the ScrollView then knows how much it's supposed to scroll (it just uses the size of the one child View) no matter how much stuff you have inside of the child View.
Let me see if I can snap a picture of an example from one of my projects. In the meantime, give this hierarchy a try and let me know if it works for you. You would probably constrain the Label to the top and leading anchors of the child View and then constrain the height to something taller than the screen (e.g. 1000 units).
Let me know if you have any questions.
Edit: Example hierarchy below
When applying auto layout constraints to a UIScrollView, i´m given an error message if the scroll view is laid out to be full screen, but not if it has "margins". I´ll illustrate with 2 examples. In both examples i apply leading and trailing space to the superview and add top and bottom space to layout guide.
Example 1 (behaves as i expect.)
The auto layout constraints are blue, everything is in order
Example 2 (weird behaviour)
I stretch out the scroll view and apply the same rules as in example 1, but now 1 of the constraints ends up different. The "top space to top layout guide" is added as "Vertical space - (-548) - Top layout guide - Scroll View".
And then Xcode complains that i need "constraints for y position or height" for my scroll view.
Can anyone explain why this is?
Unfortunately, I think this is a bug in Interface Builder in Xcode 5. When you try creating a constraint from the top of a view to the top layout guide, IB usually (incorrectly) adds a constraint from the bottom of the view to the top layout guide.
To get around this, try first resizing the scrollView so the top edge of it is much lower down in your viewController:
Then try ctrl dragging from the scrollView to the viewController, and adding a constraint to the top layout guide. You can then select this constraint and adjust the constant in the inspector so that the scrollView aligns with the top of your viewController:
Alternatively, create your constraints in code :)
Just select the scroll view and manually create constraints for the top, left, bottom, and right edges.
What is happening here is that the automatically created constraints don't make sense, in that they do not fully define the size of the scroll view, only its position.
Following your original example with the scrollview smaller than the containing view I noticed that XCode was actually adding one of the constraints wrong in my case, when I selected "Top space to top layout guide" it was adding a "Bottom space to top layout guide" constraint with a large negative value. I can see something similar from your second screenshot.
My solution was to follow your example with the UIScrollView smaller than its container. I then manually dragged out the constraints, resized the UIScrollView to fit the container. The final step was to take the now correct constraints with the wrong constants and set them all to be 0.
Hope that helps, I'm still working on fixing the problem I had but I noticed this stage was similar to what you posted.
When I select "Vertical Spacing" in interface builder, I expect the bottom of the upper view and the top of the lower view to have a relationship. However, frequently what seems to happen is that the bottom of the lower view gets linked to the bottom of the upper view. Then at runtime the bottom view will have the wrong frame (after resizes, animations, etc.). Is there a way I can ensure that views are consistently linked bottom to top?
[EDIT]
Here's another example. I set a height of 419px. I select "Top space to top layout guide". But instead it puts a constraint for how far the bottom of the imageview should be from the top of the superview. Then I change the height from 419px to 374px, and the view has correct height, but a gap at the top.
I've noticed this many times (usually when attaching the top of something to the topLayoutGuide), and I've put it down to a bug in Interface Builder. It seems like the issue has gone away in the betas of Xcode 5.1
The only workaround I've found is to initially move your view away from the view you're attaching it to, and then create the constraint. In this situation, Xcode will usually do the right thing. Then manually edit the constraint's constant back to 0 (or whatever you want it to be).
Instead of adding vertical spacing, try by adding "Top spacing to nearest neighbor" constraint. Please refer attached image,
Hope this will help.
This issue is fixed in the latest versions of Xcode. You can now select which part of the constraint you want to attach to. It may attach wrong initially, but the constraint editing controls are much better now.