ios - 更改 UIStackView 中 UIImageView 的高度优先级

Question

我在 UIView 中有一个 UIImageView，它位于水平 UIStackView 中(带有 .fillEqually 选项)。水平 UIStackView 总是有两个 View 。水平 UIStackView 从其最高的子 UIView 获取高度。

我想要实现的目标:在示例屏幕截图中，当您考虑使用多行 View 时，UIImageView 由于其图像大小而具有更大的尺寸。但是，我希望 ImageView 缩小到适合左侧(多行标签) View 的大小。这显示在第二个屏幕截图中。图像应该有一个高度，我通过右侧的红色椭圆线显示。

带有标签类的 UIImageView:

@IBDesignable class LabelWithImage: UIView {

var topMargin: CGFloat = 0.0
var verticalSpacing: CGFloat = 10.0
var bottomMargin: CGFloat = 0.0

@IBInspectable var labelText: String = "" { didSet { updateView() } }
@IBInspectable var image: UIImage = UIImage(named: "harcamagrafik")! { didSet { updateView() } }

fileprivate var label: UILabel!
fileprivate var imageView: UIImageView!

override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
}

required public init?(coder: NSCoder) {
    super.init(coder:coder)
    setUpView()
}

override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    setUpView()
}

func setUpView() {

    label = UILabel()
    label.font = UIFont.init(name: "Metropolis-Medium", size: 12)
    label.numberOfLines = 1
    label.lineBreakMode = NSLineBreakMode.byWordWrapping
    label.textColor = UIColor.init(rgb: 0x9B9B9B)

    imageView = UIImageView(image: image)
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true

    addSubview(label)
    addSubview(imageView)

    label .translatesAutoresizingMaskIntoConstraints = false
    imageView.translatesAutoresizingMaskIntoConstraints = false
    setContentHuggingPriority(.init(rawValue: 1000.0), for: .vertical)
    setContentCompressionResistancePriority(.init(rawValue: 10.0), for: .vertical)

    label.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
   // imageView.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true

    label.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
   // imageView.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true

    imageView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
    label.topAnchor.constraint(equalTo: topAnchor, constant: topMargin).isActive = true
    imageView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: verticalSpacing).isActive = true
    bottomAnchor.constraint(equalTo: imageView.bottomAnchor, constant: bottomMargin).isActive = true

    // call common "refresh" func
    updateView()
}

func updateView() {
    label.text = labelText
    accessibilityIdentifier = labelText
    imageView.image = image
    label.sizeToFit()
}
}

水平堆栈 View :

private let topHorizontalStackView: UIStackView = {
let s = UIStackView()
s.distribution = .fillEqually
s.spacing = 10
s.axis = .horizontal
s.alignment = .fill
s.translatesAutoresizingMaskIntoConstraints = false
return s
}()

编辑 我试图为我的 LabelWithImage View 设置高度限制。现在，它看起来不错，但是当我打开调试器时，它说 View 的高度不明确。

leftView.layoutIfNeeded() //It is the view with multilineLabel.
view.heightAnchor.constraint(equalToConstant: leftView.bounds.height).isActive = true

我想要在屏幕截图中显示的内容:

EDIT 2 在我像@Don 所说的那样优先考虑标签并在 ImageView 上将压缩设置为低后，我得到了以下结果。顺便说一句，下面的代码仍然有效

leftView.layoutIfNeeded()//就是带有multilineLabel的 View 。 view.heightAnchor.constraint(equalToConstant:leftView.bounds.height).isActive = true

如果我给 labelWithImageView 作为特定常量(40 是 UIStackView 顶部和底部插图)；

view.heightAnchor.constraint(equalToConstant: leftView.bounds.height - 40).isActive = true

顶部垂直 UIStackView 内的 View 显示了雄心勃勃的布局。 (你看不到屏幕截图中的 View ，因为我猜它们是不相关的。)

Answer 1

好吧，看起来你的约束是错误的，这里我做了一个带有屏幕的例子，这样你就可以重新创建我的约束

这里有一个解释:在左 View 中设置你自己的约束来填充 View (检查是否有歧义，因为右 View 应该从左 View 获取大小)，将其中所有标签的垂直内容拥抱优先级设置为 1000

在右侧，您只需将标题垂直内容拥抱优先级设置为 1000(+ 基本需要的约束，如前导、尾随和顶部以填充 View )和中提琴，图像将变形为匹配左 View 大小所需的任何大小.