在 iOS 6 上使用自动布局在 ScrollView 中嵌入 ImageView

Posted 2023-02-27

【中文标题】在 iOS 6 上使用自动布局在 ScrollView 中嵌入 ImageView

【英文标题】：Embed ImageView in ScrollView with Auto Layout on iOS 6

【发布时间】：2012-09-27 10:57:35

【问题描述】：

我正在尝试使用具有自动布局的新 ios 6 SDK 制作非常简单的元素。 我有一个 ImageView 并将其嵌入到 ScrollView 中。 （一切都使用 Interface Builder 构建）。 .png 文件已设置，imageView 模式设置为“左上角”。

实施：

#import "ImaginariumViewController.h"

@interface ImaginariumViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end

@implementation ImaginariumViewController

- (void)viewDidLoad

    [super viewDidLoad];
    self.scrollView.contentSize = self.imageView.image.size;
    self.imageView.frame =
    CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);


@end

当我运行应用程序时，图像没有滚动。在关闭自动布局（使用支柱和弹簧）的情况下做同样的事情，我正在滚动。 我想问题出在约束上。有人可以帮帮我吗？

【参考方案1】：

我刚刚在更新的教程中遇到了同样的问题。我尝试以编程方式删除约束、诅咒并用头撞墙 - 不走运。

然而，大约 5 分钟前，我尝试了一些解决了我遇到的另一个问题的方法，并且，ta da！ UIScrollView 又开始工作了！解决方案是将设置 UIScrollView contentSize 属性的旧代码移动到 viewDidAppear 的实现中，而不是 viewDidLoad：

- (void)viewDidAppear:(BOOL)animated 
    [super viewDidAppear:animated];
    self.theScroller.contentSize=CGSizeMake(200.0,2000.0);

我希望这可以帮助其他人遇到自动布局出现的一些问题。

【讨论】：

这行得通，谢谢！真的很奇怪，Apple 没有在 iOS 6 文档中提供这方面的信息。问题可能是因为约束设置晚于 -viewDidLoad 被调用（虽然它来自故事板，但它应该在 awakeFeomNib 上设置，早于 viewDidLoad 调用，据我所知）。

虽然在 scrollView 内缩放 imageView 还有另一个问题。

天哪，真烦人。浪费了这么多时间！一旦它从 viewDidLoad 移动到 viewDidAppear ，它就可以正常工作。谢谢约翰！

这按预期工作。但我想知道是否有办法在 viewDidAppear 中更改它之前设置 UIScrollView 的 contentSize（启用 autoLayout）。当我从 viewDidAppear 方法中删除代码时，我无法让它工作......

工作就像一个魅力该死的人，我在这个问题上浪费了 2 天

【参考方案2】：

Autolayout 一开始可能会让人很困惑。您实际上不想在任何地方设置滚动视图的 contentSize 。使用纯自动布局方法，滚动视图设置自己的内容大小。请参阅iOS 6 release notes 中有关自动布局和UIScrollView 的部分：

对滚动视图的子视图的约束必须导致 要填充的大小，然后将其解释为 滚动视图。 （这不应与 用于自动布局的 intrinsicContentSize 方法。）

请注意，这意味着对滚动视图的子视图的约束必须设置明确的宽度和高度，并且不能使用根据滚动视图的各个方面而变化的宽度。

这里的第二个错误是你将UIImageView的frame设置为图片的大小。使用自动布局，这也是不必要的。 UIImageView 实际上有一个intrinsicContentSize，它是底层图像的大小。 （要改变这一点，您应该设置具有高优先级的宽度和高度约束）这意味着使用自动布局将图像放置在滚动视图中并让它滚动正确的代码应该如下：

** nothing at all!!! **

但是您仍然需要注意一些事情，这可能会导致您的图像看起来无法滚动，并且提示在前面链接的发行说明中：

请注意，您可以使滚动视图的子视图显示为浮动 （不滚动）通过创建约束来覆盖其他滚动内容 在视图和滚动视图的子树之外的视图之间，例如 滚动视图的超级视图。

即如果您在界面生成器中设置约束并将图像视图约束到层次结构中滚动视图上方的视图，它将影响视图的滚动显示方式。疯了！

快乐编码...

【讨论】：

谢谢。您关于将图像视图设置为具有高优先级宽度/高度的注释帮助了我

嘿@jackslash 想知道您是否知道如何在视图和滚动视图的超级视图之间创建约束（例如）。我已经尝试了一段时间，但不知道该怎么做。

@Ants 这对我来说听起来像是一个全新的问题！如果您在此处创建一个链接，以便我看到它。

这应该是公认的答案。约翰的回答主要是一个 hack，可能会打破你的限制。

我发现以下教程很有帮助：***.com/questions/19112189/… 该方法与 jackslash 的方法相似（或相同）。