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

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

您有 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 点”

当您将所有图像视图相互约束以及滚动视图的顶部和底部时，自动布局将能够计算滚动视图的高度。

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

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

因此，自动布局将拉伸您的一张图像以满足限制。仅应使用最宽的图像来指定滚动视图的宽度。所有其他的都应该只限制在超级视图的左边缘，并保留尾部|。

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

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