how to add an imageView to a scrollView in a collectionViewCell

0
votes

I have a collectionViewCell which displays an image. I have added a scrollView to that cell and storyboard constraints to pin the scrollView to the top, bottom, leading, trailing of superview.

I have then added an imageView in storyboard as a subview of the scrollView and added the similar 4 constraints to the imageView's superview which is the scrollView.

At this stage there is a red warning in storyboard because the scrollView needs constraints for scrollable height and width.

That can be silenced by setting the width and height of the imageView to equal to the cell's containerView. i.e. the superview of the scrollView.

When I run the image displays correctly. However when I zoom in by pinching, there is an awkward margin at the top and bottom of the imageView when I pan around.

I assume this is because the size of the imageView in height is larger than the image so when I zoom, the area above and below the image is also in the contentSize of the scrollView.

The imageView is set to aspectFit.

Not sure what the best way to resolve this is.

Edit 1

Here are two screen shots. I've made the imageView's background view pink to demonstrate what is happening. The first image is the correctly displayed image prior to zooming. In the second image the image is zoomed and panned. I want to eliminate the border at the top when I zoom in.

Edit 2,

I have also tried adding a fixed width and height constraint to the imageView which gets updated when the image is added. Everything works fine in this case except the imageView is positioned at the top left corner of the scrollView and not centered.

enter image description here

enter image description here

1
iosswiftxcodeuiscrollview
Remove the equal heights or width. Probably keep one of them and add an image as a placeholder to silence he warning. Run and see what you think – agibson007
removed equal height constraint and added a placeholder. same issue with the top and bottom margin when I zoom in. – alionthego
Can you an image and what you want? – agibson007
If your imageview isn't centered correctly, then you should add constraints for "centered vertically", "centered horizontally", or both. – MegaTyX
You can't add centering constraints. if you do when you zoom the imageView displaces and cannot be moved back – alionthego

1 Answers

0
votes

I'm not sure exactly, but it sounds like your scrollview contents are too ambiguous. Think of the UIScrollView like a window. Things you can move the prospective in the window. Things can be bigger or smaller as you move towards the window and pan when you move left to right. But in order to display correctly, the things inside of the window need to have some kind of consistency, such as size, so that the window can scale to prospective.

From a software design prospective, you should really be asking yourself. If you set a UIImageView to be equal to the superview's height and width, which is the scrollview, and then that superview's height and width are equal to that superview, the UICollectionViewCell, then why even have the UIScrollView in the first place?

Personally, I would be setting constraint outlets for the imageview and updating the height and widths programmatically, or set a constraint that sets ratio then just update either the height or width contraint. Set a default value for the constraints and work up from there.

Keep us updated on how it goes.