防止垂直 UIStackView 拉伸子视图？答案

【问题标题】：Prevent vertical UIStackView from stretching a subview?防止垂直 UIStackView 拉伸子视图？
【发布时间】：2019-03-10 01:14:39
【问题描述】：

我有一个带有垂直 UIStackView 的 UITableViewCell，它当前具有 .alignment = fill 和 distribution = fill。在堆栈视图中，我有一个 UILabel 和一个 UIImageView。

标签应该左对齐并延伸到 stackview 的宽度（确实如此）。图像视图具有宽高比匹配的内容模式，应位于堆栈视图的中间。我认为这可以按我的意愿工作，直到我在 UIImageView 上设置了背景颜色，然后意识到虽然图像本身看起来正确（缩放和居中），但视图本身会延伸到 stackview 的整个宽度（就像标签一样确实）。

是否可以让标签拉伸堆栈视图的宽度但不能拉伸图像视图？理想情况下，我希望图像视图只是缩放图像的大小，并且不一直延伸到堆栈视图的边缘。

【问题讨论】：

您可以计算宽高比并更改框架，但是...为什么呢？视图填满宽度有什么关系？
我正在向 UIImageVIew 添加一个手势识别器，这样我就可以知道用户何时点击图像。目前，如果他们点击图像“外部”的东西，就会触发手势识别器。我的 UIImageView 通常没有背景颜色，但作为测试，我将其更改为灰色，这就是我意识到图像视图本身被拉伸以适应堆栈视图的宽度的方式。

标签： ios uiimageview autolayout uistackview

【解决方案1】：

一种方法：

为您的图像计算适当的宽高比框架

当用户点击图像视图时，评估点击位置并仅在点击在宽高比匹配框架内时采取行动。

另一种方法：

为您的图像计算适当的宽高比框架
在UILayoutGuide 中水平居中嵌入UIImageView
添加UILayoutGuide作为堆栈视图的排列子视图

这将使您的标签在堆栈视图（单元格）的宽度上保持拉伸，并使您的图像视图居中，从而使您能够检测到点击。

【讨论】：

感谢您的两个建议！我会给他们一个机会并报告。

【解决方案2】：

进行这些更改：

将堆栈视图的对齐方式设置为 .center 而不是 .fill。
将标签的宽度限制为等于堆栈视图的宽度。

在代码中，当您设置图像视图的图像时，还要在图像视图上创建一个纵横比约束，如下所示：

class MyCell: UITableViewCell {
    @IBOutlet private var myImageView: UIImageView!
    private var imageViewAspectConstraint: NSLayoutConstraint?

    func setImage(_ image: UIImage) {
        myImageView.image = image

        imageViewAspectConstraint?.isActive = false
        imageViewAspectConstraint = myImageView.widthAnchor.constraint(
            equalTo: myImageView.heightAnchor,
            multiplier: image.size.width / image.size.height)
        imageViewAspectConstraint!.isActive = true
    }
}

请注意，由于单元格可以重复使用，因此您还必须删除先前的纵横比约束（如果有的话）。我发布的代码使用imageViewAspectConstraint 来保存约束并在图像更改时将其删除。

【讨论】：