I have a custom view that gets loaded from nib that has a number of subviews. Some of these subviews contain labels which can be a dynamic height. This view ends up being added as a subview to a view that is in a scroll view.
Think ScrollView > View > SubView > Dynamic Labels
I am using auto layout constraints and therefore need to set the height of SubView that is required to display all the content in itself, so that the ScrollView will scroll the length necessary to display everything in the SubView.
I know with a UILabel, you can do something like val neededLabelHeight = label.sizeThatFits(CGFloat(width: label.frame.height, height: CGFloat.greatestFiniteMagnitude)) to get the needed height to display on a single label, but when I attempt to do this on a whole custom view loaded from nib, it just has the height of the view I have in my nib file.
Is there something similar for doing it on a view with more subviews, other than calculating the needed hight of the view by summing all the needed heights of its subviews and vertical constraints?
Here is a simple example...
The XIB file looks like this:
Note: the Bottom Label has a constraint of >= 8 to the bottom of the view. That way you don't have to worry about IB showing an error during design. Any extra space at the bottom will automatically "disappear" at run-time.
The Storyboard looks like this:
The scroll view has a red background (to make it easy to see). The labels and views containing buttons are laid-out and constraints are set as we normally set them.
The "Blue" view - TheXIB Container View - has a Height constraint of 120, but is set as a Placeholder that will be removed at run-time, allowing the view loaded from the XIB to control its height. This will be the view to which we add our Labels Holder View from the XIB.
Here's how it looks with a small amount of text:
It's not scrollable, because there isn't enough content.
After tapping the "Add" buttons a few times, it looks like this:
and it is scrollable (we can see it's scrolled down in this image).
For folks who prefer using a "content view" as the "root" view of a scroll view, it works the same (orange view is the content view, inset by 8-pts on each side):
Here is a link to this example project: https://github.com/DonMag/LoadXIBIntoScroll
And here's a gif animation of it in action:
Related
I have a scroll view, then inside the scroll view I have a view, and then lastly I have a text view inside the view. I turned off scrolling on the text view so that the more a user types the bigger the text view gets. I then gave trailing, leading, and top constraints to the scroll view. After that I set the view inside the scroll view to 0,0,0,0 for its frame and then I gave top, bottom, trailing, and leading to the text view. Lastly I set the the views width equal to the superview and the scroll view height equal to the view inside of it. In theory when a user types and it goes to a new line the view should get bigger and since the scroll view and view have equal heights the scroll view should also get bigger. However when I go to a new line the view gets bigger but I am unable to scroll, no scroll bar, nothing. Heres some screenshots of the constraints:
Figured it out...
The scrollview height and the view can't be equal, the view should be larger than the scroll view or else there's no point in having the scroll view.
I am attempting to set up a scroll view and every video I watch they say the same things:
•Make scrollview in VC
•Make it bound to all margins (0,0,0,0)
•Embed a content view inside of Scrollview
•Content view margins are (0,0,0,0)
•Set Equal heights & width from content view to superview
•set priority of height to 250
I have done this time and time again and cannot figure out why it still isn't working. Can someone please double check these screenshots?
Try adding some subviews into your content view and make sure to have a complete set of vertical constraints from top to bottom.
If you go in the Size inspector under the "Scroll View" Section you can find the "Content Layout Guides" tick, disable and the errors will disappear
If you Set All the constraints to ScrollView and want to set its contents in code .. it remains complaining about its constraints because they remain ambiguous .. so to remove error from story board
what you do is set Ambiguity to never verify and error will go away .... hope it will help
Looks like you do not have anything bound to your Content Layout Guide.
So basically you have two guides in Scroll View: Frame and Content.
Frame Layout Guide provides you the ability to bind to your UIScrollView's frame. E.g. equal width between your Content view and Scroll View itself.
The most useful here is Content Layout Guide. Basically it helps to determine the scrollable content size of your UIScrollView's contents.
So in your case you have to have a Content view inside your Scroll View that has equal width with Frame Layout Guide and have its edges pinned to Content Layout Guide. Like so:
Oh, and do not forget to have your Content view have a determined height so your scroll view will calculate the size of its scrollable contents.
I know similar questions were asked before but all of them do it programatically and I'm trying to do this in the storyboard.
I have a scroll view with top, bottom, leading and trailing constraints, with a view inside it that is pinned to all edges of the scroll view and has equal width and height #250. Inside that I have a stack view with 6 other views that will change their height dynamically based on how much text each label gets. And it all works fine except for the fact that it doesn't scroll even when content overflows.
What am I doing wrong?
Here's a look at the storyboard:
You need to remove the inner view height which = 250 , and pin the stackView to all it's edges
I am pretty sure this has something to do with the dreaded AutoLayout. (been trying since 2days to get hang of it)
So I mastered it somewhat, but now I have problem where my UIScrollView is not scrolling fully down, pictures are much better at explaining these things
this is the scroll view
this is the content view
so the problem is the scrolling is happening but then again it springs back up. So I am not able to click on the signup button
EDIt 1
Edit:
I have created a little example on github for you to look at, here. The project illustrates the answer below and uses the techniques I describe and nothing else.
Original Answer:
couple of things I would advise here.
First, I know you've been trying for a while but remove all the current constraints (painful I know but). Do this for clarity as ....
The view should be the size of the scene, it looks like you want the scrollview to be the full screen so that too needs to be the size of the scene.
e.g. if you are designing at 6Plus by default the scene size is 414x736 so the view and the scrollview it contains should also be 414x736.
Only the content view needs to be the size of the real content you wish to show. Let's say for arguments sake that the content is 414x1000.
Now the constraints for the scrollview are simple. It needs zero spacing to all it's edges.
You can add the content view to the scrollview in a couple of ways. The way I try to do this varies from project to project and depends mostly on how complex the scene is. If it's a really busy scene I keep the content view outside of the scrollview in interface builder so that I can work on it easily and visualize the whole of the view. Then I add the content view to the scrollview in code.
If its a simpler view You can add it inside the scrollview in interface builder. Ultimately whichever way you do it, you can lose visibility of the content view in interface builder because the contentview is larger than the scrollview and the content gets obscured. So play about and find a good way for you.
Define the content view and all it's subviews. The content view needs to be taller than the scrollview otherwise it wont scroll. All of the content view's subviews need to have defined heights from top to bottom and widths from left to right. In your case the scrollview is scrolling vertically not horizontally so all the widths need to add up to the width of the scroll view BUT the heights need to add up to the full height of the content view.
Note: if you do this proportially your life will be easier later. If you do all this with fixed heights the storyboard will break on different device sizes.
Now the "tricky bit" and it's a bit counter intuitive. You need to pin the content view to the scrollview, remember the height of the content view is taller than the scrollview. In all other circumstances in Interface Builder pinning a view to a superview (0 padding) will adjust the height (or width) accordingly. For the relationship between a scrollview and it's content view this doesn't happen.
First pin the contentview
Notice the -400? Remember the content view is taller than the scrollview and we will change this immediately.
Select the bottom constraint (-400) that we have just created:
Select the drop down arrow next to the constant value:
Select Standard Value and type in 0 for the constant.
You should now have a storyboard with no broken constraints and if you build and run you should get a scrollview as desired.
Your bottomspace to superview on your content view is set to -74.0, I don't know if there is a reason you had to do that, but try setting it to -8.0. I think your scroll view is scrolling up to the 0.0 mark automatically
I have a View. Inside that view I have Scroll view. Inside that Scroll View I have Content View. I set constraint that content view height and width is equal to View's height and width. The problem is that I have Navigation bar above of my superview. So when I look at simulator on running time it gives me extra space of that navigation bar inside UIScrollview. So have can I adjust height of content view.
I want to create constratin like this . Content view height = superview height - 66. 66 is the height of navigation bar...
the better way is inside your main view put Navigation bar on top of the view and put your Scrollview below the Navigation bar and inside that ScrollView Put the Content View
and if you want to put Navigation bar under the Scrollview you should specify the top space constraint of Content View other wise it will give the same output