在具有特定约束的滚动视图中显示图像（使用自动布局）

我想在我的视图控制器中显示标题和图像下方。 我的约束是：

• 标签可以在屏幕顶部的50px处
• 标签可以有一个或多个行
• 图像可以在我的标签的50px
• 图像必须具有屏幕的宽度
• 滚动视图必须根据所有这些元素的大小进行滚动

我有一个滚动视图的视图控制器：

– 视图控制器

– -视图

——滚动视图

———容器视图

– – – – – – 标签

– – – – – – 图片

我想要使​​用故事板和自动布局。

我已经成功地将标签正确地alignment，但是我无法在标签的50px处显示图像并保持它的比例。

如果我使用“方面适合”或“比例填充”imageview，在这种情况下，标签和图像是在我想要的50px。

方面适合：

随着规模填补：

但是，如果我使用“方面填充”，我不明白如何显示图像。

使用方面填充：

我在这个问题上已经有3天左右的时间了，这让我发疯。 我也尝试使用隐形的“间隔”视图…我没有find解决scheme。

我用Xcode 6快速开发。

编辑1：定位的形象是与vacawamabuild议解决

为您的imageView和一个属性添加@IBOutlet到您的视图控制器以跟踪约束：

@IBOutlet weak var imageView: UIImageView! var aspectRatio:NSLayoutConstraint? 

然后添加一个新的图像：

 let tree = UIImage(named: "WinterTree.jpg")! imageView.image = tree aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1) imageView.addConstraint(aspectRatio!) 

编辑2：但之后，我的看法不再滚动

我的容器视图的约束：

我删除了底部的约束，以适应容器的视图的高度的内容，但我得到一个错误：

Answer 1

问题是imageView的高度没有改变，所以图像只集中在旧的框架上。 视图模式设置（Aspect Fit，Scale To Fit或Aspect Fill）不会改变imageView的高度。 你需要一个约束你的imageView的高度，但是这个约束会根据你的图像而改变。

我能做到这一点，做到以下几点。

1. 我将图像的宽度限制为视图的宽度。

2. 我添加了一个AspectRatio约束到图像。 这设置了宽度与高度的比率，并且由于我已经指定了图像的宽度，所以现在将完全指定高度。 当我加载一个新的图像时（因为不同的图像有不同的长宽比），我希望能够在代码中更新这个约束，但是我只能从代码而不是multiplier改变constant 。 所以，为了解决这个问题，我通过在属性检查器中检查占位符来创build一个占位符约束。 这意味着这个约束将在构build时被删除。

3. 在代码中，当我设置imageView的图像时，我添加了一个约束，该约束将imageView的宽度设置为具有乘数的imageView的高度。 这取代了Interface Builder中设置的宽高比约束。

   首先，为你的@IBOutlet和一个属性添加一个@IBOutlet到你的视图控制器来跟踪约束：

    @IBOutlet weak var imageView: UIImageView! var aspectRatio:NSLayoutConstraint? 

   然后添加一个新的图像：

    let tree = UIImage(named: "WinterTree.jpg")! imageView.image = tree aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1) imageView.addConstraint(aspectRatio!) 

   在更改图像时，请先删除以前的aspectRatio约束，然后再添加一个新的：

    imageView.removeConstraint(aspectRatio!) 

---

我实现了类似于你的布局的东西。 我的项目有一个button来代替你的标签，但是它是相似的。 当用户按下button时，我的应用会用完全不同的高宽比replace图像。 这里是文档大纲和我的项目的所有约束。

---

 First Item: WinterTree1.jpg.Width Relation: Equal Second Item: WinterTree1.jgp.Height Constant: 1 Priority: 1000 Multiplier: 0.68 First Item: WinterTree1.jpg.Leading Relation: Equal Second Item: ContentView.Leading Constant: 8 First Item: ContentView.Bottom Relation: Equal Second Item: WinterTree1.jpg.Bottom Constant: 8 First Item: ContentView.Trailing Relation: Equal Second Item: WinterTree1.jpg.Trailing Constant: 8 First Item: WinterTree1.jpg.Top Relation: Equal Second Item: Button.Bottom Constant: 20 First Item: Button.Top Relation: Equal Second Item: ContentView.Top Constant: 20 First Item: ContentView.Center X Relation: Equal Second Item: Button.Center X Constant: 0 First Item: Superview.Trailing Relation: Equal Second Item: ContentView.Trailing Constant: 0 First Item: ContentView.Leading Relation: Equal Second Item: Superview.Leading Constant: 0 First Item: Superview.Bottom Relation: Equal Second Item: ContentView.Bottom Constant: 0 First Item: ContentView.Top Relation: Equal Second Item: Superview.Top Constant: 0 First Item: ContentView.Width Relation: Equal Second Item: Superview.Width Constant: 0 First Item: Scroll View.Leading Relation: Equal Second Item: Superview.Leading Constant: 0 First Item: Scroll View.Top Relation: Equal Second Item: Superview.Top Constant: 0 First Item: Superview.Trailing Relation: Equal Second Item: Scroll View.Trailing Constant: 0 First Item: Bottom Layout Guide.Top Relation: Equal Second Item: Scroll View.Bottom Constant: 0