UIScrollView使用自动布局缩放UIImageView

时间:2013-10-28 11:39:07

标签: ios uiscrollview uiimageview interface-builder autolayout

UIScrollView with UIImageView

考虑具有单个子视图的UIScrollView。子视图是UIImageView,具有以下大小限制:

  • 其高度必须等于UIScrollView的高度。
  • 其宽度必须是与UIImageView的高度成比例缩放的图像宽度。

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

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

如何使用autolayout实现上述功能,尽可能多地使用Interface builder?

到目前为止我做了什么

基于此answer,我按照以下方式配置了我的笔尖:

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

正如预期的那样,结果是UIImageView的大小设置为UIImage的大小,UIScrollView水平和垂直滚动(因为图片大于{{} 1}})。

然后我尝试了各种不起作用的东西:

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

没有自动布局

以下代码完全符合我的要求,尽管没有自动布局或界面构建器。

zoomScale

我正在努力转向自动布局,但这并不容易。

3 个答案:

答案 0 :(得分:11)

在自动布局规则下,理想情况下,UIScrollView contentSize 完全由约束决定,而不是在代码中明确设置。

所以在你的情况下:

  • 创建约束以将子视图固定到UIScrollView约束必须确保子视图和滚动视图之间的边距为0.我看到你已经有了试过这个。

  • 为子视图创建高度和宽度约束。否则,UIImageView的内在大小决定了它的高度和宽度。在设计时,此大小只是一个占位符,以保持Interface Builder的快乐。在运行时,它将被设置为实际图像大小,但这不是您想要的。

  • viewDidLayoutSubviews期间,将约束更新为实际内容大小。您可以通过更改高度和宽度约束的constant属性直接执行此操作,或致电setNeedsUpdateConstraints并覆盖updateConstraints也可以这样做。

这可确保系统仅从约束中派生contentSize

我已完成上述操作,并且在iOS 6和7上可靠地使用UIScrollView和自定义子视图,因此它也适用于UIImageView。特别是如果你没有将子视图固定到滚动视图,iOS 6中的缩放将会很紧张。

您也可以尝试创建直接引用滚动视图高度和宽度的倍数的高度和宽度约束,但我还没有尝试过其他方法。

答案 1 :(得分:2)

只有在代码中实例化视图时,才需要

translatesAutoresizingMaskIntoConstraints 。如果您在IB中实例化它,则默认情况下禁用

在我看来,UIImageView应该填充ScrollView。稍后我会尝试将scrollview的缩放设置为适合您的值,这样图像只能朝一个方向平移

答案 2 :(得分:0)

在我的情况下,它是一个全宽度的UIImageView,它有一个定义的高度约束,导致问题。

我在UIImageView上设置了另一个约束,其宽度与UIScrollView的宽度相匹配,因为它在界面构建器中然后添加了一个出口到UIViewController:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *imageViewWidthConstraint;

然后在viewDidLayoutSubviews上我更新了约束:

- (void) viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    self.imageViewWidthConstraint.constant = CGRectGetWidth(self.scrollView.frame);
}

这似乎可以解决问题。