blocks|key|2403384|text|如果你阅读UIImageView上的文档，他们会说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2403385|设置图像属性不会更改UIImageView的大小。调用sizeToFit来调整视图的大小以匹配图像。|blockquote|offset|length|style|BOLD|2403386|entityMap^0|0|R|9|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@$E|M|F|N|G|H]]|9|@]|A|$]]|$1|I|3|-4|5|6|7|O|8|@]|9|@]|A|$]]]|J|$]]

If you read the docs on UIImageView they say:

<blockquote>
 Setting the image property does not change the size of a UIImageView.
 Call sizeToFit to adjust the size of the view to match the image.
</blockquote>

blocks|key|1167001|text|图像视图的内在大小已经取决于图像的大小。你的假设(和约束是正确的)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1167002|但是，如果您已经在接口构建器中设置了图像视图，并且没有为其提供图像，那么布局系统(接口构建器)将不知道在编译时图像视图应该有多大。您的布局是模棱两可的，因为您的图像视图可能有许多大小。这就是抛出错误的原因。|1167003|设置图像视图的图像属性后，图像视图的内在大小由图像大小定义。如果您在运行时设置视图，那么您可以按照Anna提到的那样做，并在图像视图的属性检查器中为接口生成器提供“占位符”内在大小。这告诉界面生成器，“现在使用这个大小，稍后我会给您一个真正的大小”。占位符约束在运行时被忽略。|1167004|您的另一个选择是直接将图像分配给接口生成器中的图像视图(但我假设您的图像是动态的，所以这对您不起作用)。|1167005|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

The image view's intrinsic size is already dependent on the size of the image. Your assumptions (and constraints are correct).

However, if you've set up your image view in interface builder and have not provided it with an image, then the layout system (interface builder) won't know how big your image view is supposed to be at compile time. Your layout is ambiguous because your image view could be many sizes. This is what throws the errors.

Once you set your image view's image property, then the image view's intrinsic size is defined by the size of the image. If you're setting the view at runtime, then you can do exactly what Anna mentioned and provide interface builder with a "placeholder" intrinsic size in the property inspector of the image view. This tells interface builder, "use this size for now, I'll give you a real size later". The placeholder constraints are ignored at runtime.

Your other option is to assign the image to the image view in interface builder directly (but I assume your images are dynamic, so this won't work for you).

blocks|key|1042917|text|这是一个基本的问题：UIImageView与自动布局交互的唯一方式是通过它的intrinsicContentSize属性。该属性提供图像本身的内在大小，仅此而已。这产生了三种情况，有不同的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1042918|案例1:具有图像大小的视图|1042919|在第一种情况下，如果将UIImageView放置在外部自动布局约束只影响其位置的上下文中，则视图的intrinsicContentSize将声明它希望成为其图像的大小，而自动布局将自动调整视图的大小以等于其图像的大小。这有时正是你想要的，然后生活是美好的！|1042920|例2:全约束视图大小，保持图像的纵横比|1042921|其他时候，你的情况就不一样了。您知道您希望图像视图的大小，但也希望它保持显示图像的高宽比。在这种情况下，您可以使用自动布局来限制图像的大小，同时在图像视图上将旧的contentMode属性设置为.scaleAspectFit。该属性将导致图像视图重新显示显示的图像，并根据需要添加填充。如果这是你想要的，生活就是美好的！|1042922|案例3:部分受限的视图大小，适应图像的纵横比|1042923|但通常情况下，你会遇到棘手的第三种情况。您希望使用“自动布局”来部分确定视图的大小，同时允许图像的高宽比确定另一部分。例如，您可能希望使用“自动布局”约束来确定大小的一个维度(如垂直时间线滚动中的宽度)，同时依赖该视图告诉“自动布局”它希望一个与图像的纵横比匹配的高度(因此可滚动项不会太短或太高)。|1042924|您不能配置一个普通的图像视图来实现这一点，因为图像视图只通信其intrinsicContentSize。因此，如果您将图像视图放置在自动布局约束一维的上下文中(例如，将其限制在较短的宽度)，则图像视图不会告诉Auto+Layout它希望将其高度串联起来。它继续报告它的内在内容大小，与图像本身未经修改的高度。|1042925|为了配置图像视图以告诉Auto布局它想要接受它包含的图像的纵横比，您需要为此添加一个新的约束。此外，每当图像本身被更新时，您将需要更新该约束。您可以构建一个执行此操作的UIImageView子类，因此行为是自动的。下面是一个例子：|1042926|public+class+ScaleAspectFitImageView+:+UIImageView+{
++///+constraint+to+maintain+same+aspect+ratio+as+the+image
++private+var+aspectRatioConstraint:NSLayoutConstraint?+=+nil

++required+public+init?(coder+aDecoder:+NSCoder)+{
++++super.init(coder:aDecoder)
++++self.setup()
++}

++public+override+init(frame:CGRect)+{
++++super.init(frame:frame)
++++self.setup()
++}

++public+override+init(image:+UIImage!)+{
++++super.init(image:image)
++++self.setup()
++}

++public+override+init(image:+UIImage!,+highlightedImage:+UIImage?)+{
++++super.init(image:image,highlightedImage:highlightedImage)
++++self.setup()
++}

++override+public+var+image:+UIImage?+{
++++didSet+{
++++++self.updateAspectRatioConstraint()
++++}
++}

++private+func+setup()+{
++++self.contentMode+=+.scaleAspectFit
++++self.updateAspectRatioConstraint()
++}

++///+Removes+any+pre-existing+aspect+ratio+constraint,+and+adds+a+new+one+based+on+the+current+image
++private+func+updateAspectRatioConstraint()+{
++++//+remove+any+existing+aspect+ratio+constraint
++++if+let+c+=+self.aspectRatioConstraint+{
++++++self.removeConstraint(c)
++++}
++++self.aspectRatioConstraint+=+nil

++++if+let+imageSize+=+image?.size,+imageSize.height+!=+0
++++{
++++++let+aspectRatio+=+imageSize.width+/+imageSize.height
++++++let+c+=+NSLayoutConstraint(item:+self,+attribute:+.width,
+++++++++++++++++++++++++++++++++relatedBy:+.equal,
+++++++++++++++++++++++++++++++++toItem:+self,+attribute:+.height,
+++++++++++++++++++++++++++++++++multiplier:+aspectRatio,+constant:+0)
++++++//+a+priority+above+fitting+size+level+and+below+low
++++++c.priority+=+(UILayoutPriorityDefaultLow+%2B+UILayoutPriorityFittingSizeLevel)+/+2.0
++++++self.addConstraint(c)
++++++self.aspectRatioConstraint+=+c
++++}
++}
}|code-block|syntax|javascript|1042927|如需更多评论，请访问这个要旨|1042928|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/algal/03e661630a6869c883d9d915d5ecccbc^0|A|B|12|K|0|0|B|B|1D|K|0|0|29|B|2P|F|0|0|0|V|K|0|2C|B|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1L|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1R|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1S|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|V|3|W|5|X|7|1Z|8|@]|D|@]|E|$Y|Z]]|$1|10|3|11|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|12|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]]]

Here is the essential problem: the only way in which <code>UIImageView</code> interacts with Auto Layout is via its <code>intrinsicContentSize</code> property. That property provides the intrinsic size of the image itself, and nothing more. This creates three situations, with different solutions.

<h2>case 1: view with image's size</h2>

In the first case, if you place an <code>UIImageView</code> in a context where external Auto Layout constraints affect only its position, then the view's <code>intrinsicContentSize</code> will declare it wants to be the size of its image, and Auto Layout will automatically resize the view to equal the size of its image. This is sometimes exactly what you want, and then life is good!

<h2>case 2: fully constrained view size, preserving image's aspect ratio</h2>

At other times, you're in a different case. You know exactly the size you want the image view to take, but you also want it to preserve the aspect ratio of the displayed image. In this case, you can use Auto Layout to constrain the size of the image, while setting the old <code>contentMode</code> property to <code>.scaleAspectFit</code> on the image view. That property will cause the image view to rescale the displayed image, adding padding as needed. And if this is what you want, life is good!

<h2>case 3: partially constrained view size, adapting to image aspect ratio</h2>

But often times, you're in the tricky third case. You want to use Auto Layout to partially determine the size of the view, while allowing the image's aspect ratio to determine the other part. For instance, you might want to use Auto Layout constraints to determine one dimension of the size (like the width, in a vertical timeline scroll), while relying on the view to tell Auto Layout that it wants a height matching the image's aspect ratio (so the scrollable items are not too short or too tall).

You cannot configure an ordinary image view to do this because because an image view only communicates its <code>intrinsicContentSize</code>. So if you put an image view in a context where Auto Layout constrains one dimension (for instance, constraining it to a short width), then the image view does not tell Auto Layout it wants its height rescaled in tandem. It continues to report its intrinsic content size, with the unmodified height of the image itself.

In order to configure the image view to tell Auto Layout that it wants to take on the aspect ratio of the image it contains, you need to add a new constraint to that effect. Furthermore, you will need to update that constraint whenever the image itself is updated. You can build a <code>UIImageView</code> subclass that does this, so the behavior is automatic. Here's an example:

<pre><code>public class ScaleAspectFitImageView : UIImageView {
 /// constraint to maintain same aspect ratio as the image
 private var aspectRatioConstraint:NSLayoutConstraint? = nil

 required public init?(coder aDecoder: NSCoder) {
 super.init(coder:aDecoder)
 self.setup()
 }

 public override init(frame:CGRect) {
 super.init(frame:frame)
 self.setup()
 }

 public override init(image: UIImage!) {
 super.init(image:image)
 self.setup()
 }

 public override init(image: UIImage!, highlightedImage: UIImage?) {
 super.init(image:image,highlightedImage:highlightedImage)
 self.setup()
 }

 override public var image: UIImage? {
 didSet {
 self.updateAspectRatioConstraint()
 }
 }

 private func setup() {
 self.contentMode = .scaleAspectFit
 self.updateAspectRatioConstraint()
 }

 /// Removes any pre-existing aspect ratio constraint, and adds a new one based on the current image
 private func updateAspectRatioConstraint() {
 // remove any existing aspect ratio constraint
 if let c = self.aspectRatioConstraint {
 self.removeConstraint(c)
 }
 self.aspectRatioConstraint = nil

 if let imageSize = image?.size, imageSize.height != 0
 {
 let aspectRatio = imageSize.width / imageSize.height
 let c = NSLayoutConstraint(item: self, attribute: .width,
 relatedBy: .equal,
 toItem: self, attribute: .height,
 multiplier: aspectRatio, constant: 0)
 // a priority above fitting size level and below low
 c.priority = (UILayoutPriorityDefaultLow + UILayoutPriorityFittingSizeLevel) / 2.0
 self.addConstraint(c)
 self.aspectRatioConstraint = c
 }
 }
}
</code></pre>

More comment is available at <a href="https://gist.github.com/algal/03e661630a6869c883d9d915d5ecccbc" rel="noreferrer">this gist</a>

blocks|key|2403557|text|下面是一个AspectFit+UIImageView-derived实现，它适用于只有一个维度受到约束时的自动布局。另一个将自动设置。它将保持图像的纵横比，并且不会在图像周围增加任何边距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2403558|它调整了@藻类思想的目标-C实现，有以下不同之处：|2403559|表达式priority+=+(UILayoutPriorityDefaultLow+%2B+UILayoutPriorityFittingSizeLevel)+/+2.0+(计算值为150+)不足以超过默认图像内容大小约束(+1000+)的优先级。因此，方面约束优先级也增加到1000。|unordered-list-item|2403560|它只在必要时删除\re的高宽比约束。请记住，这是沉重的操作，所以没有必要这样做，如果纵横比是相同的。此外，可以多次调用image+setter，因此在这里不需要进行额外的布局计算是个好主意。|2403561|不知道为什么我们需要覆盖required+public+init?(coder+aDecoder:+NSCoder)和public+override+init(frame:CGRect)，所以这两个就被删除了。它们不会被UIImageView覆盖，这就是为什么在设置图像之前添加方面约束是没有意义的。|2403562|AspectKeepUIImageView.h|2403563|NS_ASSUME_NONNULL_BEGIN

@interface+AspectKeepUIImageView+:+UIImageView

-+(instancetype)initWithImage:(nullable+UIImage+*)image;
-+(instancetype)initWithImage:(nullable+UIImage+*)image+highlightedImage:(nullable+UIImage+*)highlightedImage;

@end

NS_ASSUME_NONNULL_END|code-block|syntax|javascript|2403564|AspectKeepUIImageView.m|2403565|#import+"AspectKeepUIImageView.h"

@implementation+AspectKeepUIImageView
{
++++NSLayoutConstraint+*_aspectContraint;
}

-+(instancetype)initWithImage:(nullable+UIImage+*)image
{
++++self+=+[super+initWithImage:image];

++++[self+initInternal];

++++return+self;
}

-+(instancetype)initWithImage:(nullable+UIImage+*)image+highlightedImage:(nullable+UIImage+*)highlightedImage
{
++++self+=+[super+initWithImage:image+highlightedImage:highlightedImage];

++++[self+initInternal];

++++return+self;
}

-+(void)initInternal
{
++++self.contentMode+=+UIViewContentModeScaleAspectFit;
++++[self+updateAspectConstraint];
}

-+(void)setImage:(UIImage+*)image
{
++++[super+setImage:image];
++++[self+updateAspectConstraint];
}

-+(void)updateAspectConstraint
{
++++CGSize+imageSize+=+self.image.size;
++++CGFloat+aspectRatio+=+imageSize.height+>+0.0f
++++++++?+imageSize.width+/+imageSize.height
++++++++:+0.0f;
++++if+(_aspectContraint.multiplier+!=+aspectRatio)
++++{
++++++++[self+removeConstraint:_aspectContraint];

++++++++_aspectContraint+=
++++++++[NSLayoutConstraint+constraintWithItem:self
+++++++++++++++++++++++++++++++++++++attribute:NSLayoutAttributeWidth
+++++++++++++++++++++++++++++++++++++relatedBy:NSLayoutRelationEqual
++++++++++++++++++++++++++++++++++++++++toItem:self
+++++++++++++++++++++++++++++++++++++attribute:NSLayoutAttributeHeight
++++++++++++++++++++++++++++++++++++multiplier:aspectRatio
++++++++++++++++++++++++++++++++++++++constant:0.f];

++++++++_aspectContraint.priority+=+UILayoutPriorityRequired;

++++++++[self+addConstraint:_aspectContraint];
++++}
}

@end|2403566|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/42654375/3345644^0|5|9|F|B|0|4|5|0|0|3|28|2H|3|33|4|3S|4|0|1N|5|0|C|1A|1N|Y|32|B|0|0|N|0|0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|H|3|I|5|J|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|K|3|L|5|J|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|M|3|N|5|J|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|S|7|22|8|@]|D|@]|E|$T|U]]|$1|V|3|W|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|S|7|26|8|@]|D|@]|E|$T|U]]|$1|Z|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

Here is an <code>AspectFit</code> <code>UIImageView</code>-derived implementation that works with Auto Layout when only one dimension is constrained. The other one will be set automatically. It will keep image aspect ratio and doesn't add any margins around the image.

It's tweaked Objective-C implementation of <a href="https://stackoverflow.com/a/42654375/3345644">@algal idea</a> with the following differences:

<ul>
<li>Expression <code>priority = (UILayoutPriorityDefaultLow +
UILayoutPriorityFittingSizeLevel) / 2.0</code> which evaluates to <code>150</code>
isn't enough to beat the priority of <code>1000</code> of the default image
content size constraint. So aspect constraint priority was increased
to <code>1000</code> as well.</li>
<li>it removes\re-adds the aspect ratio constraint only if necessary.
Keep in mind that this is heavy operation so there is no need to do
so if aspect ratio is the same. Moreover, <code>image</code> setter could be called multiple times, so it's a good idea to not cause extra layout calculations here.</li>
<li>not sure why we need to override <code>required public init?(coder
aDecoder: NSCoder)</code> and <code>public override init(frame:CGRect)</code>, so
these two are taken out. They aren't overridden by <code>UIImageView</code>,
that's why there is no point of adding the aspect constraint until an image is set.</li>
</ul>

<code>AspectKeepUIImageView.h</code>:

<pre><code>NS_ASSUME_NONNULL_BEGIN

@interface AspectKeepUIImageView : UIImageView

- (instancetype)initWithImage:(nullable UIImage *)image;
- (instancetype)initWithImage:(nullable UIImage *)image highlightedImage:(nullable UIImage *)highlightedImage;

@end

NS_ASSUME_NONNULL_END
</code></pre>

<code>AspectKeepUIImageView.m</code>:

<pre><code>#import "AspectKeepUIImageView.h"

@implementation AspectKeepUIImageView
{
 NSLayoutConstraint *_aspectContraint;
}

- (instancetype)initWithImage:(nullable UIImage *)image
{
 self = [super initWithImage:image];

 [self initInternal];

 return self;
}

- (instancetype)initWithImage:(nullable UIImage *)image highlightedImage:(nullable UIImage *)highlightedImage
{
 self = [super initWithImage:image highlightedImage:highlightedImage];

 [self initInternal];

 return self;
}

- (void)initInternal
{
 self.contentMode = UIViewContentModeScaleAspectFit;
 [self updateAspectConstraint];
}

- (void)setImage:(UIImage *)image
{
 [super setImage:image];
 [self updateAspectConstraint];
}

- (void)updateAspectConstraint
{
 CGSize imageSize = self.image.size;
 CGFloat aspectRatio = imageSize.height &gt; 0.0f
 ? imageSize.width / imageSize.height
 : 0.0f;
 if (_aspectContraint.multiplier != aspectRatio)
 {
 [self removeConstraint:_aspectContraint];

 _aspectContraint =
 [NSLayoutConstraint constraintWithItem:self
 attribute:NSLayoutAttributeWidth
 relatedBy:NSLayoutRelationEqual
 toItem:self
 attribute:NSLayoutAttributeHeight
 multiplier:aspectRatio
 constant:0.f];

 _aspectContraint.priority = UILayoutPriorityRequired;

 [self addConstraint:_aspectContraint];
 }
}

@end
</code></pre>

blocks|key|2403575|text|对于@algal案例3，我所要做的就是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2403576|class+ScaledHeightImageView:+UIImageView+{

++++override+var+intrinsicContentSize:+CGSize+{

++++++++if+let+myImage+=+self.image+{
++++++++++++let+myImageWidth+=+myImage.size.width
++++++++++++let+myImageHeight+=+myImage.size.height
++++++++++++let+myViewWidth+=+self.frame.size.width

++++++++++++let+ratio+=+myViewWidth/myImageWidth
++++++++++++let+scaledHeight+=+myImageHeight+*+ratio

++++++++++++return+CGSize(width:+myViewWidth,+height:+scaledHeight)
++++++++}
++++++++return+CGSize(width:+-1.0,+height:+-1.0)
++++}
}|code-block|syntax|javascript|2403577|这将缩放intrinsicContentSize的高度组件。(-1.0，-1.0)在没有图像时返回，因为这是超类中的默认行为。|2403578|此外，我不需要为包含图像视图的单元格的表设置UITableViewAutomaticDimension，而且单元格仍然自动大小。图像视图的内容模式是Aspect+Fit。|offset|length|style|CODE|2403579|entityMap^0|0|0|0|M|T|22|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

For @algal case 3, all I had to do was

<pre><code>class ScaledHeightImageView: UIImageView {

 override var intrinsicContentSize: CGSize {

 if let myImage = self.image {
 let myImageWidth = myImage.size.width
 let myImageHeight = myImage.size.height
 let myViewWidth = self.frame.size.width

 let ratio = myViewWidth/myImageWidth
 let scaledHeight = myImageHeight * ratio

 return CGSize(width: myViewWidth, height: scaledHeight)
 }
 return CGSize(width: -1.0, height: -1.0)
 }
}
</code></pre>

This scales the height component of the intrinsicContentSize. (-1.0, -1.0) is returned when there is no image because this is the default behavior in the superclass.

Also, I did not need to set <code>UITableViewAutomaticDimension</code> for the table with the cell containing the image view, and the cell still sizes automatically. The image view's content mode is <code>Aspect Fit</code>.

blocks|key|2403642|text|我使用了@algal的出色回答+(case+#3)，并对其进行了改进。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2403643|我希望能够设置最小和最大比率约束。因此，如果我有一个最小比率限制为1.0，并设置一个图片，高于宽，大小应该是平方。此外，在这些情况下，它应该填充UIImageView。|style|BOLD|CODE|2403644|甚至在Interface中也是如此。只需添加一个UIImageView，在标识检查器中将RatioBasedImageView设置为自定义类，并在属性检查器中设置最大和最小纵横比。|2403645|这是我的密码。|2403646|@IBDesignable
public+class+RatioBasedImageView+:+UIImageView+{
++++///+constraint+to+maintain+same+aspect+ratio+as+the+image
++++private+var+aspectRatioConstraint:NSLayoutConstraint?+=+nil

++++//+This+makes+it+use+the+correct+size+in+Interface+Builder
++++public+override+func+prepareForInterfaceBuilder()+{
++++++++invalidateIntrinsicContentSize()
++++}

++++@IBInspectable
++++var+maxAspectRatio:+CGFloat+=+999+{
++++++++didSet+{
++++++++++++updateAspectRatioConstraint()
++++++++}
++++}

++++@IBInspectable
++++var+minAspectRatio:+CGFloat+=+0+{
++++++++didSet+{
++++++++++++updateAspectRatioConstraint()
++++++++}
++++}


++++required+public+init?(coder+aDecoder:+NSCoder)+{
++++++++super.init(coder:aDecoder)
++++++++self.setup()
++++}

++++public+override+init(frame:CGRect)+{
++++++++super.init(frame:frame)
++++++++self.setup()
++++}

++++public+override+init(image:+UIImage!)+{
++++++++super.init(image:image)
++++++++self.setup()
++++}

++++public+override+init(image:+UIImage!,+highlightedImage:+UIImage?)+{
++++++++super.init(image:image,highlightedImage:highlightedImage)
++++++++self.setup()
++++}

++++override+public+var+image:+UIImage?+{
++++++++didSet+{+self.updateAspectRatioConstraint()+}
++++}

++++private+func+setup()+{
++++++++self.updateAspectRatioConstraint()
++++}

++++///+Removes+any+pre-existing+aspect+ratio+constraint,+and+adds+a+new+one+based+on+the+current+image
++++private+func+updateAspectRatioConstraint()+{
++++++++//+remove+any+existing+aspect+ratio+constraint
++++++++if+let+constraint+=+self.aspectRatioConstraint+{
++++++++++++self.removeConstraint(constraint)
++++++++}
++++++++self.aspectRatioConstraint+=+nil

++++++++if+let+imageSize+=+image?.size,+imageSize.height+!=+0+{
++++++++++++var+aspectRatio+=+imageSize.width+/+imageSize.height++++++++++++
++++++++++++aspectRatio+=+max(minAspectRatio,+aspectRatio)
++++++++++++aspectRatio+=+min(maxAspectRatio,+aspectRatio)

++++++++++++let+constraint+=+NSLayoutConstraint(item:+self,+attribute:+.width,
+++++++++++++++++++++++++++++++++++++++relatedBy:+.equal,
+++++++++++++++++++++++++++++++++++++++toItem:+self,+attribute:+.height,
+++++++++++++++++++++++++++++++++++++++multiplier:+aspectRatio,+constant:+0)
++++++++++++constraint.priority+=+.required
++++++++++++self.addConstraint(constraint)
++++++++++++self.aspectRatioConstraint+=+constraint
++++++++}
++++}
}|code-block|syntax|javascript|2403647|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/42654375/4846592^0|4|B|0|0|7|9|20|B|0|O|B|18|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@$A|14|B|15|F|G]|$A|16|B|17|F|H]]|9|@]|C|$]]|$1|I|3|J|5|6|7|18|8|@$A|19|B|1A|F|H]|$A|1B|B|1C|F|H]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1E|8|@]|9|@]|C|$P|Q]]|$1|R|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

I used <a href="https://stackoverflow.com/a/42654375/4846592">@algal's excellent answer</a> (case #3) and improved it for my use case.

I wanted to be able to set min and max ratio constraints. So if I have a minimum ratio constraint of 1.0 and set a picture that is higher than wide, the size should be square. 
Also it should fill the <code>UIImageView</code> in those cases.

This works even in Interface Builder. Just add a <code>UIImageView</code>, set <code>RatioBasedImageView</code> as custom class in the identity inspector and set the max and min aspect ratios in the attributes inspector.

Here's my code. 

<pre><code>@IBDesignable
public class RatioBasedImageView : UIImageView {
 /// constraint to maintain same aspect ratio as the image
 private var aspectRatioConstraint:NSLayoutConstraint? = nil

 // This makes it use the correct size in Interface Builder
 public override func prepareForInterfaceBuilder() {
 invalidateIntrinsicContentSize()
 }

 @IBInspectable
 var maxAspectRatio: CGFloat = 999 {
 didSet {
 updateAspectRatioConstraint()
 }
 }

 @IBInspectable
 var minAspectRatio: CGFloat = 0 {
 didSet {
 updateAspectRatioConstraint()
 }
 }


 required public init?(coder aDecoder: NSCoder) {
 super.init(coder:aDecoder)
 self.setup()
 }

 public override init(frame:CGRect) {
 super.init(frame:frame)
 self.setup()
 }

 public override init(image: UIImage!) {
 super.init(image:image)
 self.setup()
 }

 public override init(image: UIImage!, highlightedImage: UIImage?) {
 super.init(image:image,highlightedImage:highlightedImage)
 self.setup()
 }

 override public var image: UIImage? {
 didSet { self.updateAspectRatioConstraint() }
 }

 private func setup() {
 self.updateAspectRatioConstraint()
 }

 /// Removes any pre-existing aspect ratio constraint, and adds a new one based on the current image
 private func updateAspectRatioConstraint() {
 // remove any existing aspect ratio constraint
 if let constraint = self.aspectRatioConstraint {
 self.removeConstraint(constraint)
 }
 self.aspectRatioConstraint = nil

 if let imageSize = image?.size, imageSize.height != 0 {
 var aspectRatio = imageSize.width / imageSize.height 
 aspectRatio = max(minAspectRatio, aspectRatio)
 aspectRatio = min(maxAspectRatio, aspectRatio)

 let constraint = NSLayoutConstraint(item: self, attribute: .width,
 relatedBy: .equal,
 toItem: self, attribute: .height,
 multiplier: aspectRatio, constant: 0)
 constraint.priority = .required
 self.addConstraint(constraint)
 self.aspectRatioConstraint = constraint
 }
 }
}
</code></pre>

blocks|key|1038437|text|我通常不添加值0和priority小于UIImageView的contentCompressionResistancePriority+(默认情况下是750+)的图像高度和宽度约束，这两个约束只有在没有图像时才会激活，并且在运行时和编译时都会处理不明确的约束警告。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1038438|非常直接地将这些添加到IB中。从程序上讲，它应该如下所示。|1038439|let+noImageWidthConstraint+=+imageview.widthAnchor.constraint(equalToConstant:+0)
noImageWidthConstraint.priority+=+UILayoutPriority(rawValue:+100)
noImageWidthConstraint.isActive+=+true

let+noImageHeightConstraint+=+imageview.heightAnchor.constraint(equalToConstant:+0)
noImageHeightConstraint.priority+=+UILayoutPriority(rawValue:+100)
noImageHeightConstraint.isActive+=+true|code-block|syntax|javascript|1038440|entityMap^0|7|1|9|8|J|B|V|10|23|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

I usually add no image height and width constraints with value <code>0</code> and <code>priority</code> less than <code>UIImageView</code>'s <code>contentCompressionResistancePriority</code>, which by default is <code>750</code>. These two constraints will activate only when there is no image, and will take care of ambiguous constraints warnings both at run time and compile time. 

Pretty straight forward to add these in IB. Programatically, it should look something like below.

<pre class="lang-swift prettyprint-override"><code>let noImageWidthConstraint = imageview.widthAnchor.constraint(equalToConstant: 0)
noImageWidthConstraint.priority = UILayoutPriority(rawValue: 100)
noImageWidthConstraint.isActive = true

let noImageHeightConstraint = imageview.heightAnchor.constraint(equalToConstant: 0)
noImageHeightConstraint.priority = UILayoutPriority(rawValue: 100)
noImageHeightConstraint.isActive = true
</code></pre>

blocks|key|2403721|text|如果有人来这里想要一个简单的copy%2Bpaste用于Xamarin+@algal的代码(带有一些@alexander的更改)转换成.Net|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2403722|此外，我已经将其更改为根据宽度%2B高宽比约束高度，因为这适合我的所有用例。|2403723|///+<summary>
///++UIImage+view+that+will+set+the+height+correct+based+on+the+current
///++width+and+the+aspect+ratio+of+the+image.
///++https://stackoverflow.com/a/42654375/9829321
///+</summary>
public+class+UIAspectFitImageView+:+UIImageView
{
++++private+NSLayoutConstraint+_heightConstraint;

++++public+override+UIImage+Image
++++{
++++++++get+=>+base.Image;
++++++++set
++++++++{
++++++++++++base.Image+=+value;
++++++++++++UpdateAspectRatioConstraint();
++++++++}
++++}

++++public+UIAspectFitImageView()
++++++++=>+Setup();

++++public+UIAspectFitImageView(UIImage+image)+:+base(image)
++++++++=>+Setup();

++++public+UIAspectFitImageView(NSCoder+coder)+:+base(coder)
++++++++=>+Setup();

++++public+UIAspectFitImageView(CGRect+frame)+:+base(frame)
++++++++=>+Setup();

++++public+UIAspectFitImageView(UIImage+image,+UIImage+highlightedImage)+:+base(image,+highlightedImage)
++++++++=>+Setup();

++++private+void+Setup()
++++{
++++++++ContentMode+=+UIViewContentMode.ScaleAspectFit;
++++++++UpdateAspectRatioConstraint();
++++}

++++private+void+UpdateAspectRatioConstraint()
++++{
++++++++if+(Image+!=+null+&&+Image.Size.Width+!=+0)
++++++++{
++++++++++++var+aspectRatio+=+Image.Size.Height+/+Image.Size.Width;

++++++++++++if+(_heightConstraint?.Multiplier+!=+aspectRatio)
++++++++++++{
++++++++++++++++if+(_heightConstraint+!=+null)
++++++++++++++++{
++++++++++++++++++++RemoveConstraint(_heightConstraint);
++++++++++++++++++++_heightConstraint.Dispose();
++++++++++++++++++++_heightConstraint+=+null;
++++++++++++++++}

++++++++++++++++_heightConstraint+=+HeightAnchor.ConstraintEqualTo(WidthAnchor,+aspectRatio);
++++++++++++++++_heightConstraint.Priority+=+1000;
++++++++++++++++_heightConstraint.Active+=+true;
++++++++++++++++AddConstraint(_heightConstraint);
++++++++++++}
++++++++}
++++}
}|code-block|syntax|javascript|2403724|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If anyone comes here wanting a simple copy+paste for Xamarin heres @algal's code (with some of @alexander's changes) converted to .Net
Also I've changed it to constrain the Height based on the Width + Aspect Ratio as that fit all of my use cases.
<pre><code>/// &lt;summary&gt;
/// UIImage view that will set the height correct based on the current
/// width and the aspect ratio of the image.
/// https://stackoverflow.com/a/42654375/9829321
/// &lt;/summary&gt;
public class UIAspectFitImageView : UIImageView
{
 private NSLayoutConstraint _heightConstraint;

 public override UIImage Image
 {
 get =&gt; base.Image;
 set
 {
 base.Image = value;
 UpdateAspectRatioConstraint();
 }
 }

 public UIAspectFitImageView()
 =&gt; Setup();

 public UIAspectFitImageView(UIImage image) : base(image)
 =&gt; Setup();

 public UIAspectFitImageView(NSCoder coder) : base(coder)
 =&gt; Setup();

 public UIAspectFitImageView(CGRect frame) : base(frame)
 =&gt; Setup();

 public UIAspectFitImageView(UIImage image, UIImage highlightedImage) : base(image, highlightedImage)
 =&gt; Setup();

 private void Setup()
 {
 ContentMode = UIViewContentMode.ScaleAspectFit;
 UpdateAspectRatioConstraint();
 }

 private void UpdateAspectRatioConstraint()
 {
 if (Image != null &amp;&amp; Image.Size.Width != 0)
 {
 var aspectRatio = Image.Size.Height / Image.Size.Width;

 if (_heightConstraint?.Multiplier != aspectRatio)
 {
 if (_heightConstraint != null)
 {
 RemoveConstraint(_heightConstraint);
 _heightConstraint.Dispose();
 _heightConstraint = null;
 }

 _heightConstraint = HeightAnchor.ConstraintEqualTo(WidthAnchor, aspectRatio);
 _heightConstraint.Priority = 1000;
 _heightConstraint.Active = true;
 AddConstraint(_heightConstraint);
 }
 }
 }
}
</code></pre>

I want my <code>UIImageView</code> to grow or shrink depending on the size of what the actual image it's displaying is. But I want it to stay vertically centered and 10pts from the leading edge of the superview.

However, if I set these two constraints it complains I haven't set up enough constraints to satisfy Auto Layout. To me it seems to perfectly describe what I want. What am I missing?

With Auto Layout, how do I make a UIImageView's size dynamic depending on the image?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我希望我的UIImageView增长或缩小，取决于它所显示的实际图像的大小。但我希望它保持垂直中心和10分，从前沿的超级视图。但是，如果设置这两个约束，它会抱怨我没有设置足够的约束来满足自动布局。在我看来，它似乎完美地描述了我想要的东西。我遗漏了什么？

问对于自动布局，我如何使UIImageView的大小动态取决于图像？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于自动布局，我如何使UIImageView的大小动态取决于图像？EN