UIScrollView不能以编程方式使用Autolayout（使用多个图像）

Question

我们将在ios中开发一个项目，所以我正在学习一个带有scrollview的自动布局，当我添加一个图像时工作正常，当我试图添加多个图像时，我觉得非常奇怪第一张图像被拉长，并与下一张图像重叠。这是我的代码

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]];

我输出了!!!

Answer 1

scrollView的可滚动区域的大小将由其子视图的约束设置。

您有2个约束可用于指定可滚动区域的高度：

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

   这告诉自动布局将图像从其超级视图的顶部放置415点，并将其从超级视图的底部放置0点。它没有指定高度，但是自动布局将使用imageView中包含的图像的高度，没有其他约束。请注意，如果需要，可以拉伸imageView以满足其他约束。

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

   这告诉自动布局将图像从其超级视图顶部放置0点，从超级视图底部放置150点。它没有指定高度。因此，自动布局可以自由拉伸其中一个图像以满足两个约束条件。

相反，您应该提供有关图像相对于彼此间隔的信息。例如：

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

如果要一次添加一个图像，则不必一次指定。您可以添加如下约束：

"V:|-20-[imageView1]"

“imageView1距离超级视图顶部20点”

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

“imageView比imageView1低20分”

"V:[imageView]-20-|"

“imageView是superview底部20点”

当您将所有图像视图相互约束并限制在scrollView的顶部和底部时，自动布局将能够计算scrollView的高度。

---

你的宽度也会遇到类似的问题。您已将两个图像限制在superView的两侧：

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

因此，自动布局将拉伸您的一个图像以满足约束。只应使用最宽的图像来指定scrollView的宽度。所有其他人只应限制在超级视图的左边缘，并且不要跟踪尾随|。

同样，如果您要逐个添加这些图像，并且在将所有图像全部添加之前不知道最宽的图像，请跟踪到目前为止看到的最宽的图像，并仅将图像限制为左边缘。完成后，添加一个约束，根据最宽的视图设置滚动区域的宽度：

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

Answer 2

您想要达到什么目标？如果您想拥有图像列表，则应使用UITableView。但无论如何，你的代码看起来更像是这样：

[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]];