With Xcode 6, w:Any and H:Any, i want to make a view that can be scrolled horizontally, there is 4 view in the scrollview placed horizontally, and one is take full width, (see picture)
How to achieve this with Xcode 6 new universal layout paradigm?
i mean, i am confused with what constraints i should use for each element to make it work
As in Xcode 5 you need to make the contents of the scroll view a multiple of the outside of the scroll view, and both the scroll view and content view need there bounds to be fully constrained.
To do this for different width screens:
Make the scroll view and constrain its bounds.
Add a UIView into the scroll view to constrain the contents size of the Scroll view, we'll call it a content view.
Add constraints to the outside of the content view so that the contents of the scroll view is bounded by it.
Make the content view equal widths to the scroll view.
Edit the equal widths constraint so the content views width is a multiple of the scroll views widths (the multiple needs to be the number of pages)
Add relevant height constraint to the content view (probably equal height with the scroll view).
Here's a sample project that does this. For a more detailed explanation there is a blog post here
Related
I have an UIStackView which is inside a scrollview. the content of the stackView is dynamic, depending of how much views created and added with the methode "addArrangedSubview". if I have a few subviews, there is so much spacing between them, and if I have too much views, they become compressed.
I have:
_viewController
|__ view
|____scrollView
|______stackView (dynamic content)
I set the stackview to:
Alignement: fill
Distribution: equal spacing
Spacing: 5
and of course the constrains top/bottom/leading/trailing
I want to increase the size of the UIStackview every time a view is added, and keep the size of my added subviews.
Maybe something is missing or I have a bad understanding.. someone can explain to me how to do it ?
I'm working with objective-c
I've a detailed Medium post on this topic. You can take a look there for a step-by-step guide. But I'm also adding a brief explanation here as well:
You should have all of the necessary constraints set-up for the scroll view to it's super view. Then comes your stack view that is the sub-view of this scroll view. You might have pinned all the four edges of this stack view to the scroll view as well. But here comes the actual concern.
UIScrollView doesn't work as like other views. It has a contentView. This content view is responsible for scrolling behavior. If there are more content that don't fit in the frame of the scroll view than the scroll is enabled.
So for setting up the content view correctly, the scroll view must know the size of the content view so it knows when to stop scrolling. Here size means the actual width and height. But this size can't be determined from the constraint's setup because they are calculated dynamically by the auto layout engine.
In your case, the stack view acts as the content view of the scroll view. You might have pinned all the edges of the stack view to it's superview - UIScrollView. But that isn't enough for the scroll view to calculate the content size. You must also provide the:
width & height - if your scroll view is scrollable on both axes
width - if you want to scroll vertically and restrict scrolling horizontally
height - if you want to scroll horizontally and restrict scrolling vertically
As you need horizontal scrolling, you must restrict the vertical scrolling by providing the height of the stack view equal to the scroll view (it doesn't always need to be the same height as the scroll view, but should cover the whole height of the scroll view by other means). And you will also need a placeholder x-axis constraint to make the Interface Builder happy. The actual width of the content view will be covered by the sub views that will be added to the stack view.
Important: You should add a Horizontally in Container constraint to the stack view and make this a place holder that will be removed at build time. You can do this by selecting the constraint in the document outline and opening size inspector where you will get a Remove at build time check box. You check that box, you are ready to go.
I am having trouble with layout in Interface Builder (Xcode 9 / iOS 11).
I have a UIScrollview and over it I have 2 buttons (next and prev view).
If I put the buttons under the scroll view, they appear and work. But if I put them over the scroll view, they don't appear anymore.
What can be the problem?
Layout buttons and scrollview:
Warning message:
Drag scrollview
Constraints
You need to understand first how UIScrollView works. Check again the Warning Message. It says:
ScrollView has ambiguous scrollable content
It means that the subviews of your scrollView does not have enough constraints attached to them and to the scrollView to make the scrollView scroll. Well how does the scrollView scroll? If the content of the scrollView exceeds the frame (either width or height) of the scrollView, then the scrollView will be scrollable.
In your problem, the two buttons do not push each other to the scrollView's frame, is this clear? It means your buttons do not have enough constraints.
I'll try to provide an example in a bit.
When working in Interface Builder, if you drag and drop one object onto a container object - such as a UIView or UIScrollView (which is also a UIView), the object will become a subview of the container.
That makes it a little difficult to do what you want, which is to have the buttons on top of the scroll view, NOT as subviews of the scroll view.
As you see in this image, the buttons are clearly NOT subviews of the scroll view:
In this image, I drag/drop the buttons onto the scroll view, and they become subviews:
So, to get what you want, add the buttons outside of the scroll view and set their constraints. I gave Prev a leading constraint of 16 and Next a trailing constraint of 16... both constrained to the view, not the scroll view. Then I constrained Next to be centered-vertically to Prev so they will stay vertically aligned to each other.
Then give Prev a centered-vertically constraint to the scroll view. Select Editor -> Update Frames and the buttons will move into position, but - as you can see from the Document Outline - they are not subviews of the scroll view:
At this point, you can drag-scroll any content you add as subviews of the scroll view (such as the image view here) without affecting the buttons:
I'm assuming you want your buttons over (and not under) the scroll view. That's easy enough in Xcode 11 Interface Builder, which lets you pin subviews of scroll view (i.e., its content view(s)) to either the Frame Layout Guide or the Content Layout Guide or a combination of either.
The frame layout guide defines the size of the visible area of the content view by applying width and height constraints based on any superview other than the scroll view or its container (in other words, another sibling subview to the parent view containing the scrollview).
The content layout guide defines the size of the overall area of the content view any applying width and height constraints of based on same, which is, or course, larger than the frame of the scroll view:
Using these layout guides obviate the need to toggle scrolling in either direction; constraining the Content Layout Guide to a height or width of the visible frame of the scrollview determines whether it can be scrolled vertically or horizontally.
That means that, if you constrain a subview of the scrollview to the Frame Layout Guide, it will not scroll (and, yet, will be a true subview of the scrollview).
The
Frame and Content Layout Guides added to the UIScrollView Interface
Builder component in Xcode 11 is not yet documented; however, Apple
still distributes an out-dated document that describes how to create > a "floating view" in a scroll view with Xcode 10 or earlier.
I wanted to add some labels and textfields on my view and that view should scroll, so I am thinking of putting view on scrollview.
I wanted to add some labels and textfields on my view
And that view should scroll
So I am thinking of putting scrollView
And then I wanted to put my view having labels and Textfields
Is it possible?
Please check scrollview property Bounces Vertically is checked or not if not check it
May be, your content is less, than ScrollView, that's why scrolling is disabled
Put view with labels in scrollview. Scrollview should be less in height than view. View should have height considering all ui cvontrols in it. should work like this
Make sure your scroll view height is not greater than view its content size has to be greater as all people says. You get confused between content size and scroll view height.
Meas using nib suppose your scroll view height is 300 and when you use the code content size should be greater than 480 so it will be scroll-able on iPhone 4 size device who's height is 480
To make sure your constraints are well defined, first check these steps:
Make sure your base view is a UIView
Put into a UIScrollView and add constraints to the edges of UIView
Put into the scrollview a UIView and add constraints to the edges of the scrollview. I call this "content view".
You should assign a width to the content view. I usually set the width of the content view equal to the width of the scrollview.
Put your labels/views/images/whatever into the content view and use autolayout constraints to resize them automatically to fit the target screen.
Please consider that:
Your scrollview must always have a height, fixed or dynamic. In order to avoid errors with autolayout, consider that:
the last element on the bottom of the content view must always have a constraint to the bottom edge of the scrollview, or
the content view must have a fixed height
If the height of your content view is less than the height of the scrollview, the view will not scroll. You should add more views or more margin to the bottom constraint of the content view.
I'm trying to allow the scroll view to adjust size depending on the size of a subview on this page. All of the other constraints for the objects in the picture work fine.
When I add constraints to my subview to hug to the left, right, and bottom of the screen (and the top of the subview hugs to the bottom of the segmented control) and then update frames, it makes the height of the subview 0.
I can't add a height constraint to the subview because the size of the subview will change dynamically depending on the amount of content in it, which will then change the size of the scroll view.
How can I accomplish this without adding a height constraint?
Your view hierarchy should look like :
Create a single child view of the UIScrollView where we will put all
of our content
The content view has to be an explicit size (or a placeholder size in
interface builder and set at run time). In other words your content
view cannot depend on the scroll view to get its size. It can,
however, depend on views outside of the scroll view to get its size.
From Apple Technical Note TN2154
Set translatesAutoresizingMaskIntoConstraints to NO on all views
involved.
Position and size your scroll view with constraints external
to the scroll view.
Use constraints to lay out the subviews within the
scroll view, being sure that the constraints tie to all four edges of
the scroll view and do not rely on the scroll view to get their size.
UIScrollView And Autolayout
Using UIScrollView with Auto Layout in iOS
Try giving the Equl Heights & Equal Width constraints to your Subview.
My view heirarchy looks something like this:
- View
- Scroll View
- Collection View
I'm using Auto Layout. The problem is that when I specify that the collection view should take the full width of the superview, it ends up actually taking the full width of the elements contained within it. I.e., if there were 1000 elements in this collection view and each element was 10 pixels wide, the collection view would be 10000 pixels. It appears to ignore my constraints.
The VFL I'm using looks a little like this:
Scroll View
H:|[scroll]|
V:|[scroll]|
Collection View
H:|[collection]|
V:|[collection]|
All views are set to not translate autoresizing masks to constraints.
when I specify that the collection view should take the full width of
the superview, it ends up actually taking the full width of the
elements contained within it.
The whole point of a scroll view is that it permits the display of views that are larger than the scroll view itself. So it doesn't make sense to constrain the collection to the scroll view -- subviews of a scroll view can be as big as they want to be. If you want to limit the size of the collection view, just set its width to whatever width you prefer.
The constraints in your post make the collection view fill the scroll view along both axes. It's not clear why you'd want to do that. I will assume you actually want something like the App Store, which has multiple horizontally-scrolling collections in a vertically-scrolling scroll view.
Auto layout has special behavior for scroll views. Go read Technical Note TN2154: UIScrollView And Autolayout.
So, a constraint between the edge of a scroll view and a descendant of the scroll view affects the scroll view's content size. A constraint between the edge of a scroll view and a view outside the scroll view affects the scroll view's frame.
You need to pin the collection view's left edge to the left edge of your top-level view (the superview of the scroll view), and the right edge similarly. You can't do that with a visual format. You'll need to explicitly create those constraints (or set them up in your xib or storyboard).