I have made a Button which generates TextFields and I want a ScrollView so if I'd add too much TextFields I could scroll and write to them. I also have a Button at the bottom of my view and I want this to be visible all the time. (I don't mind if only TextFields will be inside the ScrollView or the whole view except my bottom button).
You have to set the height constraint on your TextFields. Without that, the scrollView can't figure out its contentSize. After you set the heights, the scrollView will adapt accordingly.
Also, I would use a UIView and give a fix height for it and place the TextFields inside of the UIView.
You can also use scrollView.contentSize = CGSize(width: expectedWidth, height: expectedHeight)
These steps help you to design screen according to your requirement :
Drag a ScrollView and provide height and width accordingly
Decrease height of ScrollView by height of Button which you always want to show on bottom of page
i.e- Button should be outside of ScrollView not within the ScrollView
Adjust button size and height and put it below to ScrollView
Now set Constraint to each one . First of all select ScrollView provide its l
Left , Right , Top constraint .
Select ScrollView and by pressing Control + drag mouse to Button ( below of Scrollview) and set vertical spacing between ScrollView and Button
Select Button and provide Left , Right , Bottom Constraint.
Note - As AutoLayout works differently with ScrollView so always set constraint of all control within it from Order : Top To Bottom
Hope it helps you to fix this issue . Feel free to comment if still any confusion.
Thanks.
Related
I am adding more than 8-9 controls in my ScrollView but I am not able to set ContaintSize of that ScrollView so that I can able to scroll and view all controlls.
I HAVE SET below constrains to my scrollview and add some controls into my scroll view with the help of contain view.
Scrollview.top respect to his superview
Scrollview.bottom respect to his superview
Scrollview.leading respect to his superview
Scrollview.trailling reapect to his superview
Than I have added UIView as contain view and set all constrain respect to scrollview.
Than added all controls into view but still its not scrolling as expected.
By below code I am able to set containview but its ststic one and cant assume that 1000 is my contanent height.
Scrollview.contentsize = CGSizeMake (Scrollview.frame.size.width,1000);
Above part is static as I have many lable with multiple line in it.
All data is dynamic comes from server si cant set it static.
Can any one help me out how to set autolayout of scrollview so I can get dynamic content size?
Edit: some time I am getting autolayout error into storyboard like below.
Scrollview has ambiguous scrollable content height
An while i reslove conflicts its not showing proper scrollview in my screen.
Faced the same issue recently. I'm sure that you did your research but here is the guide I used, nonetheless.
https://www.natashatherobot.com/ios-autolayout-scrollview/
Also if you have many labels it would be good consider using a 'UITableView' or a 'UIStackView'.
Edit
Make sure you center the scroll view vertically and horizontally in respect to its container.
You have to define constraints for the scroll view like this..
ScrollView :
top ,left , bottom, right pinned to superview.
ContainerView:
top, left , bottom , right pinned to scroll view
width pinned to main view
And make sure that every subview inside the container view should have constraints in such a way that it should define the height of container view.
As i understand your issue you forgot to set the height constraint of your contentView, just try by setting it.
No need to set the fix height of scrollView's contentSize, please see the below code.
self.scrollview.contentSize = CGSizeMake(self.contentView.frame.size.width, contentView.frame.origin.y + contentView.frame.size.height + 10);
Note: you need to add height and width constraint of contentView if you need scroll according to it.
I have a weird behavior when I use scrollView.
As you can see in the picture bellow the button called "Back" has a bottom space constraint with value 0. But we can see is not even near to the bottom of the scroll view.
I already set the scrollview to have equals width and height of the superView and top,bottom,trailing and leading space with 0 value.
How can I fix this? I want the Back button still inside of the scrollview and put it at the bottom of the view.
Update
I have the code here https://github.com/rchampa/NDParallaxIntroView and the xib is called PageB.xib
Ricardo: you've added two constraint regarding manage y position of Validate Code button where your top constraint stop to move Validate Code button towards the bottom. So please remove top constraint of Validate Code only add bottom constraint.
you need to manage all constraint like your scrollview content view height will be equal to height. Please increase some top constraint from top.
So, if I understand correctly, the problem you are running into is that your back button is unable to be positioned based on the bottom of the scroll view.
A scroll has two sets of constraints in a storyboard, one that defines the size of the scroll view, and the other that defines the content size. The top, left, bottom, right to superview constraints on the scroll view will define the size.
The part that is causing your problem is that the content size is defined by the subviews inside the scroll view. So the button cannot be placed relative to the bottom of the scroll view since the scroll view doesn't know how large its content size is. All of the subviews of a scroll view must be placed in relation to each other.
So, create constraints for your logo, text fields, and all the buttons in relation to each other. Then create constraints from the outer most subviews to the scroll view.
In your example, you would constraints from the logo to the text field, 1st text field to 2nd text field, then 2nd text flied to the label, label to the "Send email..." button, and finally "Send email..." to the "Validate Code". For the "Back" button, it would need a left align with the text fields and then a center align with the "Validate Code" button. Create a top constraint from the logo to the scroll view. Then have leading and trailing constraints from one of the text fields to the scroll view. Finally, create a bottom constraint from either the "Back" or "Validate Code" buttons to the scroll view. You will also need some alignment constraints (logo center to the text field is an example of one). After that is all setup, your view will be fully defined for the content size of the scroll view.
If I understand you, my new question is: how can I make the subviews
make the height of scroll fit 100% screen device height? Is there a
way to define weights like Android? I don't know how achieve this
since the canvas is 600*600 which is different to every device.
Response would be too long for a comment:
So you wouldn't use a scroll view for that. A scroll view is specifically for containing content that will not fit on the screen (so the user can scroll to reach the new content).
The simplest solution is to add a regular view that has TopLeftBottomRight 0 distance constraints (so it is the max height and width of the screen) and setup the view like you have here to position the bottom in the bottom left all the time.
There is also a weight system, I can explain that if you want, but it wouldn't be required thus far.
I feel like your next response will be something like "what if I want it to scroll when its too small for the current screen?". The only way I know of doing that in encapsulating all your interface into a single UIView, and changing its sized in the viewDidLoad/viewDidAppear based on the size of the scroll view. Something like this:
func viewDidLoad() {
super.viewDidLoad()
containerViewHeightConstraint.constant = scrollView.frame.size.height
containerViewWidthConstraint.constant = scrollView.frame.size.width
}
I have a UIScrollView which is set up with AutoLayout. I have a constraint on the "Save" button from the bottom of the button to the bottom of the scrollview, set to 0. The scrollview also has a bottom constraint of zero to the superview. Meaning, that the Save button SHOULD be 0 pixels away from the bottom, and even says so on the attributes inspector (see screenshot). How come, when I run the project, or even view from the storyboard, that this button is NOT at the bottom of the screen? Why is the save button refusing to align on the bottom of the scrollview and thus the bottom of the screen?
According to this article: https://www.natashatherobot.com/ios-autolayout-scrollview/ , the best way to deal with scrollview is to make sure only one view (we will call this contentView) is within the scrollview. Place all the subviews within contentView, and the trick is to use equal height and width from the scrollview to that contentView. I was able to solve my issue that way.
I have to do a form in my application with dynamic content (it comes for a web service). So, I need a scroll for the case there are many textfields and there not fit in the screen. And under of all the textfields I need a button to save the info. My problem is that if there are few textfields (that fit in the screen) the button have to appear at bottom of the screen, and not under the last textfield.
I'm using autolayout programmaticaly to add the constraints of the textfields and add them in the view one under the previous one, but I don't know what constraints I have to set to the save button.
I have uploaded two images to explain that:
http://i.stack.imgur.com/KaPp0.png
In the first image I have only two textfields, that fit in the screen, so the screen not scroll and the save button appear at the bottom of the screen.
http://i.stack.imgur.com/SqVve.png
In this second image, there are many textfields, so the screen need to scroll and the save button will be under the textfields (at 20 pixels or something like that), and not at bottom at screen.
Do you can help me? Thanks for all.
Try adding below constraint to your save button -
1) Vertical space constraint to your last added UITextfield
2) Center horizontal constraint to your content view
3) Height and width constraint
Or
1) Bottom constraint to your content view
2) Center horizontal constraint to your content view
3) Height and width constraint
4) your last added textfield bottom constraint to Save button
Similar to Mail.app where you can scroll the cells side to side, I want to be able to do it in my app using Storyboards and UIScrollView with my UITableViewCell.
I add some buttons to the contentView of my cell, and then UIScrollView with an embedded UIView on top of that to contain the main portion of the cell. I then add a label to that.
I understand that scroll views in Storyboard work by specifying constraints to show what the contentSize of the scroll view should be.
So I position the UIView in the UIScrollView to be the same width and height of the scroll view, but give it a trailing constraint of say 50pt to allow the scroll view to scroll. When I run it I can then move the cell to the left to reveal the buttons.
But to get it work in the other direction I have no idea. If I add a leading constraint it actually moves the cell to begin with away from the left, offsetting the cell to begin with when it should be left to the user to scroll it. It works fine other than initially being pushed over.
I created a sample project showing it here: http://cl.ly/2i3m1W2T0i3C
Like I said I just can't seem to figure out how to get it to scroll in both directions.
Try setting the contentView of the scrollView with width higher than the scrollView itself.
Something like:
Assuming your scrollView.frame is (0,0,100,100)
[scrollView setContentSize:CGSizeMake(300,100)];
place your table view, let a part of your view out of the screen and check that case: