Cannot set constraints for an image view inside a scroll view

Hi,

I was not able to set constraints for an image view inside a scroll view in XCode. Any ideas why? Here are the details:

The reason to do this: Xcode complains that the scroll view missing constraints for its "scrollable content", please see attached screen shot.

  • XCode version: 12.5.1
  • macOS: Big Sur.
  • View relationship: The scroll view is the superview of the image view.
  • Tried to use "ctrl drag" between the image view and the scroll view. No constraints options available.
  • The scroll view is in a Collection View cell.

Please see attached screen shot.

  • To clarify 2 things, (1) I was able to set constraints between the scroll view and its superview, i.e. the Content View of the cell. (2) Xcode was not able to fix the "missing constraints" automatically, I tried that.

Add a Comment

Replies

You should show all the constraints you have defined (as listed in the text below). Setting constraints for scroll view is always tricky.

Some rules I apply when creating a scrollview (may need some adaptation in your case):

Create the ScrollView

  • Define its dimensions by constraints relating to the Safe area (or its parent view: the cell)
  • leading = 0
  • trailing = 0
  • top = maybe non zero if you scroll a part of the screen or the cell
  • bottom = 15 (or more if need to leave room for some objects below)
  • you can keep the content layout and frame layout ON

Create a UIView (this is the content View, named View here ; maybe your imageView)

  • Place it inside the scrollView (appears inside Scroll in the object hierarchy)
  • Define the constraints with respect to the scrollView (Superview)
  • leading = 0
  • trailing = 0
  • equalWidth with Scroll: we don't want to scroll horizontally
  • top = 0
  • bottom = 0
  • Above all, do NOT make equal height with Scroll: there would be no more vertical scroll

Define the dimension constraints of the ContentView to correspond to the complete content above which we will scroll (here the image)

  • height = 262 (the size of image height
  • width has been set equal to the width of the scrollView
  • Note: this is necessary to eliminate red warnings from IB

@Claude31 thanks for your response! My main problem is that XCode does not allow me to do the step in your "Create a UIView": "Define the constraints with respect to the scrollView (Superview)" .

I.e. I am able to set constraints for the scroll view, but cannot set any constraints for the image view inside the scroll view.

Please see attached screen shot of my current constraints list of the scroll view.

I built a VC with similar hierarchy as yours (if I got it correctly).

I created constraints for ImageView relative to its scrollView.

I created constraints for both the scrollView to its parent,as described in my previous post.

I added constraints for the image size => this is required to remove the red warnings.

So the full set of constraints is shown below:

Everything OK, no red warning from autoLayout either.

Can I ask what version of XCode are you using? I'm thinking whether it's a bug in XCode. (I am using XCode 12.5.1 on macOS Big Sur, and using Objective-C).

  • Using Version 13.2.1 (13C100). But the pattern I explained was first implemented on Xcode 12 or may be even 10. It is all in IB, so nothing to do with Swift or objC. Did you try to repeat each step as I did ? Specially "added constraints for the image size => this is required to remove the red warnings". Otherwise, have you a sample code you could send ?

  • My problem is that for some reason Xcode does not allow me to "added constraints for the image size". Please see the screen shot I am attaching in the next post.

Add a Comment

Here is the screen shot that shows Xcode disables the constraints setting for the image view inside the scroll view:

@keepsimple That's surprising as I succeeded in doing it without problem.

Could you show the object browser and the cell nib like here:

Here is the creation of the 2 added constraints:

At this stage, you should do the following:

  • in the project, create a new VC in storyboard
  • drag a collectionView inside
  • drag a scrollView in the cell,
  • drag an imageView in the scrollView
  • set constraints as I explained in a previous post.

Do you succeed in adding constraints to the imageView ?

  • if not, try to do the same in a new project ; if it works there, there in a problem in the first project ; otherwise there is a problem in your Xcode
  • if it works, compare for each object in the hierarchy, the attributes inspector and size inspector of the new VC with the one that has problems. Do you see any difference ?

Does it finally work ? If not, please tell the result of the following suggestion:

Do you succeed in adding constraints to the imageView ?

  • if not, try to do the same in a new project ; if it works there, there in a problem in the first project ; otherwise there is a problem in your Xcode
  • if it works, compare for each object in the hierarchy, the attributes inspector and size inspector of the new VC with the one that has problems. Do you see any difference ?