How to assign constraints to a Scrollview which covers part of the screen only?

UI Frameworks UIKit UIKit

uncletr OP

Created Dec ’19

Replies 20

Boosts 0

Views 14k

Participants 2

I want to use a Scrollview on the middle 2/3 of the screen so I did the following:

1) I added a BaseView UIView to the middle 2/3 of my MainViewController and set the constraints to the following:

leading =0

trailing =0

top to safe area = 150

bottom to safe area = 150

2) I added a MyScrollView inside the BaseView and set the constraints as follows:

Note: All MyScrollview constraints remain RED after setting these constraints :>(

leading = 0

trailing = 0

top = 0

bottom = 0

3) I added a MyDataView UIView object inside the MyScrollView . The MyDataView starts at (0,0) and has a size of 500x500. I tried setting constraints on MyDataView to the following values but the top and leading constraints remain RED, most likely because the MyScrollView constraints are RED (see 2 above)

top=0

leading=0

width=500

height=500

4) In the viewDidLoad function I added the following:

ScrollView.delegate = self

ScrollView.contentsize = MyDataView.frame.size

5) I added various objects (buttons, labels, etc.) in the MyDataView UIView and tried to set constraints on these objects but the constraints are all RED as well.

Questions:

1) I am setting up the ScrollView properly so it can be used for 2/3 of the screen area only?

2) How can I set valid constraints for the objects placed in the MyDataView and have them be a nice BLUE color?

Answered by Claude31 in 402000022

The point is how constraints are set for the contentView.

- remove the authorising constraints

- control-drag to scrollView and set top, leading, bottom, trailing

- change values to zero for those which were not

- add constraints on contentView, for width and height

Error (red badges) disappear. There may remain some harmless yellow warnings though.

Boost

Claude31 OP

Jan ’20

I described everything.

I add the constraints by ctrl drag from the scrollView to its superview and select top, trailing…

I do not use the pinn approach with Add new constraints.

Is that your point ?

To move further, I would need to get your complete project.

Could you post a mail address for a minute, so that we can exchange files easily ?

uncletr OP

Jan ’20

I just sent you an email with the sample project.

Thanks for your help ... again! :>)

Claude31 OP

Jan ’20

Accepted Answer

The point is how constraints are set for the contentView.

- remove the authorising constraints

- control-drag to scrollView and set top, leading, bottom, trailing

- change values to zero for those which were not

- add constraints on contentView, for width and height

Error (red badges) disappear. There may remain some harmless yellow warnings though.

uncletr OP

Jan ’20

Claude,

Thanks for the information you sent me. I see how you were successsful in assigning all BLUE constraints to the Content View by assigning the following constraints to the Content View:

Top = 0 to the Scrollview (which is the SuperView)

Leading = 0 to the ScrollView (which is the SuperView)

Trailing = 0 to the ScrollView (which is the SuperView)

Bottom = 0 to the ScrollView (whcih is the SuperView)

Width = 700

Height = 700

I thought having Top, Leading, Trailing and Bottom constraints with a value of "0" means the Content View would always be the same size as the ScrollView dimensions. As a result, I still do not understand how we can can also have Width and Height constraints of 700 to be valid at the same time. This would seem to mean the Content View dimension would be greater than the ScrollView dimensions, which seem to contradict all of the "0" constraints which are set.

Anyway, with your help, it seems to work, although I am still confused as to how to interpret the meaning of the constraints

uncletr OP

Jan ’20

After implementing a scrollview into my application, based on the information provided, I was able to set constraints on the buttons/labels located within the ContentView now.

However, since the ContentView width and height have constraints set on them, then whenever I try to change the width (or height) of the ContentView window inside the code, then the width/height constraints are reapplied each time the viewWillLayoutSubviews method is called by the system. I had to set IBOutlets to the width/height constraints and ensure I set these constraint values in the code whenever I change the ContentView width (or height) values in the code.