Need some help to set constraints to UIScrollView.
I tried to follow the instructions here: https://developer.apple.com/library/ios/technotes/tn2154/_index.html (Mixed approach).
Setting 4 sided constraints to UIScrollView.
Then set 4 sided constraints to the buttonContainer.
This the result:
However xcode is giving this error message:
If I try xcode's recommendation, either the scrollview will not scroll, or it doesn't display at all.
Any idea what's wrong here?
The messages you are getting tell you what to do. The scroll view sets its content size and becomes scrollable through the constraints pinning its subview(s) to the scroll view itself. Those constraints must therefore provide sufficient information. You have not provided enough internal constraints to describe the height and width of the scrollable area (the content size).
In other words, think of the constraints as sizing the buttonContainer from the inside out. That is what you have neglected to do. You can solve this, for instance, simply by giving the buttonContainer an absolute width constraint and an absolute height constraint. And those values need to be bigger than the size of the scroll view itself if the content is to be scrollable.
Related
When I first learned Autolayout, things where not too bad as you only had 1 width to cope with. I am struggling to get a Scrollview to grow depending on device (width) and its content equally. The scrollview has paging on so a StackView is not possible I believe.
The current issue is the first view grows to the right width (I believe its down to the centerX), however the overall content size of the scrollview is not large enough (iPhone 6) and the secondView is only 320 wide.
I could do this in code but I am sure you don't need to.
I have tried quite a few options like saying greater than on the width
As i understood your question, you want autoresize for views inside scrollview. So, instead of creating width constraint, you should add 'equal width constraint' to your target view:
second step
if scrollview tells you, that it has ambiguous scrollable content, add bottom constraint for it.
Basically, if you need autolayout inside scroll view, you should provide contentView and setup it with trailing, leading, top, bottom contstaint to scroll view:
This trick allow you to add another object inside scrollview and use autolayout easily.
Hope this helps
Actual image is.....
->View controller
->view
->ScrollView[[top,bottom,leading,trailing]to its super view]
->contentView[[top,bottom,leading,trailing,vertical,horizontal]to its scrollview].
that actual image is for iphone6 ->iphone4s,Any one help me how to do this.....
When it comes to set constraint with scrollview then little bit extraa effort is required for handling scrolling so that Scrollview + autolayout works.
First of All What exactly take place when autolayout is used :
When you use the auto layout, your views will resized automatically based on the constraint properties.
But, when you use a UIScrollView with auto layout like a container, the auto layout not works like expected.
so Here is Very good tutorial g8production which clears this confusion. Big Thanks goes to g8Production for providing this tutorial.
I think you are setting the constraints for content view in wrong way. You are trying to set the constraints on contentView that are related to its container(scrollview) which don't know content size of its own. It determines its content size from what it contains (in your case contentView,). Both are dependent to each other for their size. So both are confused.
To solve this you should first set the fixed height and width of contentView and then make outlets of these constraints and update these constraints with the height and width of superview when your view loads.
add top, bottom , leading and trailing space to your scroll view to view. It should be set accordingly, how you you want it to be seen. Then set same for content view (image). just addheight and width constraint for your image.
Misha :)
I have been struggling for days with this implementation, and even though I have tried to do every tutorial I found on the web, I still cannot make things work the way I want.
Basically, I am trying to put my login form in a scrollview, so that it takes the whole screen at first (and on all iPhones / iPads), and if the keyboard appears everything should move. The problem IS, my view doesn't take the whole screen... Either it is too large, or too high, even though in Interface Builder everything seams correct (from layout to constraints). Below and image of the layout I want to achieve (I am using an universal storyboard, with Size Classes and Autolayout enabled):
http://img4.hostingpics.net/pics/829115app.png
Can someone point me out on achieving this layout ?
Thanks in advance.
I would suggest pinning top, leading and trailing spaces of your scroll view to its superview. And set a bottom space constraint less or equal to the keyboard's height if you set it to 0, the scroll view won't be able to resize.
With your form layout set vertical center constraints and top space to superview constraints for your top label being more or equal than the distance you set in the IB, and then you can set relative space constraints between each of the components.
Hope I answered your question.
Edit: Just the provided project and got it working. I think the problem is caused by it being a containerView inside a scrollView. And both the container and the scrollViews content view adapt to the size of its subviews. Because of that, setting relative constraints won't help.
What I did was to set an explicit size (screen's size) to the containerView and setting setTranslatesAutoresizingMaskIntoConstraints(true) to it.
I modified your project and uploaded it here
I have:
application, that should work in landscape and portrait mode.
view with full-size scroll view on top.
some view inside scroll view with fixed width and height. (with added H and W constraints)
set to view inside scroll view as horizontal centered in container. (added according constraint)
I have warning in interface builder "Has ambiguous scrollable content width".
The only way to fix this problem, that I know - is set trailing and leading constraints.
But for different iPhones (5.5", 4.7", 4") I need to set different trailing and leading constraints.
How can I eliminate this warning and still have centered horizontally view with fixed W and H for all iPhone sizes?
I create Github repo to illustrate this problem: ScrollViewAmbigous
This is not duplicate of UIScrollView Scrollable Content Size Ambiguity
, but it similar (and not answered although), but this question especially related to different sizes of iPhones.
In the morning with a fresh cup of coffee I figured out workaround for this issue!
So, here is the initial state for simplest case:
scrollView with 0 constraints to all edges
Button centered Horizontal and Vertical with fixed Width and Height
And, of course Has ambiguous scrollable content width and Has ambiguous scrollable content height annoying warnings.
All, that we have to do is:
Add 2 additional constraints, for example "0" for trailing and/or bottom space for our view (in my case - UIButton)
Important: you have to add trailing and/or bottom constraints. Not "leading and top" - it's not works!
You can check it in my example project, that demonstrating how to fix this issue: ScrollViewAmbigous
P.S.
I don't know why it works and how Xcode detect which constraint is more prioritised (because I'm not set priority for these constraints explicity), but I'll be thankful if someone explain, why it works in comments below.
Problem :
The warning is telling us that the the content size of the
scrollview depends on its subviews.
while your subview don't have any strict rule of position and size (no fixed constraints) it will confuse nib generated scrollview
content size.
Solution :
Make only one subview as a 'contentView' for scrollview.
Add strict (fixed) constraints to that 'contentView'.
Best practice : equal width and height to its scroll view.
Add all other subviews and constraints to your 'contentView'.
There seems to be a lot of confusion on this issue. My take is that a UIScrollView must have TWO trailing space constraints, an 'inner' one connecting it to one of it's subviews (so it can know its content width), and another 'outer' one connecting it to a sibling or superview so it knows its frame width.
Same principle applies for height, i.e. two bottom space constraints.
I really hate to ask here because I usually try to figure things out on my own. But on this one I've stuck for days and can't find a solution anywhere online.
I have a ScrollView containing multiple subviews. I've got an image view and two labels at the top with fixed heights. Then there is a UITextView and another ImageView (see pictures).
I add the text to the text view programmatically so it should have a dynamic height and the ImageView should move to the bottom so you can scroll. I don't want the TextView to be scrollable in itself but I want all the subviews to move as well.
I know I should be able to solve this issue using constraints. But I feel like I've tried everything and nothing worked yet. It worked when I disabled auto layout and moved the views manually. I'm wondering if there is a better way though.
As you can see I pinned the TextView to the ImageView above with a 1,000 priority and to the ImageView below with a 1,000 priority. The height constraint can not be deleted so I set it to the lowest possible priority. The ImageView on the bottom is pinned to the bottom of the superview with an absolute height. Its height constraint also has low priority. (I can post an image of the ImageView's constraints, if it helps)
I also tried adapting the frame programmatically but this is not working well in combination with auto layout. (If it helps I can of course post the code)
What am I doing wrong? Shall I just disable auto layout and do it manually? This seems unclean to me. Is it even possible to do?
I really appreciate your help :)
Greets,
Jan
Make sure the Scrolling Enabled attribute on the UITextView is unchecked in Interface Builder. I believe that the Auto Layout system takes that into account when it calculates the intrinsic content size.
If somebody is struggling with a similar problem: This is what I ended up doing:
Remove all subviews from the ScrollView in IB
Programmatically add a single UIView to the ScrollView.
Add all the views to the UIView as subviews (move them using setFrame)
Set the Frame of the UIView appropriately to the subviews
Set the ScrollView's contentSize to the size of the UIView.
A little more work but it finally works. This follows Apple's mixed approach guidelines that can be seen here (look for UIScrollView): http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/index.html
The problem is the height setting. You somehow have to try to delete it. If you have added other constraints that are "sufficient", it should become deletable.
At the moment you have one user constraint for the height that is "Greater or equal" and an "Equals" constraint as well. Clearly, those are not working well together.
Maybe there is a conceptual error as well. The lower image view should not be fixed in position, so the distance to the lower image view will not be a "sufficient" constraint to let you delete the fixed height.
I think it should work if
the lower image view has a fixed height and
a fixed distance to the text view above, and
the text view has a minimum height as well as
a fixed distance to the image view above
(which should be fixed in relation to the superview).