ios - 在具有特定约束的 ScrollView 中显示图像(使用自动布局)

Question

我想在我的 View Controller 中显示标题和图像下方。我的约束是:

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

我有一个带有 ScrollView 的 View Controller :

- View Controller

--- View

------ ScrollView

--------容器 View

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

------------图片

我想使用 Storyboard和自动布局。

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

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

长宽比:

用刻度填充:

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

使用纵横比填充:

我已经处理这个问题大约 3 天了，这让我很抓狂。我也尝试使用不可见的“间隔” View ......我找不到解决方案。

我使用 Xcode 6 快速开发。

编辑 1:使用 vacawama 建议解决图像定位问题

为您的 imageView 添加一个 @IBOutlet 并为您的 View Controller 添加一个属性以跟踪约束:

@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:但是之后，我的 View 不再滚动

我的容器 View 的约束:

为了让容器 View 的高度适应内容，我删除了底部约束，但是我得到了一个错误:

Answer 1

问题是 imageView 的高度没有改变，所以图像只是在旧框架上居中。 View 模式设置(Aspect Fit、Scale To Fit 或 Aspect Fill)不会更改 imageView 的高度。您需要对 imageView 的高度进行限制，但此限制会根据您的图像而改变。

我能够通过执行以下操作来完成这项工作。

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

2. 我向图像添加了 AspectRatio 约束。这设置了宽度与高度的比例，并且由于我已经指定了图像的宽度，所以现在将完全指定高度。我曾希望能够在加载新图像时更新代码中的此约束(因为不同的图像具有不同的纵横比)，但我只能从代码中更改 constant 而不是 乘数。因此，为了解决这个问题，我通过在 Attributes Inspector 中检查 Placeholder 将其设为 Placeholder 约束。这意味着该约束将在构建时移除。

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

   首先，为您的 imageView 添加一个 @IBOutlet 并为您的 View Controller 添加一个属性以跟踪约束:

   @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 约束之前删除以前的 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