UIScrollView does not work with automatic loading (using multiple images)

Question

We are going to develop a project in ios, so I am studying automatic layout with scrollview, it works fine when I added one image. When I try to add several images, it became very strange to me that the first image was stretched for a long time and overlapped with the 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 a way out !!!

Answer 1

The size of the scroll area scrollView will be set by the restrictions of its subzones.

You have 2 restrictions that you can use to indicate the height of the scrollable area:

• "V:|-415-[imageView]|"

  This tells Auto Layout to place your image at 415 points from the top of its supervisor and put 0 points from the bottom of its supervisor. It does not determine the height, but Auto Layout will use the height of the image contained in the imageView, without any other restrictions. Note that the View image can be stretched, if necessary, to meet other restrictions.

• "V:|[imageView1]-150-|"

  This tells the auto layout to place your image at 0 points from the top of its supervisor and 150 points from the bottom of its supervisor. He does not determine the height. Because of this, one of the images can be stretched in Auto Layout to satisfy both limitations.

Instead, you should provide information on how the images are spaced apart. For instance:

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

If you add these images one at a time, you do not need to specify this at a time. You can add the following restrictions:

"V:|-20-[imageView1]"

"imageView1 - 20 points from the top of the supervisor"

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

"imageView 20 pips below imageView1"

"V:[imageView]-20-|"

"imageView - 20 points from the bottom of the supervisor"

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

---

You will have a similar problem with your widths. You have limited both images on both sides of the supervisor:

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

Because of this, Auto Layout will stretch one of your images to fit the constraints. Only the widest image should be used to indicate the width of the scrollView. All others should be limited only to the left edge of the supervisor and lower the end | .

Again, if you add these images one at a time, and you don’t know what is the widest until you have added them, keep track of the widest that you have seen so far and limit the images to the left only. Then, when you're done, add a constraint to set the width of the scroll area based on the widest view:

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

Answer 2

What exactly do you want to achieve? If you want to have a list of images, you should use a UITableView . But in any case, your code will look something like this:

 [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:|[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]|" options:0 metrics: 0 views:viewsDictionary]]; [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageView1]" options:0 metrics: 0 views:viewsDictionary]];