UIScrollView Does Not Work With Autolayout Programmatically(using more than one image)

Question

We are going to develop a project in ios, So that I am learning a auto layout with scrollview, It's working fine when I added one image, When I am trying to add more than one image, I got very strange thing the first image was stretched long and its overlapping with very next image. Here is my code

UIScrollView *scrollView = [[UIScrollView alloc] init];
UIImageView *imageView = [[UIImageView alloc] init];
[imageView setImage:[UIImage imageNamed:@"2.png"]];

UIImageView *imageView1 = [[UIImageView alloc] init];
[imageView1 setImage:[UIImage imageNamed:@"01.png"]];
[self.view addSubview:scrollView];

[scrollView addSubview:imageView1];
[scrollView addSubview:imageView];

scrollView.translatesAutoresizingMaskIntoConstraints = NO;
imageView.translatesAutoresizingMaskIntoConstraints = NO;
 imageView1.translatesAutoresizingMaskIntoConstraints = NO;

self.imageViewPointer = imageView;
self.imageViewPointer = imageView1;
scrollView.maximumZoomScale = 2;
scrollView.minimumZoomScale = .5;
scrollView.delegate = self;

NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(scrollView,imageView,imageView1);
NSLog(@"Current views dictionary: %@", viewsDictionary);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]|" options:0 metrics: 0 views:viewsDictionary]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-415-[imageView]|" options:0
                                                                   metrics: 0 views:viewsDictionary]];

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView1]-20-|" options:0 metrics: 0 views:viewsDictionary]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageView1]-150-|" options:0 metrics: 0 views:viewsDictionary]];

and I got output!!!

Answer 1

The size of your scrollView's scrollable area will be set by the constraints of its subviews.

You have 2 constraints which can be used to specify the height of the scrollable area:

1. "V:|-415-[imageView]|"

   This tells Auto Layout to place your image 415 points from the top of its superview and to put it 0 points from the bottom of its superview. It doesn't specify the height, but Auto Layout will use the height of the image contained in the imageView given no other constraints. Note the imageView can be stretched if necessary to meet other constraints.

2. "V:|[imageView1]-150-|"

   This tells Auto Layout to place your image 0 points from the top of its superview and 150 points from the bottom of its superview. It doesn't specify the height. Because of this, Auto Layout is free to stretch one of the images to satisfy both constraints.

Instead, you should provide information on how the images are spaced relative to each other. For example:

"V:|-20-[imageView1]-20-[imageView]-20-|"

If you are adding these images one at a time, you don't have to specify this at one time. You could add the constraints like this:

"V:|-20-[imageView1]"

"imageView1 is 20 points from the top of the superview"

"V:[imageView1]-20-[imageView]"

"imageView is 20 points below imageView1"

"V:[imageView]-20-|"

"imageView is 20 points from the bottom of the superview"

When you have constrained all of the image views to each other and to the top and bottom of the scrollView, Auto Layout will be able to calculate the height of the scrollView.

---

You are going to have a similar issue with your widths as well. You have constrained both of your images to both sides of the superView:

"H:|-20-[imageView]|"
"H:|[imageView1]-20-|"

Because of that, Auto Layout will stretch one of your images to meet the constraints. Only your widest image should be used to specify the width of the scrollView. All of the others should only be constrained to the left edge of the superview and leave off the trailing |.

Again, if you are adding these images one by one and you don't know what the widest is until you've added them all, keep track of the widest one you've seen so far and only constrain the images to the left edge. Then when you are done, add a constraint to set the width of your scroll area based upon the widest view:

"H:|-20-[imageView]-20-|"