内置UIImageView的UIStackView上的自动布局 - iOS Swift [英] Auto Layout on UIStackView with UIImageView inside - iOS Swift

问题描述

在以编程方式构建视图时，我遇到了一些自动布局问题。

I have some issues with auto layout when building view programmatically.

有一个垂直的UIStackView，里面有几个元素，主要是标签和图像。在stackView和imageView上设置属性之后，我得到类似于下面的图像1的东西（图像顶部和底部的空白区域;屏幕尺寸越小，白色空间越大），而我希望得到更类似于图像的东西2（图像周围没有空格）。

There is a vertical UIStackView with several elements inside, mainly labels and images. After setting properties on stackView and imageView, as a result I get something similar to image 1 below (white spaces on top and bottom of the image; the smaller screen size the bigger white spaces) while I would like to get something more similar to image 2 (without white spaces around image).

1：

2：

我正在阅读一些关于如何正确设置stackView，它的分布和对齐的教程，因此我的StackView属性设置如下：

I was reading some tutorials on how to properly set the stackView, its distribution and alignment and as a result in my StackView properties are set like this:

myStackView.axis = .vertical
myStackView.distribution = .fill
myStackView.alignment = .fill
myStackView.spacing = 12
myStackView.contentMode = .scaleAspectFit

和ImageView在我将其添加为已安排的子视图之前，我设置：

and on ImageView before I add it as an arranged subview, I set:

myImageView.contentMode = .scaleAspectFit
myImageView.autoresizesSubviews = true
myImageView.sd_setImage(with: URL(string: image))           
myImageView.setContentHuggingPriority(251, for: .horizontal)
myImageView.setContentHuggingPriority(500, for: .vertical)
myImageView.setContentCompressionResistancePriority(750, for: .horizontal)
myImageView.setContentCompressionResistancePriority(750, for: .vertical)

我没有在imageView上方和下方的标签上更改CHP和CCRP。

I did not change CHP and CCRP on labels above and under the imageView.

我试图操纵内容拥抱优先级和内容压缩阻力优先但它没有改变任何东西。任何想法我做错了什么？

I was trying to manipulate with content hugging priority and content compressions resistance priority but it did not change anything. Any ideas what I do wrong?

推荐答案

我怀疑这里的问题是拥抱和抗压力优先权适用于view的内在内容大小， UIImageView 的内在内容大小是图像的自然大小。但是您希望缩放图像以适应屏幕的宽度，这意味着（通常）您不希望图像视图的大小为其图像的自然大小。因此，拥抱和抗压缩优先级对您没有帮助。

I suspect the problem here as is that the hugging and compression-resistance priorities apply to the view's intrinsic content size, and the intrinsic content size of a UIImageView is the natural size of the image. But you want the image to be scaled to fit the width of the screen, which means that (in general) you don't want the image view's size to be the natural size of its image. Thus the hugging and compression-resistance priorities will not help you.

您需要做的是添加两个约束：

What you need to do is add two constraints:

• 将图像视图的宽度限制为等于堆栈视图的宽度。您可以在故事板或代码中执行此操作。在代码中：

• Constrain the image view's width to equal the stack view's width. You can do this in the storyboard or in code. In code:

myImageView.widthAnchor.constraint(equalTo: myStackView.widthAnchor).isActive = true

限制图像视图的宽高比以匹配图像的宽高比。如果在运行时更改图像，则需要在代码中执行此操作，如下所示：

Constrain the image view's aspect ratio to match the image's aspect ratio. If you change the image at runtime, you need to do this in code, like this:

// Instance variable:
var imageAspectRatioConstraint: NSLayoutConstraint?

// When you set the image:
imageAspectRatioConstraint?.isActive = false
imageAspectRatioConstraint = myImageView.widthAnchor.constraint(
    equalTo: myImageView.heightAnchor,
    multiplier: myImageView.image!.size.width / myImageView.image!.size.height)
imageAspectRatioConstraint!.isActive = true

这两个必需的约束将强制图像视图完全正确的高度，以完美地包含缩放图像。

These two required constraints will force the image view to be exactly the right height to perfectly contain the scaled image.

如果您限制堆栈视图的高度以匹配其他视图的高度（例如，您的顶级视图），则可能仍会遇到麻烦。 （如果您的堆栈视图 是您的顶级视图，则它实际上受限于填充屏幕。）在这种情况下，堆栈视图将根据需要拉伸或缩小至少一个已排列的子视图填充该高度。

You may still run into trouble if you have constrained the height of the stack view to match the height of some other view—for example, your top-level view. (If your stack view is your top-level view, it is effectively constrained to fill the screen.) In that case, the stack view will stretch or shrink at least one of its arranged subviews as needed to fill that height.

如果所排列的子视图都没有灵活的高度，那么自动布局可能会最终破坏图像视图的宽高比约束，因此它可以拉伸图像视图填补所需的空间。或者它可以拉伸你不想拉伸的其他视图。

If none of the arranged subviews has a flexible height, then auto layout may end up breaking the image view's aspect ratio constraint so it can stretch the image view to fill the needed space. Or it may stretch some other view that you don't want stretched.

如果发生这种情况，你有三种选择：

If that's happening, you have three options:

• 删除强制堆栈视图填充其他视图高度的约束。然后，自动布局将设置堆栈视图的高度以精确包含其首选大小的排列子视图（基于约束或内在内容大小）。

• Remove the constraint that's forcing the stack view to fill the height of some other view. Then auto layout will set the height of the stack view to exactly contain its arranged subviews at their preferred sizes (based on constraints or intrinsic content size).

降低您希望调整大小以填充所需高度的一个或多个已排列子视图的垂直拥抱和/或压缩阻力优先级。

Lower the vertical hugging and/or compression resistance priority of one or more arranged subviews that you want resized to fill the required height.

添加填充 UIView 到堆栈视图以吸收额外的高度。将其背景颜色设置为nil或 .clear ，因此它不可见。

Add a "padding" UIView to the stack view to absorb the additional height. Set its background color to nil or .clear so it's not visible.

这篇关于内置UIImageView的UIStackView上的自动布局 - iOS Swift的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！