UIScrollView 无法以编程方式使用自动布局（使用多个图像）

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

你到底想达到什么目的？如果你想有图像列表，你应该使用 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]];

Answer 2

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

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

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

这会告诉自动布局将您的图像放置在距其父视图顶部 415 点的位置，并将其放置在距其父视图底部 0 点的位置。它没有指定高度，但在没有其他限制的情况下，自动布局将使用 imageView 中包含的图像的高度。请注意，如有必要，可以拉伸 imageView 以满足其他约束。
"V:|[imageView1]-150-|"

这会告诉自动布局将您的图像放置在距其父视图顶部 0 磅和距其父视图底部 150 磅的位置。它没有指定高度。因此，Auto Layout 可以自由拉伸其中一张图像以满足两个约束。

相反，您应该提供有关图像之间的相对间距的信息。例如：

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

如果您一次添加这些图像，则不必一次指定。您可以像这样添加约束：

"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"

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

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

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

因此，自动布局将拉伸您的其中一张图像以满足约束条件。只应使用最宽的图像来指定滚动视图的宽度。所有其他的都应该只被限制在超级视图的左边缘，并且不要留下尾随的 |.

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

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

UIScrollView 无法以编程方式使用自动布局（使用多个图像）

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

xcode

objective-c

uiscrollview

ios

autolayout