ios - 使用自动布局的带有缩放 UIImageView 的 UIScrollView

Question

考虑一个带有单个 subview 的 UIScrollView。 subview 是具有以下大小限制的 UIImageView:

• 它的高度必须等于 UIScrollView 的高度。
• 它的宽度必须是根据 UIImageView 的高度按比例缩放的图像宽度。

预计 UIImageView 的宽度将大于 UIScrollView 的宽度，因此需要滚动。

图像可能在 viewDidLoad 期间设置(如果已缓存)或异步设置。

如何使用自动布局实现上述内容，尽可能多地使用界面构建器？

到目前为止我做了什么

基于此answer我这样配置我的 Nib :

• UIScrollView 固定在其父 View 的边缘。
• UIImageView 固定在 UIScrollView 的边缘。
• UIImageView 具有占位符固有大小(以避免可滚动内容大小歧义错误)

正如预期的那样，结果是 UIImageView 的大小调整为 UIImage 的大小，并且 UIScrollView 水平和垂直滚动(因为图像比 UIScrollView 大)。

然后我尝试了各种没有用的东西:

• 加载图像后，手动设置 UIImageView 的框架。
• 为 UIImageView 添加宽度约束，并在加载图像后修改其值。这会使图像更大(？!)。
• 在加载图像后设置zoomScale。没有明显的效果。

没有自动布局

下面的代码完全符合我的要求，尽管没有自动布局或界面生成器。

- (void)viewDidLoad
{
    {
        UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
        scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self.view addSubview:scrollView];
        self.scrollView = scrollView;
    }

    {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self.scrollView addSubview:imageView];
        self.scrollView.contentSize = imageView.frame.size;
        self.imageView = imageView;
    }
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self layoutStripImageView];
}

- (void)layoutStripImageView
{ // Also called when the image finishes loading
    UIImage *image = self.imageView.image;
    if (! image) return;

    const CGSize imageSize = image.size;
    const CGFloat vh = self.scrollView.frame.size.height;
    const CGFloat scale = vh / imageSize.height;
    const CGFloat vw = imageSize.width * scale;

    CGSize imageViewSize = CGSizeMake(vw, vh);
    self.imageView.frame = CGRectMake(0, 0, imageViewSize.width, imageViewSize.height);
    self.scrollView.contentSize = imageViewSize;
}

我非常努力地转向自动布局，但这并不容易。

Answer 1

在自动布局机制下，理想情况下 UIScrollView contentSize 完全由约束决定，而不是在代码中显式设置。

所以在你的情况下:

• 创建约束以将 subview 固定到 UIScrollView。约束必须确保 subview 和 ScrollView 之间的边距为 0。我看到了你已经尝试过了。

• 为您的 subview 创建高度和宽度约束。否则，UIImageView 的固有大小决定其高度和宽度。在设计时，这个大小只是一个让 Interface Builder 满意的占位符。在运行时，它将被设置为实际图像大小，但这不是您想要的。

• 在 viewDidLayoutSubviews 期间，将约束更新为实际内容大小。您可以通过更改 constant 属性直接执行此操作的高度和宽度约束，或调用 setNeedsUpdateConstraints 并覆盖 updateConstraints 以执行相同的操作。

这确保系统可以仅从约束中导出 contentSize。

我已经完成了上述操作，并且它在带有 UIScrollView 和自定义 subview 的 iOS 6 和 7 上可靠地工作，因此它也应该适用于 UIImageView。特别是如果您不将 subview 固定到 ScrollView ，缩放将在 iOS 6 中不稳定。

您也可以尝试创建直接引用 ScrollView 的高度和宽度的倍数的高度和宽度约束，但我还没有尝试过这种其他方法。