ok, I have spent hours and hours trying to figure this out. read countless other questions on here, which have helped me understand how UI scrollview works, but which have not helped me actually implement one into my app. I think I finally understand--but it just doesnt seem correct. Can someone please tell me where I am going wrong (if I am) in the process below:
Have new, empty view controller.
add scrollview to view controller.
Put constraints on scrollview: Pin 0, 0, 0 and 0 to the view.
insert new UIview inside the scrollview. rename is contentView
put constraints on contentView: 0, 0, 0 and 0, all against the scrollview.
Now here is the tricky part: uiscrollview doesnt have a specific size--it only takes on the size of the container (contentView) that is inside it. So unless you give the contentView a certain height and width, then it says "scrollview has ambiguous scrollable height/width."
OK, so that makes sense. So I want the scrollable content height to be 900, so I set the height of the contentView to 900. But, I do not want horizontal scrolling. Users don't like it and it makes for an ugly user interface. But, the problem is that I have to set the contentView to a certain width, or else the width is 0 and no content shows up inside it.
So, I choose a certain width, for example 320. This works great for the iPhone 4S and 5/5S. And if the 4.7" and 5.5" iphone's didnt exist, this would be fine. But it gets a little awkward for the larger iphone's, because then the the content on the scrollview can't fully go across the screen, it abruptly ends and doesn't look presentable.
So, is there any way around this? I have been just using a tableview instead in the past, but now I need access to something that the uitablecell class can't do, and that's not an option. I tried setting the contentView to equal widths of the Superview, and that didnt work either, i still recieved the message "scrollview has ambiguous scrollable width." I just want the width of the contentView to be 320 for iphone4/5, and for it to be 400 for the 6/6 plus. Is this possible?
Constrain the scroll view's content view to be the same width as the root view (i.e. the one that contains the scroll view). Absolutely do not hard-code widths.
EDIT: Finally! Here's a screenshot of the storyboard I just created. I can put the project code on GitHub if anyone wants it.
Related
This issue sounds easy at first but this is one of those things that I had to ask a question for suggestions since there is no other way I can think of to solve this. I already searched too far for solutions but did not find any.
Situation
I have a collection view that scrolls horizontally that covers the whole screen.
I added a scroll view inside each cell's content view that contains several views that will be taller than screen height.
After the last subview is added I update scroll view content size using:
scrollview.contentSize = CGSize.init(width: screenWidth, height: (scrollview.subviews.last?.frame.origin.y)! + (scrollview.subviews.last?.frame.size.height)!)
Let's say "scrollview" is the scroll view and "screenWidth" is the width of the screen. It works on other devices except iPhone X will scroll maybe for two screen heights worth but that's it. Other devices can go to the bottom of the scroll view.
While writing this I thought:
what if I need to add top and bottom padding of safe area to content size height since it extends there.
I did it but it only added so little and a big part of views still cannot be seen due to this issue.
Inputs are welcomed. Thanks in advance.
I have a problem here. For last 3-4 days I'm trying to the find the solution but no avail. I'm using a xib to load a view as a subview to scrollView.
I'm using iOS8 and size classes and auto-layout as well.
The problem is that the view gets added to the scrollview but scrollview is unable to go beyond a point. That is I'm not able to scroll till the bottom.
This is frustrating as I have just started to develop iOS apps.
I'm attaching the screenshots for the constraints that I have applied. Hope to get some help here.
The first screenshot is the actual view controller's view that holds the scrollview.And the Place Detail Info View is the placeholder where the view loaded from xib is added. The screenshot also lists the different constraints as well.
The second and third screenshots is of the xib file which i'm trying to load into scrollView.
Please let me know where I have gone wrong.
As said above, the issue is related with the content size of your scroll view. Just try adding width and height (either explicit or implicit: see explanation below) constraints to every direct subview of your scroll view and then define all distance constraints among those.
* By "implicit" width/height constraints I mean things like "aspect ratio", "equal width/height" relation between two views.
P.S. When dealing with scroll view-like controls and auto layout, there should be an exhaustive (some of which may seem redundant) set of constraints for subviews.
Hope this helps.
Your problem is with the view who is immediate subview of your scrollview.In autolayout,scrollView calculate its content size according to its subview.
follow these steps after removing all constarints from this view,i hope u will get your problem solved.
1.for your scroll view,set all 4 constraints i.e leading edge,trailing edge,superview and bottom constraints.
2.now for the view that is immediate subview to your scrollview,set all 4 constraints (leading,trailing,top and bottom),along with these set height constraints and make width equals to scrollview.
if your immediate subview's height is greater than your screen size or scrollview,it will scroll for sure.
run and check whether you are able to scroll and proceed furthur.
after step 2,all your constarints related ambgious type error will resoved.now you can set all other constraints as usual.
for more clear understanding setting constarints in scrollview see this https://www.youtube.com/watch?v=4oCWxHLBQ-A
In interface builder itself there is an option to preview your constraints for all the available devices. This will ensure you that the constraints work fine for all the available devices from Apple. Here is a quick tutorial that will help you with it.
http://adoptioncurve.net/archives/2014/08/working-with-size-classes-in-interface-builder/
Once that is verified and you are still not able to find a suitable solution, then probably there is something wrong in the content size for your scroll view. Try to increasing your scroll view content size.
I hope this should solve your problem.
Happy coding. Cheers :)
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 a pretty complex view and am trying to update it to work with autolayout (while I learn autolayout at the same time). Here is a screenshot of my view:
The only thing that you can't see is that all of these views are wrapped in a containerView and that container is sitting in a vertical scrolling UIScrollView.So if there was a really long description or something you would be able to scroll vertically.
My first problem is that I can't figure out how to get the descriptionView (red background) to adjust it's height dynamically (I have scrolling disabled in IB and again in code). I think it might be related to the bottom constraint to the imageScrollView.
The second problem is that the imageScrollView needs to be removed half the time. It holds multiple pictures of an item. But sometimes the item doesn't have pictures so I just want to remove the scrollView in that instance. I call removeSubview in code and want things to just readjust without having to set up a bunch of new constraints. So I added a top space constraint from the Question/Comments label to the bottom of the description and changed its priority to 900 instead of 1000. This seemed to solve my first problem and when I remove the imageScrollView the description view resized to the size of the content. However my scrollView that holds all of the content didn't scroll anymore, I am assuming that the containerView's height got screwed up or something.
Edit: the more I think about this the more I think that figuring out how to add a contraint for the size the descriptionView's height to match the content will solve the other problem as well. Here is another screenshot with the current constraints.
SOLUTION
I don't feel it is fair to post my own solution as the accepted answer. So I am posting my solution within the question, and giving the accepted answer to Nikita for trolling all the questions related to textViews being sized to their content.
My first problem is solved by using this: Github - Resizable Text View
The second issue was just a matter of setting up the constraints correctly. The red textView had a constraint to the bottom of the superview(contentContainer) (the superview which sets the height of the the main scrollView.) So when I removed textView then the contentContainer view didn't have a height constraint. So I ended up removing the constraint from the textView to the superview (which is the contentContainer) and made a constraint from the bottom of the commentTextView to the contentContainer. This solved the problem. Whenever I remove the red textView everything shrinks up the way I desire.
I'm not sure, that my solution is the best one, but I've done it in the following manner (I think that will help you with red text view): How do I size a UITextView to its content?
Unfortunately, I didn't understand you about second problem. Please, provide more details. Thanks!
Don't remove the image view. Just give it a zero-height constraint. That way you don't have to mess with any of your other constraints.
I am having a very frustrating issue. I know there are all kinds of issues with UIScrollView in iOS7 and XCode 5. I need to implement a scrollview and there are all kinds of tutorials showing you how to do it by switching off auto layout but that then messes with the rest of the views in my app.
I tried the fix of putting my subviews into a container UIView and placing that in the UIScrollView and setting the scrollview's content size to the size of the contained UIVIew. That didn't work. Now I am working with placing everything in the scrollview and it all works with one exception. When I load the view on the simulator or a device the content view is moved down but somewhere around 60 points or so. See image below.
That white space below the title bar on the right is still the scroll view as I can press and drag within it. Adjusting the contentOffset doesn't do any good as that just scrolls the view down slightly. I have no idea what to do here.
Just a little more info: I setup the scrollview and all the subviews in storyboard and the connected them up. Not sure if that has any bearing on it.
Thanks in advance for any help you can provide.
I think your Scrollview top space constraint have 64 pixels. That's a problem. So, set your top space constraint value to 0.
You need to add the constraints before view displayed then contentsize will be set automatically.
Check UIScrollView's autoresizing mask. It has to be set like this.