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

Question

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

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

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

-view controller

---视图

------滚动视图

---------容器视图

------------标签

------------图像

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

我已成功正确对齐标签，但我无法以50px的标签显示图像并保持比例。

如果我使用“纵横比适合”或“缩放以填充”图像视图，在这种情况下，标签和图像都是50px，就像我想要的那样。

使用宽高比：

要填充比例：

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

使用纵横填充：

我在这个问题上已经有3天了，它让我发疯了。 我也尝试使用隐形“间隔”视图...... 我找不到解决方案。

我使用Xcode 6快速开发。

编辑1：使用vacawama建议解决图像定位

为您的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约束。这将设置宽度与高度的比率，并且由于我已指定图像的宽度，现在将完全指定高度。我希望能够在加载新图像时更新代码中的约束（因为不同的图像具有不同的宽高比），但我只能从代码而不是constant更改multiplier。因此，为了解决这个问题，我通过检查属性检查器中的占位符，使其成为占位符约束。这意味着将在构建时删除此约束。

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

   首先，为您的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!)
   

   当需要更改图像时，在添加新图像之前删除先前的aspectRatio约束：

   imageView.removeConstraint(aspectRatio!)
   

---

我实现了与你的布局类似的东西。我的项目有一个按钮代替你的标签，但在其他方面它是相似的。当用户按下按钮时，我的应用程序将图像替换为具有完全不同宽高比的图像。这是文档大纲和我项目中的所有约束。

---



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