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
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 have a ViewController that has a UIScrollView with a vertical UIStackView on top of it.
Everything works fine if i add UIView to the stackview with height constraint trough the interface builder. For example 3 views with height 600px. If i run the app, i can scroll with no problem and see all three added views. The for the stackview works fine.
If i try to add a view to the stackview with code with addArrangedSubView trough code i can see that the first view that i added if i "force" scroll down, but not the other two. It doesnt matter if i set height constraints to the views that i add, and it doesnt matter if i set intrinsicContentSize for the custom views.
How can i get the scroll view to expand the scroll area when adding trough code. ?
Thanks :)
Just a guess in lack of more information:
The issue may be related to the way constraints are set up between the scroll view and its child, the stack view.
you should add the following constraints:
fix stack view edges (top, leading, trailing, bottom) to scroll view
set width constraint between stack view and scroll view
also set height constraint between stack view and scroll view, set its priority to low (250)
For more insights please read up on "setup UIStackView with auto layout", for example here:
https://medium.com/#pradeep_chauhan/how-to-configure-a-uiscrollview-with-auto-layout-in-interface-builder-218dcb4022d7
If it doesn't work please provide the relevant code and screenshots of your Interface Builder setup.
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:
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.
I have a horizontal scrollview that fills 1/3rd of the view.
I want to put a UILabel in the centre of the scroll view, which I have successfully done with:
let reagentsLocationx = mainscrollview.frame.width/2-100
However, I am struggling to centre the label vertically within the scrollview. When I use similar code for reagentsLocationy it centres the label in the view and not within the scroll view.
How do I centre the label, in Swift, just within the scrollview?
Many thanks.
I think this is because you are using frame and not bounds. I don't believe frame will ever be larger than your screen space, but bounds it equal to the view's actual size. Try basing it on the bounds of the scroll views height.
UIScrollView().contentSize.height might be what you are looking for.
No need of setting sizes in code.
Everything done in the storyboard.
Drag your scrollview into your view controller.
Set top, bottom, leading and trailing constraints from the scrollview to the parent view or safe area.
Drag your text label into the scrollview.
Set your top, bottom, leading and trailing constraints to the scrollview.
IMPORTANT set a second leading and trailing constraint, now from the text label to the parent view (UIView - not scrollview) or safe area.
This makes sure that the text label knows his width and so the scrollview knows it too.