CODEWITHSUNDEEP
iosuiscrollviewstoryboard
Ricardo
Ricardo

Reputation: 8291

iOS - weird constraints using scrollview

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.

enter image description here

enter image description here

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

Upvotes: 1

Views: 105

Answers (2)

ColdLogic
ColdLogic

Reputation: 7275

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
}

Upvotes: 0

Shubham
Shubham

Reputation: 570

enter image description hereRicardo: 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.

Upvotes: 1

Related Questions