显示在特定约束的滚动视图的图像（带自动布局） [英] Display an image in a scrollview with specific constraints (with auto layout)

问题描述

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

I would like display a title and below a image in my view controller. My constraints are :

• 的标记可以是在屏幕的顶部的50像素


• 标签可以有一个或多个行


• 图像能在我的标签50像素


• 图像必须有屏幕
的宽度

• 滚动视图必须根据所有这些元素的大小滚动

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

I have a view controller with a scroll view :

-view控制器

---观

------滚动视图

------scroll view

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

---------container view

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

------------label

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

------------image

我想用故事板和经销商的布局。

I want use storyboard and auto layout.

我已经成功了正确对齐的标签，但我无法从标签50像素显示图像，并保持它的比例。

I have succeeded to align the label correctly, but I am unable to display the image at 50px of the label and keep it ratio.

如果我使用方面配合或尺度以补为ImageView的，在这种情况下，在标签和图像是在50像素像我想要

If I use "aspect fit" or "scale to fill" for the imageview, in this case, the label and the image are at 50px like I want.

纵横适合：

随着规模填写：

但是，如果我用的方面补，我不明白如何显示图像。

But if I use "aspect fill", I don't understand how the image is displayed.

纵横填：

它已经3天了，我在这个问题上，这让我疯了。
我也试过用无形的间隔的意见...
我没有找到解决方案。

It has been about 3 days that I'm on this issue, it make me crazy. I tried also to use invisible "spacer" views... I don't find the solution.

我发展迅速与X code 6。

I develop in swift with Xcode 6.

修改1：定位图像解决与vacawama建议

添加@IBOutlet为您的ImageView和你的视图控制器属性来跟踪约束：

Add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:

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

然后添加一个新的形象：

Then add a new image:

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：但是之后，我的看法是不再进行滚动

我的容器视图的约束：

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

I removed the bottom constraint in order to the height of the container view adapts to the content, but I get an error :

推荐答案

的问题是ImageView的高度是没有得到改变，所以图像只是集中在旧的框架。视图模式设置（看点飞度，缩放以适合，或者看点填充）不会改变你的ImageView的高度。您需要为您的ImageView的高度约束，但这种约束会根据你的形象上改变。

The problem is that the height of the imageView is not getting changed, so the image is just centered over the old frame. The view mode setting (Aspect Fit, Scale To Fit, or Aspect Fill) does not change the height of your imageView. You need a constraint for the height of your imageView, but this constraint will change depending on your image.

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

I was able to make this work by doing the following.

1. 我约束的图像的宽度的视图的宽度

1. I constrained the width of the image to the width of the view.

我添加了一个ASPECTRATIO约束的形象。此设置宽度与高度的比率，因为我已指定的图像的宽度，高度现在将完全指定。我曾希望能更新code这个约束时，我装一个新的形象（因为不同的图像具有不同的纵横比），但我只能修改恒从code，而不是乘数。因此，要解决这个问题，我通过检查占位符在此做一个占位符约束的属性检查器的。这意味着，这个约束将在构建时被删除。

I added an AspectRatio constraint to the image. This sets the ratio of the width to the height, and since I have specified the width of the image, the height will now be fully specified. I had hoped to be able to update this constraint in code when I loaded a new image (because different images have different aspect ratios), but I could only change the constant from code and not the multiplier. So, to get around this, I made this a Placeholder constraint by checking Placeholder in the Attributes Inspector. This means that this constraint will be removed at build time.

在code，当我设置了ImageView的形象，我再补充一点设置ImageView的宽度与一乘数的ImageView的高度约束。这需要被在Interface Builder设定纵横比约束的地方。

In code, when I set the image for the imageView, I add a constraint that sets the width of the imageView to the height of the imageView with a multiplier. This takes the place of the aspect ratio constraint that was set in Interface Builder.

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

First, add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:

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

然后添加一个新的形象：

Then add a new image:

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!)

当是时候改变你的形象，加上之前删除previous的aspectRatio约束一个新的：

When it is time to change your image, remove the previous aspectRatio constraint before adding a new one:

imageView.removeConstraint(aspectRatio!)

我实现了类似布局的东西。我的项目在地方的标签的按钮，但除此之外，它是相似的。当用户presses按钮，我的应用程序使用一个与一个完全不同的纵横比替换图像。这里是文档大纲和所有的约束，从我的项目。

---

I implemented something similar to your layout. My project has a button in place of your label, but otherwise it is similar. When the user presses the button, my app replaces the image with one with an entirely different aspect ratio. Here is the Document Outline and all of the constraints from my project.

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

这篇关于显示在特定约束的滚动视图的图像（带自动布局）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！